今天說明如何知道事件目前是作用在哪個元件上,以及如何優化事件監聽
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 可以點文字的就可以印出
nodeName
是大寫(找 bug 找了一陣子才發現)console.log
檢查結果是否與預期相同把事件做個結束,來優化 BMI 吧!