1.冒泡事件是什么
在js中,存在着一个事件,叫冒泡事件,该事件表示的是如果子节点触发某个事件,那么父节点有该事件的绑定的话,也会被触发。
我们上代码:
<div id="baba"> <button id="er">点我</button> </div> <script> var baba = document.getElementById("ba") baba.onclick = function(){ alert("baba") } var er = document.getElementById("er") baba.onclick = function(){ alert("er") } </script>
当你点击了button之后,你会发现浏览器会显示"er",然后是baba,这就是事件冒泡。
2.事件冒泡的作用
假如你有很多个元素,他们都需要绑定一个函数,但是他们的函数只有value等属性不同,当然,可以通过给每一个元素绑定函数来写。
但是这样子我们的代码就变得很冗余,而且由于没一个函数都不一致,就会带来很多的内存浪费,这是面向过程的一种思想,函数的出现本来就是为了解决
面向过程思想的弊端的,面向对象的思想才是我们要学习的。
那么类比一下函数思想,我们也可以用冒泡事件来搞掂这个问题,请看代码
<body> <ul id="ba"> <li value="1">1</li> <li value="2">2</li> <li value="3">3</li> </ul> </body> <script> var ba = document.getElementById("ba") ba.onclick = function(evevt){ if (evevt.target.Nodename.toLocalLowerCase =="li"){ alert(evevt.target.value) } } </script>
当有li标签被点击之后,事件会传到父标签,然后父标签可以通过函数的event自带参数去判断是不是li标签被点击了,如果是就取出其中的值,显示。
通过这个例子,我们是不是就能省下很多的空间嗯?
3.冒泡事件怎么取消?
如果不需要事件冒泡的话,取消时很容易的
function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; }
顺带说一句,在函数里面return false只会阻止默认行为,不会阻止冒泡事件