事件模型
程序员文章站
2022-04-12 12:09:55
IE事件模型(没有捕获)(<=ie8) 标准DOM事件模型(捕获、目标、冒泡)(>ie8) 自定义事件 ......
IE事件模型(没有捕获)(<=ie8)
- attachEvent(event, function)
detachEvent(event, function)
第一个参数为on+'event'; - 目标对象event.srcElement;
- this会指向window;
- event.cancelBubble = true // 停止冒泡
event.returnValue = false // 阻止默认事件
标准DOM事件模型(捕获、目标、冒泡)(>ie8)
- addEventListener(event, function, useCapture)
removeEventListener(event, function, useCapture)
useCapture为true,在捕获阶段执行,从外到里触发;
useCapture为false,在冒泡阶段执行(默认),从里到外触发; - event.target和event.currentTarget
target在事件流的目标阶段(指向触发事件监听的对象);
currentTarget在事件流的捕获,目标及冒泡阶段(指向添加事件监听的对象);
只有当事件流处在目标阶段的时候,两个的指向才是一样的;
而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。 - this指向事件监听对象;
- event.stopPropagation() // 停止冒泡
event.preventDefault() // 阻止默认事件 - event.stopImmediatePropagation(),阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上,这个方法不接受任何参数;
自定义事件
var event = new Event('自定义事件'); // Listen for the event. elem.addEventListener('自定义事件', function (e) { ... }, false); // Dispatch the event. elem.dispatchEvent(event); CustomEvent 接口可以为 event 对象添加更多的数据;detail属性可用于传递自定义数据: var event = new CustomEvent('自定义事件', { 'detail': elem.dataset.time }); 下面的代码允许你在事件监听器中访问更多的数据: function eventHandler(e) { log('The time is: ' + e.detail); }
上一篇: 3. HTML中的容器标签
推荐阅读
-
如何在blur或focusout事件里得到即将得到焦点的元素?另外这两个事件有什么区别?_html/css_WEB-ITnose
-
VB的webbrowser控件捕获网页关闭事件
-
基于Android9.0,了解Android事件分发(一)
-
荐 布加迪奇龙Blender雕刻、shading,并导入Three.js ,3DWEB模型【Three.js+Blender建模+web前端+可视化】
-
详细解析C#多线程同步事件及等待句柄
-
python机器学习Github已达8.9Kstars模型解释器LIME
-
从香港宕机事件,看企业如何选择云服务
-
NetCore实现全局模型绑定异常信息统一处理(场景分析)
-
事件模型在各浏览器中存在差异_javascript技巧
-
jquery之遍历与事件