基本概念
DOM事件模型
DOM事件模型就是
捕获
和冒泡
- 捕获:从上往下。
- 冒泡:从下(目标元素)往上。
DOM事件流
指的是事件传递的三个阶段。就是:浏览器在于当前页面做交互时,这个事件是怎么传递到页面上的。
- 捕获:从
window
对象传到 目标元素。 - 目标阶段:事件通过捕获,到达目标元素,这个阶段就是目标阶段。
- 冒泡:从目标元素传到
Window
对象。
DOM事件捕获的具体流程
捕获阶段,事件依次传递的顺序是:window --> document --> html–> body --> 父元素、子元素、目标元素。
冒泡的流程
与捕获的流程相反
Event对象的常见方法
- 阻止默认行为
event.preventDefault();
- 比如,已知 <a>标签绑定了click事件,此时,如果给<a>设置了这个方法,就阻止了链接的默认跳转。
- 阻止冒泡
event.stopPropagation();
- 例如:单击子元素时,子元素和父元素都会做相应处理。这个时候,就要用到阻止冒泡了。
两个重要属性(事件委托中用到)
event.currentTarget //当前所绑定的事件对象。在事件委托中,指的是【父元素】。
event.target //当前被点击的元素。在事件委托中,指的是【子元素】。
自定义事件
var myEvent = new Event('clickTest');
element.addEventListener('clickTest', function () {
console.log('clickTest');
});
//元素注册事件
element.dispatchEvent(myEvent); //注意,参数是写事件对象 myEvent,不是写 事件名 clickTest
DOM事件的级别
- DOM事件的级别,准确来说,是DOM标准定义的级别。包括:
- DOM0的写法:
element.onclick = function () {
//事件处理 ···
}
- DOM2的写法:
element.addEventListener('click', function () {
//事件处理 ···
}, false);
上面的第三参数中,true表示事件在
捕获
阶段触发,false表示事件在冒泡阶
段触发(默认)。如果不写,则默认为false。
- DOM3的写法:
element.addEventListener('keyup', function () {
//事件处理 ···
}, false);
DOM3中,增加了很多事件类型,比如鼠标事件、键盘事件等。