js事件簡介

時間 2019-12-07

標籤事件簡介欄目 JavaScript 简体版

原文原文鏈接

1.什麼是事件?　html

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

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

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

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

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

2.什麼是事件流(event flow)?code

　　事件流描述的是從頁面中接收事件的順序,事件發生時會在元素節點與根節點之間按照特定的順序傳播，路徑所通過的全部節點都會收到該事件，這個傳播過程即DOM事件流。htm

3.事件流模型blog

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

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

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

dom事件流。

4.冒泡型事件流

　　IE提出的事件流叫作事件冒泡，即事件開始時由最具體的元素接收，而後逐級向上傳播到較爲不具體的節點。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onclick="bodyClick()">

    <div onclick="divClick()">
        <button onclick="btn()">
            <p onclick="p()">點擊冒泡</p>
        </button>
    </div>
    <script>
       
       function p(){
          console.log('p標籤被點擊')
       }
        function btn(){
            console.log("button被點擊")
        }
         function divClick(event){
             console.log('div被點擊');
         }
        function bodyClick(){
            console.log('body被點擊')
        }

    </script>

</body>
</html>

結果：

5.捕獲型事件流

網景公司提出的事件流叫事件捕獲流。事件捕獲流的思想是不太具體的DOM節點應該更早接收到事件，而最具體的節點應該最後接收到事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    <button>
        <p>點擊捕獲</p>
    </button>
</div>
<script>
    var oP=document.querySelector('p');
    var oB=document.querySelector('button');
    var oD=document.querySelector('div');
    var oBody=document.querySelector('body');

    oP.addEventListener('click',function(){
        console.log('p標籤被點擊')
    },true);

    oB.addEventListener('click',function(){
        console.log("button被點擊")
    },true);

    oD.addEventListener('click',  function(){
        console.log('div被點擊')
    },true);

    oBody.addEventListener('click',function(){
        console.log('body被點擊')
    },true);

</script>



</body>
</html>

結果：

6.DOM事件流

　 ‘DOM2級事件’規定的事件流包含3個階段，事件捕獲階段、處於目標階段、事件冒泡階段。首先發生的事件捕獲爲截獲事件提供機會，而後是實際的目標接收事件，最後一個階段是事件冒泡階段，能夠在這個階段對事件作出響應。在DOM事件流中，事件的目標在捕獲階段不會接收到事件，這意味着在捕獲階段事件從document到<p>就中止了，下個階段是處於目標階段，因而事件在<p>上發生，並在事件處理中被當作冒泡階段的一部分，而後，冒泡階段發生，事件又傳播回document。

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

　　　　全部的DOM節點都包含這2個方法。

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

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

如今能夠來模擬一下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">DOM事件流</button>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(event){
console.log("div 處於目標階段");
};
document.body.addEventListener("click",function(event){
console.log("event bubble 事件冒泡");
},false);
document.body.addEventListener("click",function(event){
console.log("event catch 事件捕獲");
},true);
</script>


</body>
</html>