DOM事件类

Posted 2022-07-04 sunww

1、DOM级别和DOM事件级别

DOM级别：DOM0级、DOM1级、DOM2级、DOM3级

DOM事件级别：DOM0级事件处理、DOM2级事件处理、DOM3级事件处理

1) DOM0级事件

　　<botton type="button" onclick="showFn()"></button>

　　function showFn() alert("hello world")

　　缺点：html和JS耦合性太强

　　优点：不需要操作DOM来完成事件的绑定

　　<button type="button" id="btn"></button>

　　var btn = document.getElementById("btn");

　　btn.onclick = function() console.log("hello world")

　　缺点：DOM0级事件处理程序无法同时绑定多个处理函数

2) DOM2级事件

　　DOM2级事件无法同时绑定多个处理函数，允许给一个程序添加多个处理函数。

　　<button type="button" id="btn"></button>

　　var btn = document.getElementById("btn");

　　function showFn() alert("hello world")

　　btn.addEventListener(‘click‘, showFn, false);  // 鼠标点击事件

　　// btn.removeEventListener(‘click‘, showFn, false); // 解绑事件　　

　　btn.addEventListener("mouseover", showFn, false); // 鼠标移入事件　　

　　IE8以下版本不支持 addEventListener 和 removeEventListener，需要使用 attachEvent 和 detachEvent 实现：

　　btn.attachEvent(‘onclick‘, showFn);

　　btn.detachEvent(‘onclick‘, showFn);

　　注：IE8以下版本只支持冒泡型事件

2、DOM事件模型是什么：指的是冒泡和捕获

3、DOM事件流是什么：捕获阶段 -> 目标阶段 -> 冒泡阶段

4、描述DOM事件捕获的具体流程：window -> document -> documentElement -> body -> ... -> 目标对象

5、Event对象的常见应用

　　event.preventDefault(); // 阻止默认行为

　　event.stopPropagation(); // 阻止事件冒泡

　　event.stopImmeddiatePropagation(); // 阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上，不接受任何参数

　　event.currentTarget; // 返回绑定事件的元素

　　event.target; // 返回触发事件的元素