event(1)
event
event（事件流）是 window對象的一個屬性
在JS中事件有2種類型 一種是冒泡類型 一種是捕獲類型
冒泡類型最先是在IE中出現，而捕獲類型最先在標準的DOM中出現，不過最終IE得勝 從而在標準的DOM中有捕獲和冒泡兩種
冒泡的順序是從下到上p>div>body>document，捕獲恰恰相反
事件監聽的方法
事件監聽的方法分為兩種，傳統事件監聽和非傳統事件監聽
傳統的事件監聽如下
1. <div οnclick=test1()>111</div>
<script>
function test1(){
alert("11")
}
</script>
2.<div id ="div1">222</div>
<script>
document.getelementById("div1")
div1.οnclick=function(){
alert("222")
}
</script>
非傳統的事件監聽 非傳統事件也分為2種，一種是IE事件監聽，一種是標準的DOM事件監聽
IE事件監聽
在IE事件監聽中有2個函數，一個是添加事件處理函數，一個時刪除事件處理函數
[obj].attachEvent('event_style',event_name);//添加事件處理函數
[obj].detachEvent('event_style',event_name);//刪除事件處理函數
<body>
<div id="div1">IE事件監聽</div>
<script>
window.οnlοad=function(){//頁面加載
var div1=document.getelementById("div1");//得到對象
div1.attachEvent('onclick',test1)//添加IE事件函數
}
function test1(){
//調用添加的事件函數
alert("333")//打印測試
div1.detachEvent('onclick',test1)//刪除這個事件處理函數
}
</script>
</body>
標準的DOM事件監聽
在標準的DOM事件監聽中也有2個函數，一個是添加事件處理函數，一個是刪除事件處理函數，這兩個函數和IE的不行同，而且參數也不相同，有3個參數，第一個參數是事件類型，第二個參數是函數名，第三個參數有兩個值，true值代表是捕獲事件，false是冒泡事件，例子如下
[obj].addEventListener("event_style",event_name,event_modle)//添加事件處理函數
[obj].removeEventListener("event_style",event_name,event_modle)//刪除事件處理函數
<body>
<div id="div2">444</div>
</body>
<script>
window.οnlοad=function(){
var div2=document.getelementById("div2");
div2.addEventListener("click",test2,false)
//在添加事件函數這行代碼，大家可能發現和IE有所不同，不同點2點，第一點就是事件類型和IE不同，缺少了'on'這單詞，不過大家不要驚訝，這本身就是存在的，所有大家在使用的時候一定要切記，onmouseover變成mouseover等等，還有第三個參數代表，事件模型，在這里是冒泡類型，因此用false
}
</script>
function test2(){
alert("444");
div2.removeEventListener('click',test2,false)
//刪除這個事件處理函數
}
到底我們何時用傳統事件何時用非傳統事件呢？
大家可能體會到，傳統的事件只能處理一個對象，而如果我們要處理多個時呢，用非傳統的話，這樣大大的會提高我們代碼的可閱讀性，在非傳統的事件處理函數中，可以存在多個事件函數
window.οnlοad=function(){
var div1=document.getelementById("div1");
var div2=document.getelementById("div2");
div2.addEventListener("click",test2,false)
div1.addEventListener("click",test1,false)
//從上面的代碼看，是不是我們的代碼可閱讀性提高了不少呢？
}
?
轉載于:https://www.cnblogs.com/limit1/p/4012275.html
總結
- 上一篇： div 按 id 刷新 需要jquery
- 下一篇： 字符串的最大最小表示法 模板