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. 终止事件冒泡

4.1、event.stopPropagation()
在子元素相应的处理函数内，加入 event.stopPropagation() ,终止事件的广播分发，这样事件停留在本节点，不会再往外传播了。

4.2、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;

        }

    }

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

转自：https://blog.csdn.net/u012309349/article/details/50885149

事件冒泡以及onmouseenter 和 onmouseover 的不同的更多相关文章

  1. 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件

    前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...

  2. javascript（九）事件冒泡 onmouseenter onmouseenter 默认事件 和 键盘事件

    1 事件冒泡 子元素触发的事件,会往上(父元素)传递: 例子: <div id="box"> <p></p> </div> < ...

  3. js高级：event，事件冒泡，事件捕获

    1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬 ...

  4. 做二级菜单时候遇到的关于事件冒泡以及mouseover和mouseenter的不同

    二级菜单作为最普通小组件,我遇到了坑. <style> .wrapper { height: 150px; border: 1px solid; width: 150px; } .wrap ...

  5. 探讨JavaScript的事件冒泡

    JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡: ...

  6. Javascript 事件对象（三）事件冒泡

    事件流---事件冒泡取消冒泡:ev.cancelBubble=true ---事件捕获Ie下是没有的,在绑定事件中,标准下是有的 <!DOCTYPE HTML> <html> ...

  7. js事件冒泡原理及处理

    事件从根节点开始,逐级派送到子节点,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“捕获阶段(Capture)”:执行完捕获阶段后,事件由子节点往根节点派送,若节点绑定了事件动作,则执行动 ...

  8. JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  9. JAVAscript——菜单下拉列表练习(阻止事件冒泡)

    下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. < ...

随机推荐

  1. 使用Apache下poi创建和读取excel文件

    一:使用apache下poi创建excel文档 @Test /* * 使用Apache poi创建excel文件 */ public void testCreateExcel() { // 1:创建一 ...

  2. python print 打印的数据包含中文，打印报错UnicodeDecodeError: 'gbk' codec can't decode bytes in position 459-460: illegal multibyte sequence解决办法

    python 2.7 print 的数据中若包括中文,打印则会报错UnicodeDecodeError: 'gbk' codec can't decode bytes in position 459- ...

  3. 《转》Logistic回归 多分类问题的推广算法--Softmax回归

    转自http://ufldl.stanford.edu/wiki/index.php/Softmax%E5%9B%9E%E5%BD%92 简介 在本节中,我们介绍Softmax回归模型,该模型是log ...

  4. css3 - 纯css实现一个轮播图

    这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...

  5. wpgcms---字符串截取

    在使用wpgcms做项目的时候,会用到要对描述做字符串截取,具体方法如下: {{ contentInfo.summary|slice(0,75) }}

  6. [Codeforces Round #507][Codeforces 1039C/1040E. Network Safety]

    题目链接:1039C - Network Safety/1040E - Network Safety 题目大意:不得不说这场比赛的题面真的是又臭又长...... 有n个点,m条边,每个点有对应的权值c ...

  7. 振兴中华（dfs or dp )

    小明参加了学校的趣味运动会,其中的一个项目是:跳格子. 地上画着一些格子,每个格子里写一个字,如下所示:(也可参见p1.jpg) 从我做起振 我做起振兴 做起振兴中 起振兴中华 比赛时,先站在左上角的 ...

  8. 强类型Dataset使用事务（改进原有方法）

    以下部份转自:http://blog.csdn.net/nfbing/article/details/5803980 关于强类型Dataset的用法和好处,我就不再多说,网上关于这方面的资料很多 , ...

  9. python全栈开发 * 33 知识点汇总 * 180718

    33 udp协议编码 显示客户端名字,输出带颜色的内容 udp协议的时间同步机制 #一.udp 协议编码 一个服务器,多个客户端#服务器:# import socket# sk=socket.sock ...

  10. C++/C面试题

    (1) 按位运算只适用于字符型和整数型变量以及它们的变体,对其他数据类型不适用: (2) 一般在打开网页时,需要在浏览器中输入网址,因此,需要通过网址找到访问资源的 IP 地址,从而可以把请求发送到对 ...