Explication détaillée de la différence entre target et currentTarget

2014-6-25

J'ai lu le manuel de jquery aujourd'hui et j'ai découvert que le module objet événement de jQuery a également un currentTarget, qui pointe toujours vers cela.

La conclusion est donc la suivante : le currentTarget natif est complètement différent du currentTarget de jQuery. Nous devrions nous concentrer sur un traitement différent.

2014-6-17

Quelle est la différence entre target et currentTarget ?

Facile à comprendre :

Par exemple, il y a A et B maintenant,

A.addChild(B)

A écoute les événements de clic de souris

Ensuite, lorsque l'on clique sur B, la cible est B et le currentTarget est A

C'est-à-dire que le currentTarget est toujours celui qui écoute l'événement, et la cible est le réel expéditeur de l'événement

Résumé :

target est dans l'étape cible du flux d'événements ; currentTarget est dans les étapes de capture, de cible et de bouillonnement du flux d'événements. Ce n'est que lorsque le flux d'événements est dans l'étape cible que les deux directions sont les mêmes. Lorsqu'il est dans les étapes de capture et de bouillonnement, la cible pointe vers l'objet cliqué et currentTarget pointe vers l'objet de l'activité événementielle en cours (généralement le). parent). classe).

Conclusion : en raison de la nécessité d'être compatible avec le navigateur IE, les événements sont généralement traités au stade de bouillonnement. À ce stade, la cible et la cible actuelle sont différentes dans certains cas.

La première place

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

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

Utilisez $(target).zIndex() sous IE7-8, vous pouvez obtenir

Utilisez $(e sous IE7-8 . currentTarget).zIndex(); Il se peut qu'il n'y ait ni target ni currentTarget sous IE

Testez-le (bien sûr dans le navigateur IE)

<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>

La deuxième place :

$(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;
        }
    }
}

L'utilisation de $(arguments[2].currentTarget).zIndex(); peut également obtenir

Conclusion estimée : cette dernière est lors de l'utilisation de jquery pour lier des événements, jQuery permet en interne à currentTarget de représenter l'élément actuel. Similaire à target sous FF/Chrome et srcElement sous IE.

Exemples en ligne :

    <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>

Objects this, currentTarget et target
dans
Within le programme de traitement d'événement , l'objet this est toujours égal à la valeur de currentTarget, tandis que target ne contient que la cible réelle de l'événement. Si le gestionnaire d'événements est affecté directement à l'élément cible, this, currentTarget et target contiennent les mêmes valeurs. Jetez un œil à l'exemple suivant :

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

Cet exemple détecte les valeurs de currentTarget, target et this. Puisque la cible de l'événement de clic est le bouton, ces trois valeurs sont égales à la fois. Si le gestionnaire d'événements existe dans le nœud parent du bouton, alors ces valeurs ne sont pas les mêmes. Regardez à nouveau l'exemple suivant :

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

Lorsque l'on clique sur le bouton dans cet exemple, this et currentTarget sont égaux à document.body car le gestionnaire d'événements est enregistré dans cet élément. Cependant, l'élément cible est égal à l'élément bouton, pensant qu'il est la véritable cible de l'événement de clic. Puisqu'aucun gestionnaire d'événements n'est enregistré sur le bouton, l'événement click remonte jusqu'à document.body, où l'événement est géré.

Lorsque vous devez gérer plusieurs événements via une seule fonction, vous pouvez utiliser l'attribut type. Par exemple :

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;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!