使用DOM級別0事件處理程序
先看一個簡單的例子
<div id="div1">
<a >百度</a><br>
<input type="text" placeholder="請輸入文本" id="input1">
<input type="button" value="提交" id="input2" onclick="test()">
</div>
<script >
function test() {
var textnode=document.getElementById('input1');
if(textnode.value===''){
alert('請輸入信息')
}
else {
alert('您輸入的信息是'+textnode.value);
}
}
</script>
- 該例是點擊按鈕之后查看表單內數據是否完整，主要作法為在在標簽內添加事件處理程序名，以及調用函數，也可將其調用寫入js代碼中如
textnode.onclik=function(){},此時該注意的是其DOM節點一定要調用正確 - 然而該方法的漏洞在于若對同一個事件添加倆個相同的事件處理程序后面的一個會覆蓋前面的一個，且若多標簽嵌套，其無法設置冒泡階段還是捕捉階段，因此我們常用下面這種方法
事件監聽addEventListener(DOM級別2事件)
| 函數名 | 參數1 | 參數2 | 參數3 |
|---|---|---|---|
| addEventListener | "event_type" | function_name | true or false |
| 該參數為事件名 | 該參數為調用函數名 | true為捕捉階段，false為冒泡階段（更為常用） |
- 刪除事件
| 函數名 | 參數1 | 參數2 | 參數3 |
|---|---|---|---|
| removeEventListener | "event_type" | function_name | true or false |
| 該參數為事件名 | 該參數為調用函數名 | true為捕捉階段，false為冒泡階段（更為常用） |
<b>值得注意的是第一個參數是事件名，而不是事件處理程序名，第二個參數最好使用單獨函數，以便刪除時調用，否則該監聽器無法被刪除，含有就是捕捉階段指事件發生時順序為組件由外到內，而冒泡階段正好相反</b>
-
下面是一個例子
<div id="div1"> <!--<a >百度</a><br>--> <input type="text" id="input0"><br> <input type="text" placeholder="請輸入文本" id="input1"> </div> <script > var textnode=document.getElementById('input1'); function getfocus() { alert("獲得焦點"); textnode.removeEventListener("focus",getfocus,false); } textnode.addEventListener("focus",getfocus,false); </script>
event對象
- 但事件發生時，瀏覽器將自動創建event對象，該信息可以被腳本使用，幫助執行必要的操作，例如某個鍵被按下的信息就存儲在該對象中
主要屬性如下
<a >event屬性</a>
下面為兩個示例
<div id="div1">
<a id="link">百度</a>
</div>
<script >
var linknode=document.getElementById('link');
linknode.addEventListener("click",test,false)
function test() {
event.preventDefault();
alert('阻止超鏈接跳轉');
}
</script>
<div id="div1">
<input type="text" id="input1">
</div>
<script >
var linknode=document.getElementById('input1');
linknode.addEventListener("keyup",test,false)
function test() {
alert('您所按鍵的鍵碼是：'+event.keyCode);
}
</script>
2017/6/1
02:13
