jq thisとe.targetの違いについて

4473 ワード

jQuery jQueryイベント

イベント関数を記述する際にeventパラメータを入力ことができ、evenパラメータはevenのようなtarget属性を使用することができる.targetは、イベントを返すターゲットノード(イベントをトリガーするノード)を指すために呼び出されます.これはthisとは異なります.jsではイベント属性がバブルするので、この場合、thisを選択すると、常に現在トリガーされているイベントを指し、even.targetは、イベントをトリガーするノードのみを指す.
例:


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>e.targettitle>
    <script src="jquery-3.2.1.js">script>
head>
<body>
<div id="temp">div>
<ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">
    <li>   
        <ul>
            <li>      1li>
            <li>      2li>
            <li>      3li>
            <li>      4li>
        ul>
    li>
ul>
<script>
    $(function(){
        $("li").on("click",function(e){
            alert('e.target'+e.target.innerText);
            alert('this'+this.innerText);
            $("#temp").html("clicked: " + e.target.nodeName);
            $(this).css("color","#FF3300");
            $(e.target).css("color",'blu');
        })
    });
script>
body>
html>

上記の例では、バインドされたイベントは、「公告タイトル」のliをクリックすると、自分のclickイベントがトリガーされ、その後、イベントのバブルによって親要素によってバインドされたclickイベントがトリガーされるバブルイベントであることがわかります.したがって、このときポップアップされるウィンドウは4回あり、2回ごとに子要素と親要素を表すグループであり、e.targetはイベントをトリガーするノードを指しているが、thisはイベントの泡が立つにつれて変化している.
注意:thisとe.targetはJavaScriptオブジェクト、(this)と(t h i s)と(e.target)はjQueryオブジェクトです

jsイベントのバブルとデフォルトの動作

angularjs浅尝1