Detaillierte Erläuterung des Unterschieds zwischen Ziel und aktuellem Ziel

25.06.2014

Ich habe heute das JQuery-Handbuch gelesen und festgestellt, dass das Ereignisobjektmodul von JQuery auch ein aktuelles Ziel hat, das immer darauf verweist.

Die Schlussfolgerung lautet also: Das native currentTarget unterscheidet sich völlig vom currentTarget von jQuery. Wir sollten uns auf eine unterschiedliche Behandlung konzentrieren.

2014-6-17

Was ist der Unterschied zwischen Ziel und aktuellem Ziel?

Einfach zu verstehen:

Zum Beispiel gibt es jetzt A und B,

A.addChild(B)

A wartet auf Mausklickereignisse

Wenn dann auf B geklickt wird, ist das Ziel B und das aktuelle Ziel ist A

Das heißt, das aktuelle Ziel ist immer derjenige, der auf das Ereignis hört, und das Ziel ist das Reale Absender des Ereignisses

Zusammenfassung:

Ziel befindet sich in der Zielphase des Ereignisflusses; currentTarget befindet sich in der Erfassungs-, Ziel- und Bubbling-Phase des Ereignisflusses. Nur wenn sich der Ereignisfluss in der Zielphase befindet, sind die beiden Richtungen gleich. Wenn er sich in der Erfassungs- und Blasenphase befindet, zeigt das Ziel auf das angeklickte Objekt und das aktuelle Ziel auf das Objekt der aktuellen Ereignisaktivität (normalerweise das). Elternklasse).

Schlussfolgerung: Aufgrund der Notwendigkeit, mit dem IE-Browser kompatibel zu sein, werden Ereignisse im Allgemeinen in der Bubbling-Phase verarbeitet. Zu diesem Zeitpunkt sind das Ziel und das aktuelle Ziel in einigen Fällen unterschiedlich.

Der erste Platz

function(e){
    var target = e.target || e.srcElement;//兼容ie7,8
    if(target){
        zIndex = $(target).zIndex();
    }
}

//往上追查调用处
enterprise.on(img,'click',enterprise.help.showHelp);

Verwenden Sie $(target).zIndex() unter IE7-8; Sie können

Verwenden Sie $(e unter IE7-8. currentTarget).zIndex(); kann nicht abgerufen werden. Möglicherweise gibt es weder target noch currentTarget unter IE

Testen Sie es (natürlich im IE-Browser)

<input type="button" id="btn1" value="我是按钮" />
<script type="text/javascript"> 
	btn1.attachEvent("onclick",function(e){
		alert(e.currentTarget);//undefined
		alert(e.target);       //undefined
		alert(e.srcElement);   //[object HTMLInputElement]
	});
</script>

Der zweite Platz:

$(element).on('click',jQuery.proxy(this, 'countdownHandler', this.name, this.nameAlert));
function countdownHandler(name, nameAlert){
    var _this = this,
    zIndex = 1999;//获取不到target时的默认值
    if(arguments[2] && arguments[2].currentTarget && $(arguments[2].currentTarget)){
        zIndex = $(arguments[2].currentTarget).zIndex();
        if(zIndex){
            zIndex += 1;
        }else{//获取不到z-index值
            zIndex = 1999;
        }
    }
}

Die Verwendung von $(arguments[2].currentTarget).zIndex(); kann auch

erhalten. Geschätzte Schlussfolgerung: Letzteres ist Bei Verwendung von jquery Um Ereignisse zu binden, lässt jQuery intern currentTarget das aktuelle Element darstellen. Ähnlich wie target unter FF/Chrome und srcElement unter IE.

Online-Beispiele:

    <p id="outer" style="background:#099">  
        click outer  
        <p id="inner" style="background:#9C0">click inner</p>  
        <br>  
    </p>  
      
    <script type="text/javascript">  
    function G(id){  
        return document.getElementById(id);      
    }  
    function addEvent(obj, ev, handler){  
        if(window.attachEvent){  
            obj.attachEvent("on" + ev, handler);  
        }else if(window.addEventListener){   
            obj.addEventListener(ev, handler, false);  
        }  
    }  
    function test(e){  
        alert("e.target.tagName : " + e.target.tagName + "/n e.currentTarget.tagName : " + e.currentTarget.tagName);  
    }  
    var outer = G("outer");  
    var inner = G("inner");  
    //addEvent(inner, "click", test);  // 两者都是P标签
    addEvent(outer, "click", test);  //结论：当在outer上点击时，e.target与e.currentTarget是一样的，都是p；当在inner上点击时，e.target是p，而e.currentTarget则是p。
    </script>

Objekte this, currentTarget und target

in Innerhalb Im Ereignisverarbeitungsprogramm entspricht das Objekt this immer dem Wert von currentTarget, während target nur das tatsächliche Ziel des Ereignisses enthält. Wenn der Event-Handler direkt dem Zielelement zugewiesen ist, enthalten this, currentTarget und target dieselben Werte. Schauen Sie sich das folgende Beispiel an:

var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
    alert(event.currentTarget === this); //ture
    alert(event.target === this); //ture
};

Dieses Beispiel erkennt die Werte von currentTarget, target und this. Da das Ziel des Klickereignisses die Schaltfläche ist, sind diese drei Werte gleichzeitig gleich. Wenn der Ereignishandler im übergeordneten Knoten der Schaltfläche vorhanden ist, sind diese Werte nicht identisch. Schauen Sie sich das folgende Beispiel noch einmal an:

document.body.onclick = function (event) {
    alert(event.currentTarget === document.body); //ture
    alert(this === document.body); //ture
    alert(event.target === document.getElementById("myBtn")); //ture
};

Wenn auf die Schaltfläche in diesem Beispiel geklickt wird, sind sowohl this als auch currentTarget gleich document.body, da der Ereignishandler für dieses Element registriert ist. Das Zielelement entspricht jedoch dem Schaltflächenelement und geht davon aus, dass es das eigentliche Ziel des Klickereignisses ist. Da für die Schaltfläche kein Ereignishandler registriert ist, wird das Klickereignis nach document.body weitergeleitet, wo das Ereignis verarbeitet wird.

Wenn Sie mehrere Ereignisse über eine Funktion verarbeiten müssen, können Sie das Typattribut verwenden. Zum Beispiel:

var btn = document.getElementById("myBtn");
var handler = function (event) {
        switch (event.type) {
        case "click":
            alert("Clicked");
            break;
        case "mouseover":
            event.target.style.backgroundColor = "red";
            bread;
        case "mouseout":
            event.target.style.backgroundColor = "";
            break;
        }
    };
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Unterschieds zwischen Ziel und aktuellem Ziel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!