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. 服务器tail输出正常,vim打开中文乱码

    修改服务器端, 在/etc/vim/vimrc文件末尾加上 set fileencodings=utf-8,ucs-bom,gb18030,gbk,gb2312,cp936set termencodi ...

  2. python机器学习包 Windows下 pip安装 scikit-learn numpy scipy

    1.到PIP的目录中C:\Python34\Scripts;2. 2.1  pip安装numpy pip install numpy 2.2  pip安装sklearn pip install -U ...

  3. JS精准倒计时（支持自定义模板）

    /** * 倒计时 Create By TuJia @2017.10.17 * 使用方法: * leftTimer.run(container[,theme][,callback]); * * 支持 ...

  4. gym102007 E

    我计划预习五个小时离散,然后hmc补了这道他自认为非常的裸并且很傻逼自己可以一眼秒的简单题,然后给我讲了讲,然后我失去了一整晚的生命迹象. 首先我们可以发现一个神奇的现象,啊,先排个序,然后我们会发现 ...

  5. win 10安装Linux虚拟机教程

    1.首先下载虚拟机 用的是VMware 官方下载地址:https://my.vmware.com/en/web/vmware/free#desktop_end_user_computing/vmwar ...

  6. python GIL :全局解释器

    cpython 解释器中存在一个GIL(全局解释器锁),无论多少个线程.多少颗cpu 他的作用就是保证同一时刻只有一个线程可以执行代码,因此造成了我们使用多线程的时候无法实现并行. 因为有GIL的存在 ...

  7. Logcat

    logcat -- "-s"选项 : 设置输出日志的标签, 只显示该标签的日志; -- "-f"选项 : 将日志输出到文件, 默认输出到标准输出流中, -f 参 ...

  8. Redis的学习笔记

    一.Redis简介 1．关于关系型数据库和nosql数据库 关系型数据库是基于关系表的数据库,最终会将数据持久化到磁盘上,而nosql数据     库是基于特殊的结构,并将数据存储到内存的数据库.从性 ...

  9. 执行效率做比较，Go、python、java、c#、delphi、易语言等

    比较环境,在win7   64位,比较各种语言的整数型运算,下面的比较只作为单项比较.具体方式,40000*40000遍历相加.为了防止编译器优化,生成一个随机数. 1:c#,在NET2.0框架下作为 ...

  10. 使用docker容器运行MySQL数据库并持久化数据文件

    1.下载mysql镜像 # docker pull mysql 2.启动mysql容器 # docker run -itd -v /data:/var/lib/mysql -p 33060:3306 ...