繼續進行事件篇,今日介紹氣泡與捕捉,以及中止或取消的部分
element.addEventListener('event' , functionName , BooLean);
的第 3 個參數
false
:由指定元素(內)往外擴散,所以稱為「事件氣泡( Event Bubbling )」,就像從 li > ul > body
true
:由最外面往內至指定元素,所以稱為「事件捕捉( Event Capturing )」,就像從 body > ul > li
index.html
<body id="body">
<ul>
<li><input type="button" value="按我" class="btn"></li>
<li><a href="https://www.google.com/" class="link">點我連結到Google</a></li>
<li></li>
</ul>
<script src="JS/test.js"></script>
</body>
test.js
var el1 = document.querySelector(".btn");
function click1(){
console.log("我是內");
}
var el2 = document.querySelector("#body");
function click2(){
console.log("我是外");
}
el1.addEventListener('click' , click1 , false);
el2.addEventListener('click' , click2 , false);
// 當2者為 false
// 氣泡,從內至外
// 顯示順序如下
// 我是內
// 我是外
el1.addEventListener('click' , click1 , true);
el2.addEventListener('click' , click2 , true);
// 當2者為 true
// 捕捉,從外至內
// 顯示順序如下
// 我是外
// 我是內
event.stopPropagation()
var el1 = document.querySelector(".btn");
function click1(e){
console.log("我是內");
e.stopPropagation(); // 中止
}
el1.addEventListener('click' , click1 , false);
var el2 = document.querySelector("#body");
function click2(){
console.log("我是外");
}
el2.addEventListener('click' , click2 , false);
// 僅顯示指定元件,後續的並未執行
// 我是內
event.preventDefault()
link
或 submit
var el3 = document.querySelector('.link');
function link(e){
console.log("取消預設連結動作");
e.preventDefault(); // 取消
}
el3.addEventListener('click' , link , false);
// 點擊後顯示 取消預設連結動作
// 並未連結至 google 頁面
function
的內容直接寫進去?// function 內容寫在裡面
// 中止
var el1 = document.querySelector(".btn");
el1.addEventListener('click' , function(e){
console.log("我是內");
e.stopPropagation(); // 中止
} , false);
// function 內容寫在裡面
// 取消
var el3 = document.querySelector('.link');
el3.addEventListener('click' , function(e){
console.log("取消預設連結動作");
e.preventDefault(); // 取消
}, false);
持續進行事件篇,感覺很慢