- Registered Event (事件註冊)，大致分為如下：
- 使用 attribute
- DOM Level 0 事件註冊語法
- DOM Level 2 事件註冊語法
- Event 變數
- 事件處理常式會包含一個區域變數，稱 Event
- 透過此變數可取得 Event 物件，此物件包含事件發生時相關資訊
- attribute 事件註冊
- button 利用 onclick 註冊事件，當 click 事件發生時，將執行 attribute 的指定程式碼
- Html Code
<html>
<head>
<title>The HTML5 Herald</head>
<body>
<input name="BtnAttribute1" type="button" value="BtnAttribute1" onclick="myfunction1(this);" />
<input name="BtnAttribute2" type="button" value="BtnAttribute2" onclick="myfunction2(event);" />
<input name="BtnAttribute3" type="button" value="BtnAttribute3" onclick="myfunction3();" />
<script src="Attribute.js">
</body>
</html>
- CASE 1
- function 傳入 this，可成功抓取此物件
function myfunction1(self) {
console.log(self);
}
- CASE 2
- function 傳入 event，可成功抓取 event 事件並且可知到那個物件觸發
function myfunction2(event) {
console.log(event);
console.log(event.target.value);
}
- CASE 3
- function 沒傳入任何參數，在 function 使用 this，需注意此 this 指向 window
function myfunction3() {
console.log(this);
}
- CASE 4
- onclick 裡面可以放入許多的 function 執行，但可見標籤與程式相依性高，缺少程式就會發生錯誤
<input type="button" name="BtnAttribute4" value="BtnAttribute4" onclick="myfunction4();" />
- DOM Level 0 事件註冊語法
- 先找尋要註冊事件的 HTML 項目或物件，接著指派物件事件處理的常式屬性 (Event Handler Property)
- Html Code
<html>
<html>
<head>
<meta charset="utf-8">
<title>The HTML5 Herald< /title>
</head>
<body>
<input type="button" name="BtnDOMLevel01" id="BtnDOMLevel01" value="BtnDOMLevel01" />
<input type="button" name="BtnDOMLevel02" id="BtnDOMLevel02" value="BtnDOMLevel02" />
<input type="button" name="BtnDOMLevel03" id="BtnDOMLevel03" value="BtnDOMLevel03" />
<script src="DOMLevel0.js">< /script>
</body>
</html>
- CASE 1
- function 使用 this，可成功抓取此物件
document.getElementById('BtnDOMLevel01').onclick = function() {
console.log(this);
}
- CASE 2
- function 傳入 event，可成功抓取 event 事件並且可知到那個物件觸發
document.getElementById('BtnDOMLevel02').onclick = function(event) {
console.log(event);
console.log(event.target.value);
}
- CASE 3
- 物件需要執行兩個不同的事件註冊，發現只會執行一個(後面蓋掉前面)，此解決方法需要使用 closure
document.getElementById('BtnDOMLevel03').onclick = function() {
console.log('Action 0');
}
document.getElementById('BtnDOMLevel03').onclick = function() {
console.log('Action 1');
}
- DOM Level 2 事件註冊語法
- 定義兩個方法
- addEventListener：註冊事件
- removeEventListener：移除事件
- 第一個參數為事件名稱
- 第二個參數為事件處理常式
- 第三個參數為指明事件在 Event Capture (true) 或 Event Bubbling (false) 階段觸發
- Html Code
<html>
<head>
<meta charset="utf-8">
<title>The HTML5 Herald< /title>
</head>
<body>
<input type="button" name="BtnDOMLevel11" id="BtnDOMLevel11" value="BtnDOMLevel11" />
<input type="button" name="BtnDOMLevel12" id="BtnDOMLevel12" value="BtnDOMLevel12" />
<input type="button" name="BtnDOMLevel13" id="BtnDOMLevel13" value="BtnDOMLevel13" />
<script src="DOMLevel2.js">< /script>
</body>
</html>
document.getElementById('BtnDOMLevel11').addEventListener('click', function() {
console.log(this);
});
document.getElementById('BtnDOMLevel12').addEventListener('click', function(event) {
console.log(event);
console.log(event.target.value);
console.log(event.currentTarget);
});
document.getElementById('BtnDOMLevel13').addEventListener('click', function() {
console.log('Action 0');
});
document.getElementById('BtnDOMLevel13').addEventListener('click', function() {
console.log('Action 1');
});
