target と currentTarget の違いの詳しい説明-jsチュートリアル-php.cn

target と currentTarget の違いの詳しい説明

零下一度

リリース： 2017-06-17 17:52:37

オリジナル

2395 人が閲覧しました

2014-6-25

今日 jQuery マニュアルを読んだところ、jQuery のイベントオブジェクトモジュールにも currentTarget があり、常にこれを指していることがわかりました。

結論は次のとおりです。ネイティブの currentTarget と jQuery の currentTarget は完全に異なります。さまざまな治療に焦点を当てる必要があります。

2014-6-17

target と currentTarget の違いは何ですか?

わかりやすい:

たとえば、現在 A と B があり、

A.addChild(B)

A はマウスクリックイベントをリッスンします

次に、B がクリックされると、ターゲットは B と currentTarget になります。は A

つまり、currentTarget は常にイベントリスナーであり、target はイベントの実際の送信者です

概要:

target はイベントフローのターゲットステージにあり、currentTarget はキャプチャ、ターゲット、およびバブリングにあります。イベントフローの各段階。イベントフローがターゲットステージにある場合のみ、2 つの方向が同じになります。キャプチャステージとバブリングステージにある場合、ターゲットはクリックされたオブジェクトを指し、currentTarget は現在のイベントアクティビティのオブジェクト (通常は親）クラス）。

結論: IEブラウザと互換性がある必要があるため、イベントは通常バブリング段階で処理されます。このとき、ターゲットとcurrentTargetが異なる場合があります。

まず

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

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

ログイン後にコピー

IE7-8では$(target).zIndex();を使用します。IE7-8では$(e.currentTarget).zIndex();を使用します。わかりました、おそらく IE には target も currentTarget もありません

テストしてください (もちろん 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>

ログイン後にコピー

2 番目の場所:

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

ログイン後にコピー

$(arguments[2].currentTarget).zIndex() を使用します;

予想される結論を取得することもできます。後者は jquery を使用してイベントをバインドし、jQuery は内部的に currentTarget が現在の要素を表すことを許可します。 FF/Chrome の target および IE の srcElement と同様です。

インターネットの例:

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

ログイン後にコピー

オブジェクト this、currentTarget および target

イベント処理
プログラムでは、オブジェクト this は常に currentTarget の値と等しくなりますが、target には実際のターゲットのみが含まれますイベントの様子。イベントハンドラーがターゲット要素に直接割り当てられている場合、this、currentTarget、および target には同じ値が含まれます。次の例を見てください:

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

ログイン後にコピー

この例では、currentTarget、target、および this の値を検出します。クリックイベントの対象はボタンなので、これら3つの値は一度に等しくなります。イベントハンドラーがボタンの親ノードに存在する場合、これらの値は同じではありません。以下の例をもう一度見てください:

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

ログイン後にコピー

この例のボタンがクリックされると、イベントハンドラーがこの要素に登録されているため、this と currentTarget の両方が document.body と等しくなります。ただし、ターゲット要素はボタン要素と同等であり、それがクリックイベントの実際のターゲットであると考えられます。ボタンにはイベントハンドラーが登録されていないため、クリックイベントは document.body にバブルアップされ、そこでイベントが処理されます。

1 つの関数を通じて複数のイベントを処理する必要がある場合は、type 属性を使用できます。例:

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;

ログイン後にコピー

以上がtarget と currentTarget の違いの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。