- JavaScript Event
- JavaScript 利用 Event 與網頁中的 Html 元件進行互動
- 如：滑鼠點選網頁的元件時就會觸發 click Event
- 使用程式碼註冊接聽這個事件
- 事件處理常式 Event Hander
- 事漸接聽程式 Event Listener
- 事件根據其傳播方式 (Event Flow) 分為兩種：
- Event Capturing 事件由外而內傳遞
- Event Bubbling 事件由內而外傳遞
- DOM Level 2 定義 Event 傳播順序，分為三階段
- Event Capture Phare
- Target Phare：可視為 Event Bubbling Phare
- Event Bubbling Phare
<html>
<head>
<meta charset="utf-8">
<title>The HTML5 Herald< /title>
</head>
<body>
<div>
</div>
<script>
document.querySelector('div').addEventListener('click',
function() {
console.log('div')
}, true);
document.querySelector('body').addEventListener('click',
function() {
console.log('body')
}, true);
document.querySelector('html').addEventListener('click',
function() {
console.log('html')
}, true);
document.addEventListener('click',
function() {
console.log('document')
}, true);
window.addEventListener('click',
function() {
console.log('window')
}, true);
</script>
</body>
</html>
- addEventListener
- true：Capture
- false：Bubble (default)
- DOM Level 2
- Event 方法常用的包含
- preventDefault：取消事件預設行為
- stopPropagation：取消 Event Capturing / Bubbling 事件
- stopImmediatePropagation：取消 Event Capturing / Bubbling 事件，後註冊的不會發生 Event
<html>
<head>
<meta charset="utf-8">
<title>The HTML5 Herald< /title>
</head>
<body>
<div id="divEvent">
<a id="linkGoogle" href="https://www.google.com.tw/">Go to Google</a>
</div>
<script>
document.getElementById('linkGoogle').addEventListener('click', linkHandler1);
document.getElementById('linkGoogle').addEventListener('click', linkHandler2);
document.getElementById('divEvent').addEventListener('click', divHandler);
function linkHandler1(event) {
// 取消事件預設行為, 將不會進行導頁 href="https://www.google.com.tw/" 失效
event.preventDefault();
// 取消 Event Capturing / Bubbling 事件
// divEvent 將不會收到 Bubbling 事件
// 但 linkHandler2 一樣會有 事件
// event.stopPropagation();
event.stopImmediatePropagation();
console.log('linkHandler1');
}
function linkHandler2(event) {
event.preventDefault();
console.log('linkHandler2');
}
function divHandler(event) {
event.preventDefault();
console.log('divHandler');
}
</script>
</body>
</html>
- 上方程式使用 event.preventDefault(); 與 event.stopImmediatePropagation(); ，因此只會有 linkHandler1 有反應
沒有留言:
張貼留言