iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
0
自我挑戰組

JavaScript 新手筆記系列 第 22

Day22 - 事件(03)

  • 分享至 

  • xImage
  •  

前言

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

事件在哪發生

  • 事件的目標元件: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.nodeNameif 去挑選出是指定的元件才動作

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 可以點文字的就可以印出
  • 在函數裡面判斷是否為需求的元件,是的話才執行後續條件,否則跳出
    • 要注意 nodeName 是大寫(找 bug 找了一陣子才發現)
    • console.log 檢查結果是否與預期相同

次回

把事件做個結束,來優化 BMI 吧!


上一篇
Day21 - 事件(02)
下一篇
Day23 - 事件(04) - BMI
系列文
JavaScript 新手筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言