JavaScript Element beim Anklicken Identifizieren

[Musiiic]

Guten Abend miteinander,

bin auf der suche nach einer möglichkeit, elemente, die innerhalb eines DIV's angeklickt wurden zu Identifizieren.

möchte aber keinem element eine extra ID zuweisen wie etwa:

<button id="button2">Klick</button>

oder in JavaScript den klick zu jedem element extra initialisieren.

ich habe zwar schon einen ansatz dafür, dieser funktioniert aber leider nur im IE und nicht im Firefox:

<div onClick="reply_click()">
    <button>hallo</button>
    <button>hallo 2</button>
    <button>hallo 3</button>
</div>

<script language="javascript" type="text/javascript">
function reply_click(e) {
    e = e || window.event;
    e = e.target || e.srcElement;
    alert(e.nodeName);
}
</script>

scheinbar findet der Firefox e.srcElement nicht oder erkennt es nicht.

Nun eben meine Frage, ob ihr eine Lösung dafür habt, dass dies auch im Firefox funktioniert, oder einen anderen Ansatz, der in mehreren Browsern funktioniert.

Bin mit jedem Rat sehr dankbar!

 

[1668mib]

Ich versteh ehrlich gesagt nicht, was die Zeilen 9 und 10 machen sollen :-)

Also Zeile 9 -> klar. Wenn Parameter e übergeben wurde, nimm e, ansonsten wird es wohl der IE sein und dann nimm window.event.
Aber Zeile 10 is mir jetzt dann weniger klar, warum dort halt wieder "e" verwendet wird...


Und wäre es nicht sinnvoll, etwas wie JQuery zu verwenden?

 

[Musiiic]

damit der event-handler das ziel des geklickten elements wiedergibt.

 

[1668mib]

Also das selbe mit JQuery btw... http://api.jquery.com/event.target/

 

[palace4d]

Event Delegation heißt das Verfahren. Hier ein Minimalbsp für Crossbrowserevents.

        eventUtility = {
            addEvent: function (el, type, fn) {
                if (el.addEventListener) {
                    el.addEventListener(type, fn, false);
                } else if (el.attachEvent) {
                    el.attachEvent("on" + type, fn);
                } else {
                    el["on" + type] = fn;
                }
            },

            getTarget: function (event) {
                if (event.target) {
                    return event.target;
                } else {
                    return event.srcElement;
                }
            }
        };

        eventUtility.addEvent(document, "click", function(evt){
           var el = eventUtility.getTarget(evt);
           if(el.tagName !== "BUTTON") return;
           // ... Applikationscode

        });

 

[peterchr]

oder per jQuery:

jQuery('button').on('click', function(event){
console.log(jQuery(this));
});

Hier ist das innere jQuery(this) object das aktuell geklickte Element im DOM.

 

[1668mib]

Wobei evtl halt notwendig ist zu prüfen, ob der Button überhaupt interessant ist dann... also ob er ein Element des Divs ist.

 

[peterchr]

....sollte auch nur ein einfaches Beispiel sein ;-)

Genauso gut könnte man die Listener über das document eingeschränkt auf buttons realisieren:

jQuery(document).on('click', 'button', function() {
   jQuery(this).text('I was clicked');
});

Das hat den Vorteil, wenn z.B. Teile der Seite, die Buttons enthalten, über AJAX ausgetauscht werden, die Listener noch funktioneren. Würden die "click" Listener direkt an den ausgetauschten DOM-Elementen hängen, so müsste man die jeweiligen Listener erneut aktivieren.

 

[1668mib]

Also war auch nicht auf deinen Beitrag alleine bezogen, auch auf meinen.