大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
一. onmouseenter、onmouseover
onmouseenter 事件在鼠标指针进入到绑定事件的那个元素上时触发。
该事件通常与 onmouseleave(在鼠标指针离开绑定事件的那个元素上时触发) 事件一同使用。
onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 。
二. 实例演示onmousemove, onmouseenter 和 mouseover 事件的不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<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 元素上就开始时触发,在这个div上移动一直触发(冒泡)。</p>
<p> mouseenter 事件中有在鼠标指针进入 div 元素时触发(不冒泡)。 </p>
<p> onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)(冒泡)。</p>
<hr>
<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>
</body>
<script>
var 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>
</html>
<!DOCTYPE html>
其中:
1. onmousemove 事件在鼠标移动到 div 元素上时触发,鼠标在div、p、span元素内移动(即白框内也会触发,事件冒泡到父级div);
2. mouseenter 事件中有在鼠标指针进入 div 元素时触发,鼠标进入p、span元素内不会触发,因为不支持事件冒泡;
3. onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span),因为事件冒泡到父级div。
参考解析Javascript事件冒泡机制:https://blog.csdn.net/luanlouis/article/details/23927347 (建议查看)
三. 事件冒泡
比如说父元素添加了onclick事件,当子元素发生onclick事件时,父元素的onclick事件也会触发。
四. 终止事件冒泡
方式一:
event.stopPropagation()
在子元素相应的处理函数内,加入 event.stopPropagation() ,终止事件的广播分发,这样事件停留在本节点,不会再往外传播了。
方式二:
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;
}
}
}
即将每一个元素都处理事件的模式改成有上层节点统一处理事件,通过事件发生的不同节点执行不同行为。这个模式,就是所谓的事件委托。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184717.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...