javaScript基礎事件

時間  2021-01-21
欄目 JavaScript 简体版
原文   原文鏈接

javaScript事件（一）事件流

一、事件

事件是文檔或者瀏覽器窗口中發生的，特定的交互瞬間。

事件是用戶或瀏覽器自身執行的某種動作，如click,load和mouseover都是事件的名字。

事件是javaScript和DOM之間交互的橋樑。

你若觸發，我便執行——事件發生，調用它的處理函數執行相應的JavaScript代碼給出響應。

典型的例子有：頁面加載完畢觸發load事件；用戶單擊元素，觸發click事件。

二、事件流

事件流描述的是從頁面中接收事件的順序。

1、事件流感性認識

問題：單擊頁面元素，什麼樣的元素能感應到這樣一個事件？

答案：單擊元素的同時，也單擊了元素的容器元素，甚至整個頁面。

例子：有三個同心圓， 給每個圓添加對應的事件處理函數，彈出對應的文字。單擊最裏面的圓，同時也單擊了外面的圓，所以外面圓的click事件也會被觸發。

複製代碼 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    #outer{
        position: absolute;
        width: 400px;
        height: 400px;
        top:0;
        left: 0;
        bottom:0;
        right: 0;
        margin: auto;
        background-color: deeppink;
    }
    #middle{
        position: absolute;
        width: 300px;
        height:300px;
        top:50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -150px;
        background-color: deepskyblue;
    }
    #inner{
        position: absolute;
        width: 100px;
        height:100px;
        top:50%;
        left:50%;
        margin-left: -50px;
        margin-top: -50px;;
        background-color: darkgreen;
        text-align: center;
        line-height: 100px;
        color:white;
    }
    #outer,#middle,#inner{
border-radius:100%;
    }
</style>
<body>
<div id="outer">
   <div id="middle">
        <div id="inner">
            click me!
        </div>
    </div>
</div>
<script>
       var innerCircle= document.getElementById("inner");
        innerCircle.onclick= function () {
            alert("innerCircle");
        };
        var middleCircle= document.getElementById("middle");
        middleCircle.onclick=function(){
            alert("middleCircle");
        }
        var outerCircle= document.getElementById("outer");
        outerCircle.onclick= function () {
            alert("outerCircle");
        }
</script>
</body>
</html>
複製代碼

 效果如下：

  

2、事件流

事件發生時會在元素節點與根節點之間按照特定的順序傳播，路徑所經過的所有節點都會收到該事件，這個傳播過程即DOM事件流。

1、兩種事件流模型

事件傳播的順序對應瀏覽器的兩種事件流模型：捕獲型事件流和冒泡型事件流。

冒泡型事件流：事件的傳播是從最特定的事件目標到最不特定的事件目標。即從DOM樹的葉子到根。【推薦】

捕獲型事件流：事件的傳播是從最不特定的事件目標到最特定的事件目標。即從DOM樹的根到葉子。

事件捕獲的思想就是不太具體的節點應該更早接收到事件，而最具體的節點最後接收到事件。

複製代碼 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="myDiv">Click me!</div>
</body>
</html>
複製代碼

上面這段html代碼中，單擊了頁面中的<div>元素，

在冒泡型事件流中click事件傳播順序爲<div>—》<body>—》<html>—》document

在捕獲型事件流中click事件傳播順序爲document—》<html>—》<body>—》<div>

 

note:

1）、所有現代瀏覽器都支持事件冒泡，但在具體實現中略有差別：

IE5.5及更早版本中事件冒泡會跳過<html>元素(從body直接跳到document)。

IE9、Firefox、Chrome、和Safari則將事件一直冒泡到window對象。

2）、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕獲。儘管DOM標準要求事件應該從document對象開始傳播，但這些瀏覽器都是從window對象開始捕獲事件的。

3）、由於老版本瀏覽器不支持，很少有人使用事件捕獲。建議使用事件冒泡。

2、DOM事件流

DOM標準採用捕獲+冒泡。兩種事件流都會觸發DOM的所有對象，從document對象開始，也在document對象結束。

DOM標準規定事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。

  • 事件捕獲階段：實際目標（<div>）在捕獲階段不會接收事件。也就是在捕獲階段，事件從document到<html>再到<body>就停止了。上圖中爲1~3.
  • 處於目標階段：事件在<div>上發生並處理。但是事件處理會被看成是冒泡階段的一部分。
  • 冒泡階段：事件又傳播迴文檔。

note:

1）、儘管「DOM2級事件」標準規範明確規定事件捕獲階段不會涉及事件目標，但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都會在捕獲階段觸發事件對象上的事件。結果，就是有兩次機會在目標對象上面操作事件。

2）、並非所有的事件都會經過冒泡階段 。所有的事件都要經過捕獲階段和處於目標階段，但是有些事件會跳過冒泡階段：如，獲得輸入焦點的focus事件和失去輸入焦點的blur事件。

兩次機會在目標對象上面操作事件例子：

 
複製代碼 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    #outer{
        position: absolute;
        width: 400px;
        height: 400px;
        top:0;
        left: 0;
        bottom:0;
        right: 0;
        margin: auto;
        background-color: deeppink;
    }
    #middle{
        position: absolute;
        width: 300px;
        height:300px;
        top:50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -150px;
        background-color: deepskyblue;
    }
    #inner{
        position: absolute;
        width: 100px;
        height:100px;
        top:50%;
        left:50%;
        margin-left: -50px;
        margin-top: -50px;;
        background-color: darkgreen;
        text-align: center;
        line-height: 100px;
        color:white;
    }
    #outer,#middle,#inner{
border-radius:100%;
    }
</style>
<body>
<div id="outer">
   <div id="middle">
        <div id="inner">
            click me!
        </div>
    </div>
</div>
<script>
       var innerCircle= document.getElementById("inner");
        innerCircle.onclick= function () {
            alert("innerCircle");
        };
        var middleCircle= document.getElementById("middle");
        middleCircle.onclick=function(){
            alert("middleCircle");
        }
        var outerCircle= document.getElementById("outer");
        outerCircle.onclick= function () {
            alert("outerCircle");
        }
</script>
</body>
</html>

運行效果就是會陸續彈出6個框，爲說明原理我整合成了一個圖：

3、事件流的典型應用事件代理

傳統的事件處理中，需要爲每個元素添加事件處理器。js事件代理則是一種簡單有效的技巧，通過它可以把事件處理器添加到一個父級元素上，從而避免把事件處理器添加到多個子級元素上。

1、事件代理

事件代理的原理用到的就是事件冒泡和目標元素，把事件處理器添加到父元素，等待子元素事件冒泡，並且父元素能夠通過target（IE爲srcElement）判斷是哪個子元素，從而做相應處理。關於target更多內容請參考javaScript事件（四）event的公共成員（屬性和方法） 下面舉例來說明。

傳統事件處理，爲每個元素添加事件處理器，代碼如下：

複製代碼 
<body>
<ul id="color-list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>indigo</li>
<li>purple</li>
</ul>
<script>
(function(){
    var colorList=document.getElementById("color-list");
    var colors=colorList.getElementsByTagName("li");
    for(var i=0;i<colors.length;i++)
    {
        colors[i].addEventListener('click',showColor,false);
    };
    function showColor(e)
    {
        e=e||window.event;
        var targetElement=e.target||e.srcElement;
        alert(targetElement.innerHTML);
    }
})();
</script>
</body>
複製代碼

事件代理的處理方式，代碼如下：

複製代碼 
<body>
<ul id="color-list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>indigo</li>
<li>purple</li>
</ul>
<script>
(function(){
    var colorList=document.getElementById("color-list");
    colorList.addEventListener('click',showColor,false);
    function showColor(e)
    {
        e=e||window.event;
        var targetElement=e.target||e.srcElement;
        if(targetElement.nodeName.toLowerCase()==="li"){
        alert(targetElement.innerHTML);
        }
    }
})();
</script>
</body>
複製代碼

2、事件代理的好處

 總結一下事件代理的好處：

  • 將多個事件處理器減少到一個，因爲事件處理器要駐留內存，這樣就提高了性能。想象如果有一個100行的表格，對比傳統的爲每個單元格綁定事件處理器的方式和事件代理（即table上添加一個事件處理器），不難得出結論，事件代理確實避免了一些潛在的風險，提高了性能。
  • DOM更新無需重新綁定事件處理器，因爲事件代理對不同子元素可採用不同處理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件處理函數即可，不需要重新綁定處理器，不需要再次循環遍歷。

3、事件代理的問題：【update20170502】

代碼如下：事件代理同時綁定了li和span，當點擊span的時候，li和span都會冒泡。

複製代碼 
<li><span>li中的span的內容</span></li>

<script>
    $(document).on('click', 'li', function(e){
        alert('li li');
    });

    $(document).on('click', 'span', function(e){
        alert('li span');
    })
</script>
複製代碼

解決辦法：

方法一：span的事件處理程序中阻止冒泡

 $(document).on('click', 'span', function(e){
        alert('li span');
        e.stopPropagation();
    })

方法二：li的事件處理程序中檢測target元素

複製代碼 
 $(document).on('click', 'li', function (e) {
        if (e.target.nodeName == 'SPAN') {
            e.stopPropagation();
            return;
        }
        alert('li li');
    });
複製代碼

4、事件代理的一個有趣應用【update20170502】

點擊一個列表時，輸出對應的索引

複製代碼 
<script>
    var ul=document.querySelector('ul');
    var lis=ul.querySelectorAll('ul li');
    ul.addEventListener('click', function (e) {
        var target= e.target;
        if(target.nodeName.toUpperCase()==='LI'){
            alert([].indexOf.call(lis,target));
        }
    },false)
</script>
複製代碼

 

三、事件處理程序

前面提到，事件是用戶或瀏覽器自身執行的某種動作，如click,load和mouseover都是事件的名字。響應某個事件的函數就叫事件處理程序（也叫事件處理函數、事件句柄）。事件處理程序的名字以"on"開頭，因此click事件的事件處理程序就是onclick,load事件的事件處理程序就是onload。

爲事件指定事件處理程序的方法主要有3種。

1、html事件處理程序

事件直接加在html元素上。

首先，這種方法已經過時了。因爲動作(javascript代碼)和內容(html代碼)緊密耦合，修改時即要修改html也要修改js。但是寫個小demo的時候還是可以使用的。

這種方式也有兩種方法，都很簡單：

第一種：直接在html中定義事件處理程序及包含的動作。

<input type="button" value="click me!" onclick="alert('clicked!')"/>

第二種：html中定義事件處理程序，執行的動作則調用其他地方定義的腳本。

<input type="button" value="click me!" onclick="showMessage()"/>
<script>
function showMessage(){
    alert("clicked!");
}
</script>

note:

1）通過event變量可以直接訪問事件本身，比如onclick="alert(event.type)"會彈出click事件。

2）this值等於事件的目標元素，這裏目標元素是input。比如 onclick="alert(this.value)"可以得到input元素的value值。

2、DOM0級事件處理程序

把一個函數賦值給一個事件處理程序屬性。

這種方法簡單而且跨瀏覽器，但是隻能爲一個元素添加一個事件處理函數。

因爲這種方法爲元素添加多個事件處理函數，則後面的會覆蓋前面的。

添加事件處理程序：

複製代碼 
<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.onclick=function(){
        alert("clicked!");
    }
</script>
複製代碼

分析：

複製代碼 
/*
第一步：myBtn=document.getElementById("myBtn");取得btn對象
第二步：myBtn.onclick其實相當於給myBtn添加了一個onclick的屬性。
第三步：myBtn.onclick=function(){
    alert("clicked!");
}
把函數賦值給onclick事件處理程序屬性。
*/
複製代碼

刪除事件處理程序：

    myBtn.onclick=null;

3、DOM2級事件處理程序

DOM2級事件處理程序可以爲一個元素添加多個事件處理程序。其定義了兩個方法用於添加和刪除事件處理程序：addEventListener()和removeEventListener()。

所有的DOM節點都包含這2個方法。

這兩個方法都需要3個參數：事件名，事件處理函數，布爾值。

這個布爾值爲true,在捕獲階段處理事件，爲false，在冒泡階段處理事件，默認爲false。

添加事件處理程序：現在爲按鈕添加兩個事件處理函數，一個彈出「hello」,一個彈出「world」。

複製代碼 
<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.addEventListener("click",function(){
        alert("hello");
    },false);
    myBtn.addEventListener("click",function(){
        alert("world");
    },false);
</script>
複製代碼

刪除事件處理程序：通過addEventListener添加的事件處理程序必須通過removeEventListener刪除，且參數一致。

note:通過addEventListener添加的匿名函數將無法刪除。下面這段代碼將不起作用！

    myBtn.removeEventListener("click",function(){
        alert("world");
    },false);

看似該removeEventListener與上面的addEventListener參數一致，實則第二個參數中匿名函數是完全不同的。

所以爲了能刪除事件處理程序，代碼可以這樣寫：

複製代碼 
<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    var handler=function(){
        alert("hello");
    }
    myBtn.addEventListener("click",handler,false);
    myBtn.removeEventListener("click",handler,false);
</script>
複製代碼

四、IE事件處理程序

1、實際應用場景

IE8及以下瀏覽器不支持addEventListener，在實際開發中如果要兼容到IE8及以下瀏覽器。如果用原生的綁定事件，需要做兼容處理，可利用jquery的bind代替。

2、IE8事件綁定

IE8及以下版本瀏覽器實現了與DOM中類似的兩個方法：attachEvent()和detachEvent()。

這兩個方法都需要兩個參數：事件處理程序名稱和事件處理程序函數。由於IE8及更早版本只支持事件冒泡，所以通過attachEvent()添加的事件處理程序都會被添加到冒泡階段。注意是事件處理程序名稱而不是事件名稱，所以要加上on，是onclick而不是click。

note:

IE11只支持addEventListener！

IE9，IE10對attachEvent和addEventListener都支持！

TE8及以下版本只支持attachEvent！

可以拿下面代碼在IE各個版本瀏覽器中進行測試。

複製代碼 
<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    var handlerIE=function(){
        alert("helloIE");
    }
    var handlerDOM= function () {
        alert("helloDOM");
    }
    myBtn.addEventListener("click",handlerDOM,false);
    myBtn.attachEvent("onclick",handlerIE);
</script>
複製代碼

添加事件處理程序：現在爲按鈕添加兩個事件處理函數，一個彈出「hello」,一個彈出「world」。

複製代碼 
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.attachEvent("onclick",function(){
        alert("hello");
    });
    myBtn.attachEvent("onclick",function(){
        alert("world");
    });
</script>
複製代碼

note:這裏運行效果值得注意一下：

IE8以下瀏覽器中先彈出「world」，再彈出「hello」。和DOM中事件觸發順序相反。

IE9及以上瀏覽器先彈出「hello」，再彈出「world」。和DOM中事件觸發順序相同了。

可見IE瀏覽器慢慢也走上正軌了。。。

刪除事件處理程序:通過attachEvent添加的事件處理程序必須通過detachEvent方法刪除，且參數一致。

和DOM事件一樣，添加的匿名函數將無法刪除。

所以爲了能刪除事件處理程序，代碼可以這樣寫：

複製代碼 
<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    var handler= function () {
        alert("hello");
    }
    myBtn.attachEvent("onclick",handler);
    myBtn.detachEvent("onclick",handler);
</script>
複製代碼

note:IE事件處理程序中還有一個地方需要注意：作用域。

使用attachEvent()方法，事件處理程序會在全局作用域中運行，因此this等於window。

而dom2或dom0級的方法作用域都是在元素內部，this值爲目標元素。

下面例子會彈出true。

複製代碼 
<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.attachEvent("onclick",function(){
        alert(this===window);
    });
</script>
複製代碼

在編寫跨瀏覽器的代碼時，需牢記這點。

IE7\8檢測：

複製代碼 
 //判斷IE7\8 兼容性檢測
            var isIE=!!window.ActiveXObject;
            var isIE6=isIE&&!window.XMLHttpRequest;
            var isIE8=isIE&&!!document.documentMode;
            var isIE7=isIE&&!isIE6&&!isIE8;
             
            if(isIE8 || isIE7){
                li.attachEvent("onclick",function(){
                    _marker.openInfoWindow(_iw);
                })    
            }else{
                li.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
            }
複製代碼

五、事件對象

什麼是事件對象？在觸發DOM上的事件時都會產生一個對象。

1、認識事件對象

事件在瀏覽器中是以對象的形式存在的，即event。觸發一個事件，就會產生一個事件對象event，該對象包含着所有與事件有關的信息。包括導致事件的元素、事件的類型以及其他與特定事件相關的信息。

例如：鼠標操作產生的event中會包含鼠標位置的信息；鍵盤操作產生的event中會包含與按下的鍵有關的信息。

所有瀏覽器都支持event對象，但支持方式不同，在DOM中event對象必須作爲唯一的參數傳給事件處理函數，在IE中event是window對象的一個屬性。

2、html事件處理程序中event

<input id="btn" type="button" value="click" onclick=" console.log('html事件處理程序'+event.type)"/>

這樣會創建一個包含局部變量event的函數。可通過event直接訪問事件對象。

3、DOM中的事件對象

DOM0級和DOM2級事件處理程序都會把event作爲參數傳入。

根據習慣來：可以用e，或者ev或者event。

複製代碼 
<body>
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(event){
        console.log("DOM0 & click");
        console.log(event.type);    //click
    }
    btn.addEventListener("click", function (event) {
        console.log("DOM2 & click");
        console.log(event.type);    //click
    },false);
</script>
</body>
複製代碼

DOM中事件對象重要屬性和方法。總結：【update 20170313】

屬性：

  • type屬性，用於獲取事件類型
  • target屬性 用戶獲取事件目標 事件加在哪個元素上。（更具體target.nodeName）

方法：

  • stopPropagation()方法 用於阻止事件冒泡
  • preventDefault()方法 阻止事件的默認行爲 移動端用的多

4、IE中的事件對象

第一種情況： 通過DOM0級方法添加事件處理程序時，event對象作爲window對象的一個屬性存在。

複製代碼 
<body>
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.onclick= function () {
        var event=window.event;
       console.log(event.type); //click
    }
</script>
</body>
複製代碼

第二種情況：通過attachEvent()添加的事件處理程序，event對象作爲參數傳入。

複製代碼 
<body>
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.attachEvent("onclick", function (type) {
        console.log(event.type);    //click
    })
</script>
</body>
複製代碼

 IE中事件對象重要屬性和方法。總結：【update 20170313】

屬性：

  • type屬性，用於獲取事件類型(一樣)
  • srcElement屬性 用戶獲取事件目標 事件加在哪個元素上。（更具體target.nodeName）
//兼容性處理
function showMsg(event){
    event=event||window.event;  //IE8以前必須是通過window獲取event，DOM中就是個簡單的傳參
    var ele=event.target || event.srcElement; //獲取目標元素，DOM中用target,IE中用srcElement
    alert(ele);
 }
  • cancelBubble屬性 用於阻止事件冒泡 IE中cancelBubble爲屬性而不是方法，true表示阻止冒泡。
  • returnValue屬性 阻止事件的默認行爲 false表示阻止事件的默認行爲

 

但是我有兩個地方不懂。

1、通過DOM0級方法添加的事件處理程序中同樣可以傳入一個event參數，它的type和window.event.type一樣，但是傳入的event參數卻和window.event不一樣，爲什麼？

    btn.onclick= function (event) {
        var event1=window.event;
        console.log('event1.type='+event1.type);  //event1.type=click
        console.log('event.type='+event.type);    //event.type=click
        console.log('event1==event?'+(event==event1));  //event1==event?false
    }

2、通過attachEvent添加的事件處理程序中傳入的event和window.event是不一樣的，爲什麼？

複製代碼 
<body>
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.attachEvent("onclick", function (type) {
        console.log(event.type);    //click
        console.log("event==window.event?"+(event==window.event)); //event==window.event?false
    })
</script>
</body>
複製代碼

六、事件對象的公共成員

1、DOM中的event的公共成員

event對象包含與創建它的特定事件有關的屬性和方法。觸發的事件類型不一樣，可用的屬性和方法不一樣。但是，DOM中所有事件都有以下公共成員。【注意bubbles屬性和cancelable屬性】

屬性/方法 類型 讀/寫 說明
bubbles Boolean 只讀    表明事件是否冒泡
stopPropagation() Function 只讀 取消事件的進一步捕獲或冒泡。如果bubbles爲true,則可以使用這個方法
stopImmediatePropagation()　 Function 只讀 取消事件的進一步捕獲或冒泡，同時阻止任何事件處理程序被調用（DOM3級事件中新增）
cancelable Boolean 只讀 表明是否可以取消事件的默認行爲
preventDefault() Function 只讀 取消事件的默認行爲。如果cancelable是true，則可以使用這個方法
defaultPrevented Boolean 只讀 爲true表示已經調用了preventDefault()(DOM3級事件中新增)
currentTarget Element 只讀 其事件處理程序當前正在處理事件的那個元素（currentTarget始終===this,即處理事件的元素）
target Element 只讀 直接事件目標，真正觸發事件的目標
detail Integer 只讀 與事件相關的細節信息
eventPhase Integer 只讀 調用事件處理程序的階段：1表示捕獲階段，2表示處於目標階段，3表示冒泡階段
trusted Boolean 只讀 爲true表示事件是由瀏覽器生成的。爲false表示事件是由開發人員通過JavaScript創建的（DOM3級事件中新增）
type String 只讀 被觸發的事件的類型
view AbstractView 只讀 與事件關聯的抽象視圖。等同於發生事件的window對象

1、對比currentTarget和target

在事件處理程序內部，對象this始終等於currentTarget的值，而target則只是包含事件的實際目標。

舉例：頁面有個按鈕，在body（按鈕的父節點）中註冊click事件，點按鈕時click事件會冒泡到body進行處理。

複製代碼 
<body>
<input id="btn" type="button" value="click"/>
<script>
    document.body.onclick=function(event){
        console.log("body中註冊的click事件");
        console.log("this===event.currentTarget? "+(this===event.currentTarget)); //true
        console.log("currentTarget===document.body?"+(event.currentTarget===document.body)); //true
        console.log('event.target===document.getElementById("btn")? '+(event.target===document.getElementById("btn"))); //true
    }
</script>
</body>
複製代碼

運行結果爲：

2、通過type屬性，可以在一個函數中處理多個事件。

原理：通過檢測event.type屬性，對不同事件進行不同處理。

舉例：定義一個handler函數用來處理3種事件：click,mouseover,mouseout。

複製代碼 
<body>
<input id="btn" type="button" value="click"/>
<script>
var handler=function(event){
    switch (event.type){
        case "click":
            alert("clicked");
            break;
        case "mouseover":
            event.target.style.backgroundColor="pink";
            break;
        case "mouseout":
            event.target.style.backgroundColor="";
    }
};
    var btn=document.getElementById("btn");
    btn.onclick=handler;
    btn.onmouseover=handler;
    btn.onmouseout=handler;
</script>
</body>
複製代碼

運行效果：點擊按鈕，彈出框。鼠標經過按鈕，按鈕背景色變爲粉色；鼠標離開按鈕，背景色恢復默認。

3、stopPropagation()和stopImmediatePropagation()對比

同：stopPropagation()和 stopImmediatePropagation()都可以用來取消事件的進一步捕獲或冒泡。

異：二者的區別在於當一個事件有多個事件處理程序時，stopImmediatePropagation()可以阻止之後事件處理程序被調用。

舉例：

複製代碼 
<body>
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.addEventListener("click",function(event){
        console.log("buttn click listened once");
//    event.stopPropagation();//取消註釋查看效果
//    event.stopImmediatePropagation();//取消註釋查看效果
    },false);
    btn.addEventListener("click",function(){
        console.log("button click listened twice");
    },false);
    document.body.onclick= function (event) {
        console.log("body clicked");
    }
</script>
</body>
複製代碼

 

運行效果：

4、eventPhase

eventPhase值在捕獲階段爲1，處於目標階段爲2，冒泡階段爲3。

常量 值
Event.CAPTURING_PHASE 1
Event.AT_TARGET 2
Event.BUBBLING_PHASE 3

可以通過下面代碼查看：

var btn=document.getElementById("btn");
btn.onclick= function (event) {
console.log(event.CAPTURING_PHASE); //1
console.log(event.AT_TARGET); //2
console.log(event.BUBBLING_PHASE); //3
}

 

例子：

複製代碼 
<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick= function (event) {
    console.log("按鈕DOM0級方法添加事件處理程序eventPhase值爲？"+event.eventPhase);
}
btn.addEventListener("click",function(event){
    console.log("按鈕DOM2級方法添加事件處理程序，且addEventListener第三個參數爲true時eventPhase值爲？"+event.eventPhase);
},true);
btn.addEventListener("click",function(event){
    console.log("按鈕DOM2級方法添加事件處理程序，且addEventListener第三個參數爲false時eventPhase值爲？"+event.eventPhase);
},false);
    document.body.addEventListener("click", function (event) {
        console.log("body上添加事件處理程序，且在捕獲階段eventPhase值爲？"+event.eventPhase);
    },true);
document.body.addEventListener("click", function (event) {
    console.log("body上添加事件處理程序，且在冒泡階段eventPhase值爲？"+event.eventPhase);
},false);
</script>
複製代碼

運行效果：

2、IE中event的公共成員

IE中的event的屬性和方法和DOM一樣會隨着事件類型的不同而不同，但是也有一些是所有對象都有的公共成員，且這些成員大部分有對應的DOM屬性或方法。

屬性/方法 類型 讀/寫 說明
cancelBubble Boolean 讀/寫 默認爲false,但將其設置爲true就可以取消事件冒泡（與DOM中stopPropagation()方法的作用相同）
returnValue Boolean 讀/寫 默認爲true，但將其設置爲false就可以取消事件的默認行爲（與DOM中的preventDefault()方法的作用相同）
srcElement Element 只讀 事件的目標（與DOM中的target屬性相同）
type String 只讀 被觸發的事件的類型

七、鼠標事件

DOM3級事件中定義了9個鼠標事件。

  • mousedown:鼠標按鈕被按下（左鍵或者右鍵）時觸發。不能通過鍵盤觸發。
  • mouseup:鼠標按鈕被釋放彈起時觸發。不能通過鍵盤觸發。
  • click:單擊鼠標左鍵或者按下回車鍵時觸發。這點對確保易訪問性很重要，意味着onclick事件處理程序既可以通過鍵盤也可以通過鼠標執行。
  • dblclick:雙擊鼠標左鍵時觸發。
  • mouseover:鼠標移入目標元素上方。鼠標移到其後代元素上時會觸發。
  • mouseout:鼠標移出目標元素上方。
  • mouseenter:鼠標移入元素範圍內觸發，該事件不冒泡，即鼠標移到其後代元素上時不會觸發。
  • mouseleave:鼠標移出元素範圍時觸發，該事件不冒泡，即鼠標移到其後代元素時不會觸發。
  • mousemove:鼠標在元素內部移到時不斷觸發。不能通過鍵盤觸發。

note:

在一個元素上相繼觸發mousedown和mouseup事件，纔會觸發click事件。兩次click事件相繼觸發纔會觸發dblclick事件。

如果取消 了mousedown或mouseup中的一個，click事件就不會被觸發。直接或間接取消了click事件，dblclick事件就不會被觸發了。

1、事件觸發的順序

舉例：通過雙擊按鈕，看一下上面觸發的事件。

複製代碼 
<body>
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.addEventListener("mousedown",
七、鼠標事件
DOM3級事件中定義了9個鼠標事件。

       
       
     
        
  • mousedown:鼠標按鈕被按下（左鍵或者右鍵）時觸發。不能通過鍵盤觸發。
    •  
        
  • mouseup:鼠標按鈕被釋放彈起時觸發。不能通過鍵盤觸發。
    •  
        
  • click:單擊鼠標左鍵或者按下回車鍵時觸發。這點對確保易訪問性很重要，意味着onclick事件處理程序既可以通過鍵盤也可以通過鼠標執行。
    •  
        
  • dblclick:雙擊鼠標左鍵時觸發。
    •  
        
  • mouseover:鼠標移入目標元素上方。鼠標移到其後代元素上時會觸發。
    •  
        
  • mouseout:鼠標移出目標元素上方。
    •  
        
  • mouseenter:鼠標移入元素範圍內觸發，該事件不冒泡，即鼠標移到其後代元素上時不會觸發。
    •  
        
  • mouseleave:鼠標移出元素範圍時觸發，該事件不冒泡，即鼠標移到其後代元素時不會觸發。
    •  
        
  • mousemove:鼠標在元素內部移到時不斷觸發。不能通過鍵盤觸發。
    •  
       
note:
在一個元素上相繼觸發mousedown和mouseup事件，纔會觸發click事件。兩次click事件相繼觸發纔會觸發dblclick事件。
如果取消 了mousedown或mouseup中的一個，click事件就不會被觸發。直接或間接取消了click事件，dblclick事件就不會被觸發了。
1、事件觸發的順序
舉例：通過雙擊按鈕，看一下上面觸發的事件。

       
       
 
         
        
 
         
 
          複製代碼 
         
 
         
<body>
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.addEventListener("mousedown",function(event){
        console.log("mousedown");
    },false);
    btn.addEventListener("mouseup",function(){
        console.log("mouseup");
    },false);
    btn.addEventListener(
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程