事件冒泡以及onmouseenter 和 onmouseover 的不同

最新推荐文章于 2024-07-07 20:04:18 发布

qq_40391739

最新推荐文章于 2024-07-07 20:04:18 发布

阅读量338

点赞数

分类专栏： JavaScript 文章标签：事件

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有）
2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）
这四个事件两两配对使用，onmouseover、onmouseout一对，onmouseenter、onmouseleave一对，不能混合使用。 --------------------- 本文来自 liujian_laohan 的CSDN 博客

1. onmouseenter

onmouseenter 事件在鼠标指针移动到元素上时触发。
该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发。
onmouseenter 事件类似于 onmouseover 事件。唯一的区别是 onmouseenter 事件不支持冒泡。

2. 实例演示onmousemove, onmouseenter 和 mouseover 事件的不同

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}

p {
    background-color: white;
}
</style>
</head>
<body>

<h3>该实例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。</h3>

<p> onmousemove 事件在鼠标移动到 div 元素上时触发。</p>

<p> mouseenter 事件中有在鼠标指针进入 div 元素时触发。 </p>

<p> onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)。</p>

<div onmousemove="myMoveFunction()">
  <p>onmousemove: <br> <span id="demo">鼠标移动到我这!</span></p>
</div>

<div onmouseenter="myEnterFunction()">
  <p>onmouseenter: <br> <span id="demo2">标移动到我这!</span></p>
</div>

<div onmouseover="myOverFunction()">
  <p>onmouseover: <br> <span id="demo3">标移动到我这!</span></p>
</div>

<script>
x = 0;
y = 0;
z = 0;

function myMoveFunction() {
    document.getElementById("demo").innerHTML = z+=1;
}

function myEnterFunction() {
    document.getElementById("demo2").innerHTML = x+=1;
}

function myOverFunction() {
    document.getElementById("demo3").innerHTML = y+=1;
}
</script>

</body>
</html>

其中：
1. onmousemove 事件在鼠标移动到 div 元素上时触发，鼠标在p元素内移动（即白框内也会触发，事件冒泡到父级div）；
2. mouseenter 事件中有在鼠标指针进入 div 元素时触发，鼠标进入p元素内不会触发，因为不支持事件冒泡；
3. onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)，因为事件冒泡到父级div。

参考解析Javascript事件冒泡机制：http://blog.csdn.net/luanlouis/article/details/23927347

3. 事件冒泡

比如说父元素添加了onclick事件，当子元素发生onclick事件时，父元素的onclick事件也会触发。

4. 终止事件冒泡

event.stopPropagation()
在子元素相应的处理函数内，加入 event.stopPropagation() ,终止事件的广播分发，这样事件停留在本节点，不会再往外传播了。
if(event.target == event.currentTarget) {}
事件包含最初触发事件的节点引用和当前处理事件节点的引用，那如果节点只处理自己触发的事件即可,不是自己产生的事件不处理。event.target 引用了产生此event对象的dom 节点，而event.currrentTarget 则引用了当前处理节点，我们可以通过这两个target 是否相等。event.target永远是直接接受事件的目标DOM元素。

document.getElementById("box1").addEventListener("click",function(event){  
            if(event.target == event.currentTarget)  
            {  
                alert("您好，我是最外层div。");  
            }  
});

比较：
从事件传递上看：方法一在于取消事件冒泡，即当某些节点取消冒泡后，事件不会再向上传递；方法二在于不阻止冒泡，过滤需要处理的事件，事件处理后还会继续传递；
分析方法二，既然事件是冒泡传递的，那可不可以让某个父节点统一处理事件，通过判断事件的发生地（即事件产生的节点），然后做出相应的处理呢？答案是可以的，下面通过给body 元素添加事件监听，然后通过判断event.target 然后对不同的target产生不同的行为。

    window.onload = function() {        document.getElementById("body").addEventListener("click",eventPerformed);
    }  
    function eventPerformed(event) {  
        var target = event.target; 
        switch (target.id) {  
        case "span":   
            alert("您好，我是span。");  
            break;  
        case "box2":  
            alert("您好，我是第二层div。");  
            break;  
        case "box1":  
             alert("您好，我是最外层div。");  
            break;  
        }  
    }

即将每一个元素都处理事件的模式改成有上层节点统一处理事件，通过事件发生的不同节点执行不同行为。这个模式，就是所谓的事件委托。

--------------------- 本文来自 like-Betty 的CSDN 博客，全文地址请点击：https://blog.csdn.net/u012309349/article/details/50885149?utm_source=copy