addEventListener兼容主流瀏覽器

attachEvent兼容IE8及以下

<div id = 'box'></div> <script>var oBox = document.getElementById('box');addEvent(oBox, 'click',function(){ alert(1);});function addEvent(obj,eName,efn){document.addEventListener?obj.addeventListener(eName,eFn):obj.attachEvent('on' + eName,eFn); }; </script>

removeEventListener()用來解綁.addEventListener綁定的事件

detachEvent()用來解綁.attachEvent綁定的事件

?

事件冒泡

????? 子元素觸發的事件會往上（父元素）傳遞

<div id = "box"><p></p> </div>var op = document.querySelector('#box p'); var oBox = document.querySelector('#box');oBox.onclick = function(){alert('菜鳥') }

event.cancelBubble = false 阻止事件冒泡：

默認值false,不阻止冒泡；true阻止冒泡

#box{width: 100px;height: 30px;background: pink;position: relative;}#box p{width:100%;height: 60px;background: #ffaf3d;position: absolute;top: 30px;display: none; <div id='box'><p class = 'detail'></p> </div> <script>var oBox = documet.querySelector('#box');var oP = oBox.children[0];oBox.addeventListener('click',function(e){oP.style.display = 'block';e = e||window.event; },false)document.addEventListener('click',function(){oP.style.display = 'none'; }false) </script>

?

轉載于:https://www.cnblogs.com/sgaogao/p/8196325.html

總結

以上是生活随笔為你收集整理的绑定事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。