DOM事件的级别
DOM事件的级别,准确来说,是DOM标准定义的级别。包括:
- DOM0的写法:
element.onclick = function () {}
上边的代码是在js中的写法,如果要在HTML中写,写法是在onclick属性中,写js语句。
- DOM2的写法:
element.addEventListener('click', function() {}, false);
【重要】:上边的第三个参数,true表示事件在捕获阶段出发,false表示事件在冒泡阶段触发(默认)。如果不写,则默认为false。
- DOM3的写法:
element.addEventListener('keyup', function(){}, false)
DOM3中,增加了很多事件类型,比如鼠标事件、键盘事件等。
PS:为何事件没有DOM1的写法呢?因为DOM1标准制定的时候,没有涉及与事件相关的内容。
DOM事件模型
DOM事件模型讲的就是捕获和冒泡。
- 捕获:从上往下。
- 冒泡:从下(目标元素)往上。
DOM事件流
DOM事件流讲的就是:浏览器在与当前页面做交互时,这个事件是怎么传递到页面上的。
-
完整的事件流,分三个阶段:
- 捕获:从window对象传到目标元素;
- 目标阶段:事件通过捕获,到达目标元素,这个阶段就是目标阶段;
- 冒泡:从目标元素传到window对象。
-
描述DOM事件捕获的具体流程
- 捕获的流程:
- 说明:捕获阶段,事件依次传递的顺序是:
window
->document
->html
->body
-> 父元素、子元素、目标元素。
代码如下:
- 捕获的流程:
window.addEventListener('click', function() {
alert('捕获 window');
}, true);
document.addEventListener('click', function() {
alert('捕获 document');
}, true);
document.documentElement.addEventListener('click', function() {
alert('捕获 html');
}, true);
document.body.addEventListener('click', function() {
alert('捕获 body');
}, true);
fatherBox.addEventListener('click', function() {
alert('捕获 father');
}, true);
childBox.addEventListener('click', function() {
alert('捕获 child');
}, true);
-
在js中,获取body节点:
document.body
;获取html节点:document.documentElement
-
冒泡的流程:与捕获的流程相反。
-
Event对象常见的api方法
- 方法1;阻止默认事件
event.preventDefault();
- 方法2:阻止冒泡
- w3c的方法(火狐、谷歌、IE11)
event.stopPropagation();
- IE10以下则是:
event.cancelBubble = true;
- w3c的方法(火狐、谷歌、IE11)
兼容代码如下:
box.onclick = function (event) { alert('child'); // 阻止冒泡 event = event || window.event; if (event && event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } }
- 方法3:设置事件优先级
event.stopImmediatePropagation();
这个方法的解释如下:
比如说,我用addEventListener给某按钮同时注册了事件A、事件B。此时,如果我单击按钮,就会依次执行事件A和事件B。现在要求:单击按钮时,只执行事件A,不执行事件B。该怎么做呢?这是时候,就可以用到stopImmediatePropagation方法了。做法是:在事件A的响应函数中加入这句话。
- 属性4、属性5(事件委托中使用)
event.currentTarget // 当前所绑定的事件对象。在事件委托中,指的是【父元素】。 event.target // 当前被点击的元素,在事件委托中,指的是【子元素】。
- 方法1;阻止默认事件
自定义事件
- 代码如下:
var myEvent = new Event('clickTest'); element.addEventListener('clickTest', function () { console.log('触发了clickTest事件') }) // 元素注册事件 element.dispatchEvent(myEvent); //注意:参数是写事件对象myEvent,不是写事件名
- 上面这个事件是定义完了之后,就直接自动触发了。在正常的业务中,这个事件一般是和别的事件结合使用的,比如延时器设置按钮的动作
var myEvent = new Event('clickTest'); element.addEventListener('clickTest', function () { console.log('触发了clickTest事件') }); setTimeout(function () { element.dispatchEvent(myEvent); //注意,参数是写事件对象 myEvent,不是写 事件名 clickTest }, 1000);