当前位置: 首页 > Web前端 > HTML

事件捕获与冒泡与事件委托的原理和区别

时间:2023-04-02 20:04:53 HTML

为什么要搞清楚事件捕获与冒泡与事件委托1.面试必问的问题2.过去不景气的时候,浏览器是兼容比现在小很多,网景(Netscape)只用事件捕获,而InternetExplorer只用事件冒泡。当W3C决定尝试标准化这些行为并达成共识时,他们最终得到了一个包含两种情况(捕获和冒泡)的系统,并最终在现代浏览器中实现。3.事件委托作为一个单独的执行阶段很容易理解。三者之间是什么关系?1、事件捕获和冒泡是现代浏览器执行事件的两个不同阶段。2.事件委托是利用冒泡阶段机制实现事件冒泡和捕获运行图运行情况的操作:当一个事件发生在有父元素的元素上时,现代浏览器根据设置时的设置执行(冒泡或捕获)事件是通过addEventListener()添加的第三个属性来设置事件是通过捕获阶段(true)注册还是通过冒泡阶段(false)注册。默认情况下它是假的。事件冒泡是从实际元素(事件)到父元素逐级执行,直到到达。有时父元素和子元素都定义了点击事件,但是点击子元素时父元素并没有执行。click事件(比如对话框弹窗的遮罩层是父元素,对话框弹窗的内容层是子元素,可以通过点击关闭弹窗遮罩层,但点击内容层不会关闭弹出窗口),你可以使用stopPropagation()停止在子元素上冒泡。事件捕获(一般不使用)浏览器检查元素的最外层祖先,是否在捕获阶段注册了onclick事件处理程序,如果是,则运行它。然后它移动到中的下一个元素(被点击元素的父元素)并执行相同的操作,然后是下一个元素(被点击元素的父元素)等等,直到它到达实际的点击元素。事件捕获和冒泡的区别执行顺序不同冒泡:捕获:事件委托使用场景如果你想点击大量子元素(包括动态添加的)中的任意一个来运行一段代码,这个时候你可以把该事件的监听器设置在父节点上。jquery中on的实现方法