事件冒泡以及onmouseenter 和 onmouseover 的不同
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 的不同的更多相关文章
- 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件
前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...
- javascript(九)事件冒泡 onmouseenter onmouseenter 默认事件 和 键盘事件
1 事件冒泡 子元素触发的事件,会往上(父元素)传递: 例子: <div id="box"> <p></p> </div> < ...
- js高级:event,事件冒泡,事件捕获
1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬 ...
- 做二级菜单时候遇到的关于事件冒泡以及mouseover和mouseenter的不同
二级菜单作为最普通小组件,我遇到了坑. <style> .wrapper { height: 150px; border: 1px solid; width: 150px; } .wrap ...
- 探讨JavaScript的事件冒泡
JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡: ...
- Javascript 事件对象(三)事件冒泡
事件流---事件冒泡取消冒泡:ev.cancelBubble=true ---事件捕获Ie下是没有的,在绑定事件中,标准下是有的 <!DOCTYPE HTML> <html> ...
- js事件冒泡原理及处理
事件从根节点开始,逐级派送到子节点,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“捕获阶段(Capture)”:执行完捕获阶段后,事件由子节点往根节点派送,若节点绑定了事件动作,则执行动 ...
- JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> ...
- JAVAscript——菜单下拉列表练习(阻止事件冒泡)
下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. < ...
随机推荐
- 服务器tail输出正常,vim打开中文乱码
修改服务器端, 在/etc/vim/vimrc文件末尾加上 set fileencodings=utf-8,ucs-bom,gb18030,gbk,gb2312,cp936set termencodi ...
- 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 ...
- JS精准倒计时(支持自定义模板)
/** * 倒计时 Create By TuJia @2017.10.17 * 使用方法: * leftTimer.run(container[,theme][,callback]); * * 支持 ...
- gym102007 E
我计划预习五个小时离散,然后hmc补了这道他自认为非常的裸并且很傻逼自己可以一眼秒的简单题,然后给我讲了讲,然后我失去了一整晚的生命迹象. 首先我们可以发现一个神奇的现象,啊,先排个序,然后我们会发现 ...
- win 10安装Linux虚拟机教程
1.首先下载虚拟机 用的是VMware 官方下载地址:https://my.vmware.com/en/web/vmware/free#desktop_end_user_computing/vmwar ...
- python GIL :全局解释器
cpython 解释器中存在一个GIL(全局解释器锁),无论多少个线程.多少颗cpu 他的作用就是保证同一时刻只有一个线程可以执行代码,因此造成了我们使用多线程的时候无法实现并行. 因为有GIL的存在 ...
- Logcat
logcat -- "-s"选项 : 设置输出日志的标签, 只显示该标签的日志; -- "-f"选项 : 将日志输出到文件, 默认输出到标准输出流中, -f 参 ...
- Redis的学习笔记
一.Redis简介 1.关于关系型数据库和nosql数据库 关系型数据库是基于关系表的数据库,最终会将数据持久化到磁盘上,而nosql数据 库是基于特殊的结构,并将数据存储到内存的数据库.从性 ...
- 执行效率做比较,Go、python、java、c#、delphi、易语言等
比较环境,在win7 64位,比较各种语言的整数型运算,下面的比较只作为单项比较.具体方式,40000*40000遍历相加.为了防止编译器优化,生成一个随机数. 1:c#,在NET2.0框架下作为 ...
- 使用docker容器运行MySQL数据库并持久化数据文件
1.下载mysql镜像 # docker pull mysql 2.启动mysql容器 # docker run -itd -v /data:/var/lib/mysql -p 33060:3306 ...