这篇文章主要介绍了 JavaScript 事件, 告诉大家 "事件对象" 的注意要点,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在触发 DOM 上的某个事件时,会产生一个事件对象 event。
DOM 中的事件对象
兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。event 对象包含与创建它的特定事件有关的属性和方法。除法的事件类型不一样,可用的属性方法就不一样。不过,所有的事件都会有下表列出的成员。
下面列出了 2 级 DOM 事件标准定义的属性:
下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法:
this、target、currentTarget
在事件处理程序的内部,对象 this 始终等于 currentTarget 的值,而 target 则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则 this、currentTarget 和 target 包含相同的值。如:
- var btn = document.querySelector("#btn");
- btn.onclick=function () {
- console.log(event.currentTarget === this); //true
- console.log(event.target === this); //true
- }
由于 click 事件的目标是 btn 按钮,所以这三个值是相等的。如果事件处理程序在按钮的父节点(document.body)中,那么这些值则不相同。如:
- var btn = document.querySelector("#btn");
- document.body.onclick=function () {
- console.log(event.currentTarget === document.body); //true
- console.log(this === document.body); //true
- console.log(event.target === btn); //true 因为btn没有注册事件处理程序,所以该click事件就冒泡到了document.body
- }
在这里,this 和 currentTarget 都是 document.body,因为事件处理程序是注册到这个元素上的。但是 target 元素却等于按钮元素,因为它是 click 事件的真正目标。由于按钮并没有注册事件处理程序,结果 click 事件就冒泡到了 document.body,在那里事件才能得到处理。
type
在需要通过一个函数处理多个事件时,可以使用 type 属性。如:
- //获取按钮
- var btn = document.querySelector("#btn");
- //设置多个事件
- var handler = function() {
- //检测事件的类型
- switch (event.type) {
- case "click":
- console.log("i click it");
- break;
- case "mouseover":
- console.log("i enter it");
- break;
- case "mouseout":
- console.log("i leave it");
- break;
- }
- }
- //给响应的事件赋值
- btn.onclick = handler;
- btn.onmouseover = handler;
- btn.onmouseout = handler;
- preventDefault()
要阻止特定事件的默认行为,可以使用该方法。如:
- var aTags = document.getElementsByTagName("a");
- for (var i = 0; i < aTags.length; i++) {
- var currentATag = aTags[i];
- currentATag.onclick = function() {
- event.preventDefault();
- }
- };
以上代码即屏蔽了网页上全部的 a 标签超链接功能。要注意的是,只有 cancelable 属性设置为 true 的事件,才可以使用 preventDefault() 来取消其默认行为。
stopPropagation()
立即停止事件在 DOM 层次中的传播,即取消进一步的事件捕获或冒泡。例如,直接添加到一个按钮的事件处理程序可以调用该方法,从而避免触发注册在 document.body 上面的事件处理程序。如:
- var btn = document.getElementById("btn");
- btn.onclick = function () {
- console.log("btn clicked");
- // event.stopPropagation();
- };
- window.onclick = function () {
- console.log("clicked");
- };
- //单击一下的结果:
- //btn clicked
- //clicked
又如:
- var btn = document.getElementById("btn");
- btn.onclick = function () {
- console.log("btn clicked");
- event.stopPropagation();
- };
- window.onclick = function () {
- console.log("clicked");
- };
- //单击一下的结果:
- //btn clicked
eventPhase
该属性用来确定事件当前正位于事件流的哪个阶段。
1、如果是捕获阶段则等于 1;
2、如果是目标对象阶段则等于 2;
3、如果是冒泡阶段则等于 3;
如:
- var btn = document.getElementById("btn");
- document.body.addEventListener("click",
- function() {
- console.log("bodyListener" + event.eventPhase);
- },
- true) //捕获阶段
- btn.onclick = function() {
- console.log("btn" + event.eventPhase);
- } //目标对象阶段,实际上属于冒泡阶段(在btn上)
- document.body.onclick = function() {
- console.log("body" + event.eventPhase);
- } //冒泡阶段(在body上)
又如:
- var btn = document.getElementById("btn");
- document.body.addEventListener("click",
- function() {
- console.log(event.eventPhase); //1
- console.log(event.currentTarget); //htmlBodyElement
- },
- true);
- btn.addEventListener("click",
- function() {
- console.log(event.eventPhase); //2
- console.log(event.currentTarget); //HTMLInputElement
- });
- document.body.addEventListener("click",
- function() {
- console.log(event.eventPhase); //3
- console.log(event.currentTarget); //HTMLBodyElement
- });
流程大概是:
document.body 捕获阶段 --> btn 目标对象阶段 --> document.body 冒泡阶段
来源: http://www.phperz.com/article/17/0221/267580.html