Day22 - 事件(03) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 22

自我挑戰組

JavaScript 新手筆記系列第 22 篇

Day22 - 事件(03)

11th鐵人賽 javascript

hokou

2019-10-07 23:31:33

1253 瀏覽

分享至

前言

今天說明如何知道事件目前是作用在哪個元件上，以及如何優化事件監聽

事件在哪發生

事件的目標元件：e.target
- 讓我們知道目前是作用在哪裡
- 搭配 .nodeName 找到節點名稱
- 利用 if 去做一些條件判斷

index.html

<body class="body">
    <ul class="list">
        <li><a href="#1" class="link">123</a></li>
        <li><a href="#2" class="link">456</a></li>
        <li></li>
    </ul>
    <script src="JS/test.js"></script>
</body>

test.js

var el = document.querySelector(".body");

el.addEventListener('click' , function(e){
    console.log(e.target);
    console.log(e.target.nodeName);
},false);

實際點選可以發現你可能點到 a 連結，也可能是 li 或是 ul
- 會發現它的結果似乎跟自己預期的可能會有點小落差
我要寫判斷式，但是不知道 nodeName 的名字？
- 我也不知道，但可以藉由 console.log(e.target.nodeName); 先去查後再代進去判斷

事件監聽優化

依照事件監聽預設為事件氣泡，由小至大，那以下面例子來說不就要每個 li 都要設定？
- 當數量一多就會影響效能，也可能會因為疏忽而遺漏設定
- 因此會設在它的上層，也就是父元件那邊
- 搭配前面的 e.target.nodeName 和 if 去挑選出是指定的元件才動作

index.html

<body class="body">
    <div>
        <ul class="list">
            <li><a href="#1" class="link">我是li-1</a></li>
            <li><b>我是li-2</b></a></li>
            <li><a href="#2" class="link">我是li-3</a></li>
            <li>我是li-4</li>
            <li></li>
        </ul>
    </div>
    <script src="JS/test.js"></script>
</body>

test.js

var el1 = document.querySelector(".list");

el1.addEventListener('click' , checkli , false);

function checkli(e){
    // console.log(e.target);
    if (e.target.nodeName !== "LI"){
        return
    };
    // 假如 nodeName 不是 "LI"，則跳出
    // 換句話說 nodeName 是 "LI" 才會執行後續
    // 也就是印出點選的內容
    // 因為單純 return ，因此可以一行如下
    // if (e.target.nodeName !== "li"){return};

    // 因為 選到"LI"，因此會印出名稱
    console.log(e.target.textContent);
};
    // 如果為粗體或是連結，會發現要點到最前面那個點才會印出
    // 不然會被判為 b 或 a
    // 因此只有 li4 可以點文字的就可以印出