DOM事件相关总结

前端程序猿微凉

于 2022-01-21 10:34:23 发布

阅读量684

点赞数 1

分类专栏： jacascript web前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_55953988/article/details/122615820

版权

本文深入探讨了DOM事件的三个级别：DOM 0级、2级和3级事件，详细阐述了DOM事件模型和事件流，特别强调了事件代理的概念及其优势，并举例说明了Event对象的常用方法，如preventDefault()、stopPropagation()和stopImmediatePropagation()，以及target和currentTarget的区别。

摘要由CSDN通过智能技术生成

event. preventDefault()

event.stopPropagation() & event.stopImmediatePropagation()

event.target & event.currentTarget

五、参考文章

前言

本文主要介绍DOM事件级别、DOM事件模型、事件流、事件代理和Event对象常见的应用，希望对大家有些帮助和启发！

一、DOM事件级别

DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM 0级事件处理，DOM 2级事件处理和DOM 3级事件处理。由于DOM 1级中没有事件的相关内容，所以没有DOM 1级事件。

1.DOM 0级事件

el.οnclick=function(){}

// 例1
var btn = document.getElementById('btn');
 btn.onclick = function(){
     alert(this.innerHTML);
 }

当希望为同一个元素/标签绑定多个同类型事件的时候（如给上面的这个btn元素绑定3个点击事件），是不被允许的。DOM0事件绑定，给元素的事件行为绑定方法，这些方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的。

2.DOM 2级事件

el.addEventListener(event-name, callback, useCapture)

event-name: 事件名称，可以是标准的DOM事件
callback: 回调函数，当事件触发时，函数会被注入一个参数为当前的事件对象 event
useCapture: 默认是false，代表事件句柄在冒泡阶段执行

// 例2
var btn = document.getElementById('btn');
btn.addEventListener("click", test, false);
function test(e){
    e = e || window.event;
    alert((e.target || e.srcElement).innerHTML);
    btn.removeEventListener("click", test)
}
//IE9-:attachEvent()与detachEvent()。
//IE9+/chrom/FF:addEventListener()和removeEventListener()

IE9以下的IE浏览器不支持 addEventListener()和removeEventListener()，使用 attachEvent()与detachEvent() 代替，因为IE9以下是不支持事件捕获的，所以也没有第三个参数，第一个事件名称前要加on。