javaScript事件流

阿新 • • 發佈：2021-01-11

事件流：事件從發生到傳播結束的過程。

事件流三個階段：捕獲階段、目標階段、冒泡階段。

addEventListener：

EventTarget.addEventListener()方法將指定的監聽器註冊到EventTarget上，當該物件觸發指定的事件時，指定的回撥函式就會被執行。事件目標可以是一個文件上的元素Element,Document和Window或者任何其他支援事件的物件 (比如XMLHttpRequest)。

addEventListener()的工作原理是將實現EventListener的函式或物件新增到呼叫它的EventTarget上的指定事件型別的事件偵聽器列表中。

事件冒泡：

從內到外，當父子元素都繫結同樣的事件時，觸發子元素，父元素也會被觸發。

案例：第三個引數為false為表示冒泡

列印結果為：

btn
ps
ls

<!DOCTYPE html>
<html>
    <head>
        <meta charset:"utf-8">
        <title></title>
    </head>
    <body>
        <div class="ls">
            <div class="ps">
                <button class="btn">按鈕</button></button>
            </div>
        </div>
        
    </body>
</html>
<script type:"text/javascript">
    var 
 btn = document.querySelector(".btn")
    var ps = document.querySelector(".ps")
    var ls = document.querySelector(".ls")
　　
    btn.addEventListener("click",function(){
        console.log("btn")
    },false)

    ps.addEventListener("click",function(){
        console.log("ps")
    },false)

    ls.addEventListener( 
"click",function(){
        console.log("ls")
    },false)</script>

捕獲階段：從外到內，和冒泡相反

案例：第三個引數為true表示冒泡

列印結果：

ls
ps
btn

<!DOCTYPE html>
<html>
    <head>
        <meta charset:"utf-8">
        <title></title>
    </head>
    <body>
        <div class="ls">
            <div class="ps">
                <button class="btn">按鈕</button></button>
            </div>
        </div>
        
    </body>
</html>
<script type:"text/javascript">
    var btn = document.querySelector(".btn")
    var ps = document.querySelector(".ps")
    var ls = document.querySelector(".ls")
    btn.addEventListener("click",function(){
        console.log("btn")
    },true)

    ps.addEventListener("click",function(){
        console.log("ps")
    },true)

    ls.addEventListener("click",function(){
        console.log("ls")
    },true)</script>

阻止捕獲和冒泡：event.stopPropagation()

相容性：

Event.cancelBubble屬性是Event.stopPropagation()的一個曾用名。在從事件處理程式返回之前將其值設定為true可阻止事件的傳播。

注意：不能阻止預設事件發生，例如：連結。可使用event.preventDefault()

案例：

結果列印為：

btn
ps

<!DOCTYPE html>
<html>
    <head>
        <meta charset:"utf-8">
        <title></title>
    </head>
    <body>
        <div class="ls">
            <div class="ps">
                <button class="btn">按鈕</button></button>
            </div>
        </div>
        
    </body>
</html>
<script type:"text/javascript">
    var btn = document.querySelector(".btn")
    var ps = document.querySelector(".ps")
    var ls = document.querySelector(".ls")
    btn.addEventListener("click",function(){
        console.log("btn")
    },false)

    ps.addEventListener("click",function(){
        console.log("ps")
        event.stopPropagation()
        // event.cancelBubble = true
    },false)

    ls.addEventListener("click",function(){
        console.log("ls")
    },false)
    
</script>

並不是所有的事件都有冒泡，例如：

onblur

onfocus

onmouseenter

onmouseleave

input繫結事件執行順序

onmouseenter---onfocus---onmousedown---onmouseup---onclick---onmouseleave

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="text">
</body>
<script>
    const text = document.getElementById('text');

    text.onclick = function (e) {
        console.log('onclick')
    }
    text.onfocus = function (e) {
        console.log('onfocus')
    }
    text.onmousedown = function (e) {
        console.log('onmousedown')
    }
    text.onmouseenter = function (e) {
        console.log('onmouseenter')
    }
    text.onmouseup = function (e) {
        console.log('onmouseup')
    }

　　　 text.onmouseleave=function(e){ console.log('onmouseleave') 　 }

</script>
</html>

onmouseover 和 onmouseenter 區別

這兩者都是移入的時候觸發，但是onmouseover會觸發多次，而onmouseenter只在進去的時候才觸發。

案例：滑鼠從下到上移動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .div{
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .div div{
        width: 100px;
        height: 60px;
        border: 1px solid #ccc;
    }
</style>
<body>
    <div class="div">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>
<script>
    document.querySelector(".div").onmouseover = function(){
        console.log("onmouseover")
    }

    document.querySelector(".div").onmouseenter = function(){
        console.log("onmouseenter")
    }
</script>
</html>