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. C++将时间格式转换成秒数

    #include <stdio.h> #include <time.h> #include <string.h> #include <stdlib.h> ...

  2. C#Windows Service服务程序的安装/卸载、启动/停止 桌面客户端管理程序设计

    C#Windows Service服务程序的安装/卸载.启动/停止 桌面客户端管理程序设计 关于Windows Service程序的安装与卸载如果每次使用命令行操作,那简直要奔溃了,太麻烦而且还容易出 ...

  3. nuxt跨域

    根据nuxt官方文档提供的axios module 安装: npm install @nuxtjs/axios @nuxtjs/proxy --save nuxt.config.js modules: ...

  4. 牛客练习赛39D

    n,m<=5e4; 首先操作2用并查集就行了.题解说的好啊! 考虑操作一,连的两个点如果同色,直接合并,然后这个颜色的联通块-1,然后合并bitset,就是或一下.bitset维护的是相连的异色 ...

  5. 方程式ETERNALBLUE 之fb.py的复现

    原文链接:https://www.t00ls.net/viewthread.php?tid=39343

  6. yarn配置日志聚合

    [原文地址] 日志聚集是YARN提供的日志中央化管理功能,它能将运行完成的Container/任务日志上传到HDFS上,从而减轻NodeManager负载,且提供一个中央化存储和分析机制.默认情况下, ...

  7. Spring-Boot构建多模块项目

    Spring-Boot构建多模块项目 功能模块单独项目开发,可以将一个庞大的项目分解成多个小项目,便于细分开发 Maven多模块项目不能独立存在,必须有一个介质来包含. 1.创建一个Maven 项目, ...

  8. mysql批量更新的两种方式效率试验<二>

    Mysql两种批量更新的对比 简介: mysql搭载mybits框架批量更新有两种方式,一种是在xml中循环整个update语句,中间以‘:’隔开,还有一种是使用case when 变相实现批量更新, ...

  9. Python学习之旅（三十六）

    Python基础知识(35):电子邮件(Ⅱ) 收取邮件就是编写一个MUA作为客户端,从MDA把邮件获取到用户的电脑或者手机上 收取邮件最常用的协议是POP协议,目前版本号是3,俗称POP3 Pytho ...

  10. 怎样理解JAVA的“构造方法”和“主方法”

    在类中除了成员方法之外,还存在一种特殊类型的方法,那就是构造方法.主方法是类的入口点,它定义了程序从何处开始: 主方法提供对程序流向的控制,Java编译器通过主方法来执行程序.那么,下面一起来看一下关 ...