自己做网站名电子章违法吗,医院建网站,长春的网站建设,中国有名的营销策划公司js事件机制在开发中可以说时刻使用#xff0c;例如dom绑定事件、监听其自身事件等。js事件机制有事件捕获、事件冒泡俩种机制#xff0c;我们分别说下这俩种机制的使用场景。
一、概念
事件捕获顺序如下#xff1a; window document body div
事件冒泡顺序…js事件机制在开发中可以说时刻使用例如dom绑定事件、监听其自身事件等。js事件机制有事件捕获、事件冒泡俩种机制我们分别说下这俩种机制的使用场景。
一、概念
事件捕获顺序如下 window document body div
事件冒泡顺序如下 div body document window
可以看到事件捕获是从最外层元素开始依次向内部元素传播直到目标元素。而事件冒泡相反从目标元素依次向外部元素传播直到最外层元素
在JavaScript中我们可以使用addEventListener方法来绑定捕获和冒泡事件下面俩种方式都可以第三个参数默认为布尔值false设为true则为捕获机制默认为冒泡机制也可以为object
element.addEventListener(event, handler, option);
element.addEventListener(event, handler, capture);option包含如下可选属性
属性作用capture设置为捕获机制once只调用一次passive一个布尔值设置为 true 时表示 listener 永远不会调用 preventDefault()signalAbortSignal该 AbortSignal 的 abort() 方法被调用时监听器会被移除
二、实践
事件冒泡
div classdiv1div classdiv2buttonclick me/button/div
/divscriptlet div1 document.querySelector(.div1)let div2 document.querySelector(.div2)let button document.getElementsByTagName(button)[0]button.addEventListener(click, e {console.log(button)}, {capture: false})div1.addEventListener(click, e {console.log(div1)}, {capture: false})div2.addEventListener(click, e {console.log(div2)}, {capture: false})window.addEventListener(click, e {console.log(window)}, {capture: false})
/script打印下可以看到事件冒泡的执行顺序 当然我们可以组织事件冒泡方式如下
// 非 IE 浏览器
e.stopPropagation()
// IE 浏览器
e.cancleBubble true
// 同一节点组织同一事件
e.stopimmediatePropagation()事件捕获
div classdiv1div classdiv2buttonclick me/button/div
/divscriptlet div1 document.querySelector(.div1)let div2 document.querySelector(.div2)let button document.getElementsByTagName(button)[0]button.addEventListener(click, e {console.log(button)}, {capture: true})div1.addEventListener(click, e {console.log(div1)}, {capture: true})div2.addEventListener(click, e {console.log(div2)}, {capture: true})window.addEventListener(click, e {console.log(window)}, {capture: true})打印下可以看到事件捕获顺序
三、事件委托
事件委托也称为事件代理(Event Delegation)事件委托是一种将事件处理程序绑定到一个父元素上而不是将事件处理程序绑定到每个子元素上的技术。通过事件委托可以减少事件处理程序的数量提高性能和代码的可维护性
ulliPig/liliCat/liliDog/liliTigger/li
/ulscriptlet ul document.getElementsByTagName(ul)[0]ul.addEventListener(click e {console.log(e.target)})
/script四、组织浏览器默认行为
// 1、在IE浏览器中通过
e.returnValue false// 2、在其他浏览器中调用方法
e.preventDefault()// 3、在jQuery中通过在事件回调利用
return false
