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. 蜕变成蝶~Linux设备驱动之CPU与内存和I/O

    那是世上最远的距离 思念让我无法去呼吸 你的一动和一举 占据我心里 陪我每个孤独无尽的夜里 用我心中盛放的画笔 描绘你微笑时的绚丽 爱让人痛彻心底 我却不怀疑 你的存在是我生命的奇迹 感受你的每一次的 ...

  2. [原]unity5 AssetBundle 加载

    本文unity版本5.1.3 一.现有的打包教程: 1.http://liweizhaolili.blog.163.com/blog/static/16230744201541410275298/ 阿 ...

  3. MySQL命令学习

    上面两篇博客讲了MySQL的安装.登录,密码重置,为接下来的MySQL命令学习做好了准备,现在开启MySQL命令学习之旅吧. 首先打开CMD,输入命令:mysql -u root -p  登录MySQ ...

  4. Web容器初始化过程

    一.SpringMVC启动过程 Spring的MVC是基于Servlet功能实现的,每个web工程中都有一个web.xml文件,web容器在启动的时候会加载这个配置文件,当一个web应用加载到web容 ...

  5. 使用isEmpty()报空指针异常

    使用isEmpty()是出现了空指针异常NullpointException: 原来isEmpty()用来判断一个变量是否已经初始化了,因为“”和new 的时候系统都会为其分配内存,不管是否有值,当为 ...

  6. 阿里天池的新任务（简单）(KMP统计子串出现的次数)

    阿里“天池”竞赛平台近日推出了一个新的挑战任务:对于给定的一串 DNA 碱基序列 tt,判断它在另一个根据规则生成的 DNA 碱基序列 ss 中出现了多少次. 输出格式 输出一个整数,为 tt 在 s ...

  7. electron+react

    yarn create react-app electron-react cd electron-react yarn run eject // 修改react-app打包的路径 / -> ./ ...

  8. 关于vue-cli创建项目（小白）(2)mock数据

    mock数据,好处,前后端分离,不用等后端的真实接口,就可以用axios(ek sju s 好像这么读,原谅本人总是根据读音写单词)请求数据了. 一,安装所需插件 根据不同需求选择安装环境,mockj ...

  9. 有关vue开发的小经验

    注册登录已经成为布局的常事,这里为大家推荐两种超级好用的布局display:flex;justify-content:center;这个可以解决水平居中的疑难杂症 align-center:cente ...

  10. python使用matplotlib绘制折线图教程

    Matplotlib是一个Python工具箱,用于科学计算的数据可视化.借助它,Python可以绘制如Matlab和Octave多种多样的数据图形.下面这篇文章主要介绍了python使用matplot ...