[js] events toevoegen aan elementen

[orf]

In ons CMS worden formulierelementen gegenereerd. In sommige gevallen krijgen deze elementen een onclick of onchange mee. Soms gebeurt dit inline (<input onclick="functie()") en soms wordt er een stukje javascript gegenereerd die de onclick zet (DOM 1).

Met een nieuw element wil ik javascript acties toevoegen aan bepaalde elementen. De huidige events moeten echter wel behouden blijven.

Met wat knutselwerk kwam ik tot het volgende:

JavaScript:

function doeIets(){
    alert('doeIets');
}
function doeIetsAnders(e){
    //alert('doeIetsAnders ' + e);

    var id = false;
    for (var i in e){   
        if (e[i] && e[i].id){
            id = e[i].id;
            break;
        }
    }
    if (id){
        alert(document.getElementById(id).innerHTML);
    }
}

onload = function(){
    var t = document.getElementById('test');
    if(document.attachEvent) {
            t.attachEvent('onclick', function(e){doeIetsAnders(e)});
    } else {
        t.addEventListener('click', function(e){doeIetsAnders(e)}, true);
    }
}

in de body dan een element:

HTML:

<span id="test" onclick="doeIets();">test html</span>

Met een rare constructie in de functie doeIetsAnders kijk ik nu welk element de functie heeft aangeroepen, omdat ik het niet voor elkaar kreeg om dat mee te geven in de functieaanroep.
Is er een minder omslachtige/betere manier om functies toe te voegen aan elementen?

Dank!

[André]

orf schreef op woensdag 14 februari 2007 @ 11:19:

Met een rare constructie in de functie doeIetsAnders kijk ik nu welk element de functie heeft aangeroepen, omdat ik het niet voor elkaar kreeg om dat mee te geven in de functieaanroep.
Is er een minder omslachtige/betere manier om functies toe te voegen aan elementen?

Standaard wordt het event meegegeven naar de functie die in de onclick staat. Dat event heeft weer een Target/srcElement (IE/FF) die je op kunt vragen. Zoek maar eens naar die 2 termen.

[BtM909]

Heb je ook al geprobeerd te zoeken met de GoT search, want dit probleem is veel vaker voorgekomen dan je waarschijnlijk denkt


Je kan overigens ook dit topic lezen: [JS] Overhaul van Scott Andrew's addEvent , hierin staat ook een oplossing van crisp die ook nog eens niet lekt

Deze dus: http://therealcrisp.xs4all.nl/upload/addEvent_dean.html

[ Voor 4% gewijzigd door BtM909 op 14-02-2007 11:31 ]

[orf]

Heb je ook al geprobeerd te zoeken met de GoT search, want dit probleem is veel vaker voorgekomen dan je waarschijnlijk denkt

Wel gezocht, maar niet met dat keyword. (ik kende de functienaam natuurlijk niet).

Mooi werk van Crisp!

[crisp]

André schreef op woensdag 14 februari 2007 @ 11:28:
[...]

Standaard wordt het event meegegeven naar de functie die in de onclick staat. Dat event heeft weer een Target/srcElement (IE/FF) die je op kunt vragen. Zoek maar eens naar die 2 termen.

target/srcElement is niet noodzakelijk het element waarvoor de handler geregistreerd is (pas op: IE-only code ahead):

HTML:

<div onclick="alert(event.srcElement.tagName)">
    <p>klik hier!</p>
</div>

Wat je wilt hebben is 'this', en daar wringt 'm nou net de schoen met IE's event-model: die voert de handlers uit in de global scope...