LiuLyndon Look For: [JavaScript] Registered Event

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>

CASE 1

document.getElementById('BtnDOMLevel11').addEventListener('click', function() {
    console.log(this);
});

CASE 2

document.getElementById('BtnDOMLevel12').addEventListener('click', function(event) {
    console.log(event);
    console.log(event.target.value);
    console.log(event.currentTarget);
});

CASE 3

document.getElementById('BtnDOMLevel13').addEventListener('click', function() {
    console.log('Action 0');
});

document.getElementById('BtnDOMLevel13').addEventListener('click', function() {
    console.log('Action 1');
});

恆逸 - U2750c

LiuLyndon Look For

2017年8月30日星期三

[JavaScript] Registered Event

沒有留言:

張貼留言

2017年8月30日 星期三

[JavaScript] Registered Event

沒有留言:

張貼留言

2017年8月30日星期三