码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript事件对象

时间:2018-02-09 20:21:29      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:class   程序   mil   属性   div   efault   add   win   停止   

1、DOM中的事件对象

兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法(DOM0 级或 DOM2 级),都会传入 event 对象。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event.type); //"click"
};
btn.addEventListener("click", function(event){
alert(event.type); //"click"
}, false);

(1)type:获取事件类型

(2)target:获取事件目标

在事件处理程序内部,对象 this 始终等于 currentTarget 的值,而 target 则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则 this 、 currentTarget 和 target 包含相同的值。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event.currentTarget === this); //true
alert(event.target === this); //true
};

这个例子检测了 currentTarget 和 target 与 this 的值。由于 click 事件的目标是按钮,因此这三个值是相等的。

如果事件处理程序存在于按钮的父节点中(例如 document.body ),那么这些值是不相同的

document.body.onclick = function(event){
alert(event.currentTarget === document.body); //true
alert(this === document.body); //true
alert(event.target === document.getElementById("myBtn")); //true
}; 

当单击这个例子中的按钮时, this 和 currentTarget 都等于 document.body ,因为事件处理程序是注册到这个元素上的。然而, target 元素却等于按钮元素,因为它是 click 事件真正的目标。由于按钮上并没有注册事件处理程序,结果 click 事件就冒泡到了 document.body ,在那里事件才得到
了处理。

(3)stopPropagation():阻止事件冒泡

(4)preventDefault:取消事件的默认行为

注意:只有在事件处理程序执行期间, event 对象才会存在;一旦事件处理程序执行完成, event 对象就会被销毁

2、IE中的事件对象

(1)type:获取事件类型

(2)srcElement:获取事件目标

因为事件处理程序的作用域是根据指定它的方式来确定的,所以不能认为 this 会始终等于事件目标。故而,最好还是使用 event.srcElement 比较保险。

var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert(window.event.srcElement === this);  //true
};
btn.attachEvent("onclick", function(event){
alert(event.srcElement === this);  //false
});

在第一个事件处理程序中(使用 DOM0 级方法指定的), srcElement 属性等于 this ,但在第二个事件处理程序中,这两者的值不相同。

 

(3)cancelBubble:阻止事件冒泡的属性

(4)returnValue:取消事件的默认行为的属性

returnValue 属性相当于 DOM中的 preventDefault() 方法,它们的作用都是取消给定事件的默认行为。只要将 returnValue 设置为 false ,就可以阻止默认行为。

var link = document.getElementById("myLink");
link.onclick = function(){
window.event.returnValue = false;
};

cancelBubble 属性与 DOM 中的 stopPropagation() 方法作用相同,都是用来停止事件冒泡的。由于 IE 不支持事件捕获,因而只能取消事件冒泡;但 stopPropagatioin() 可以同时取消事件捕获和冒泡。

var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("Clicked");
window.event.cancelBubble = true;
};
document.body.onclick = function(){
alert("Body clicked");
}; 

3、跨浏览器的事件对象

var EventUtil = {
addHandler: function(element, type, handler){
//省略的代码
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler){
//省略的代码
},
stopPropagation: function(event){if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};

window.event:IE8以及以下获取event对象。

 

JavaScript事件对象

标签:class   程序   mil   属性   div   efault   add   win   停止   

原文地址:https://www.cnblogs.com/mengfangui/p/8436080.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!