js冒泡机制
js冒泡机制
冒泡：顾名思义，从最下面的位置某个元素开始往上面浮出。
在js中，是指从最下面的结点到具有触发条件的父节点依次触发。
什么时候会用到冒泡机制呢？
一般冒泡机制会用于addElementListener监听器中。
下面来看代码。
<html>
<head><meta charset="utf-8">
</head>
<body><div id="parent"><div id="child"><span id="span1">this is a demo(click me!!!)</span></div></div>
<script>document.getElementById("span1").addEventListener('click',function(){fun(this.id)},false);document.getElementById("child").addEventListener('click',function(){fun(this.id)},false);document.getElementById("parent").addEventListener('click',function(){fun(this.id)},false);function fun(a){alert(a);}
</script>
</body>
</html>
依次出现上面的三个提示框。
如果想实现点击的不是span不弹框的话，并且传递的参数是默认的话(默认参数是event事件，比如click，mouseover等)可以在触发的函数里用event.current.target或者event.target来判断点击的是不是点击的是span1或者span1的范围里.(event是传递的参数)。
如果你点击的是span1元素的话
event.current.targrt在指的是span1。而event.target指的是span以及他的两个父div。
js冒泡机制
js冒泡机制
冒泡：顾名思义，从最下面的位置某个元素开始往上面浮出。
在js中，是指从最下面的结点到具有触发条件的父节点依次触发。
什么时候会用到冒泡机制呢？
一般冒泡机制会用于addElementListener监听器中。
下面来看代码。
<html>
<head><meta charset="utf-8">
</head>
<body><div id="parent"><div id="child"><span id="span1">this is a demo(click me!!!)</span></div></div>
<script>document.getElementById("span1").addEventListener('click',function(){fun(this.id)},false);document.getElementById("child").addEventListener('click',function(){fun(this.id)},false);document.getElementById("parent").addEventListener('click',function(){fun(this.id)},false);function fun(a){alert(a);}
</script>
</body>
</html>
依次出现上面的三个提示框。
如果想实现点击的不是span不弹框的话，并且传递的参数是默认的话(默认参数是event事件，比如click，mouseover等)可以在触发的函数里用event.current.target或者event.target来判断点击的是不是点击的是span1或者span1的范围里.(event是传递的参数)。
如果你点击的是span1元素的话
event.current.targrt在指的是span1。而event.target指的是span以及他的两个父div。