相关阅读:
JavaScript事件学习小结(五)js中事件类型之鼠标事件
JavaScript事件学习小结(一)事件流
javaScript事件学习小结(四)event的公共成员(属性 和方法 )
JavaScript事件学习小结(二)js事件处理程序
JavaScript事件学习小结(三)js事件对象
一、事件对象的公共成员
1、DOM中的event的公共成员
event对象包含与创建它的特定事件有关的属性 和方法 。触发的事件类型不一样,可用的属性 和方法 不一样。但是,DOM中所有事件都有以下公共成员。
a、对比currentTarget和target
在事件处理程序内部,对象this始终等于currentTarget的值,而target则只是包含事件的实际目标。
举例:页面 有个按钮,在body(按钮的父节点)中注册 click事件,点按钮时click事件会冒泡到body进行处理。
document.body.onclick=function(event){
console.log("body中
注册 的click事件");
console.log("this===event.currentTarget? "+(this===event.currentTarget)); //true
console.log("currentTarget===document.body?"+(event.currentTarget===document.body)); //true
console.log('event.target===document.getElementById("btn")? '+(event.target===document.getElementById("btn"))); //true
}
@H_
502 _37@
运行结果为:
b、通过type属性 ,可以在一个函数 中处理多个事件。
原理:通过检测event.type属性 ,对不同事件进行不同处理。
举例:定义一个handler函数 用来处理3种事件:click,mouSEO ver,mouSEO ut。
var handler=function(event){
switch (event.type){
case "click":
alert("clicked");
break;
case "mou
SEO ver":
event.target.style.backgroundColor="pink";
break;
case "mou
SEO ut":
event.target.style.backgroundColor="";
}
};
var btn=document.getElementById("btn");
btn.onclick=handler;
btn.onmou
SEO ver=handler;
btn.onmou
SEO ut=handler;
@H_
502 _37@
运行效果 :点击按钮,弹出框。鼠标经过按钮,按钮背景色变为粉色;鼠标离开按钮,背景色恢复默认。
c、stopPropagation()和stopImmediatePropagation()对比
同:stopPropagation()和 stopImmediatePropagation()都可以用来取消事件的进一步捕获或冒泡。
异:二者的区别在于当一个事件有多个事件处理程序时,stopImmediatePropagation()可以阻止之后事件处理程序被调用 。
举例:
var btn=document.getElementById("btn");
btn.addEventListener("click",function(event){
console.log("buttn click listened once");
// event.stopPropagation();//取消注释查看
效果
// event.stopImmediatePropagation();//取消注释查看
效果
},false);
btn.addEventListener("click",function(){
console.log("button click listened twice");
},false);
document.body.onclick= function (event) {
console.log("body clicked");
}
@H_
502 _37@
运行效果 :
d、eventPhase
eventPhase值在捕获阶段为1,处于目标阶段为2,冒泡阶段为3。
例子:
var btn=document.getElementById("btn");
btn.onclick= function (event) {
console.log("按钮DOM0级
方法 添加 事件处理程序eventPhase值为?"+event.eventPhase);
}
btn.addEventListener("click",function(event){
console.log("按钮DOM2级
方法 添加 事件处理程序,且addEventListener第三个参数为true时eventPhase值为?"+event.eventPhase);
},true);
btn.addEventListener("click",function(event){
console.log("按钮DOM2级
方法 添加 事件处理程序,且addEventListener第三个参数为false时eventPhase值为?"+event.eventPhase);
},false);
document.body.addEventListener("click",function (event) {
console.log("body上
添加 事件处理程序,且在捕获阶段eventPhase值为?"+event.eventPhase);
},true);
document.body.addEventListener("click",function (event) {
console.log("body上
添加 事件处理程序,且在冒泡阶段eventPhase值为?"+event.eventPhase);
},false);
运行效果 :
2、IE中event的公共成员
IE中的event的属性 和方法 和DOM一样会随着事件类型的不同而不同,但是也有一些是所有对象都有的公共成员,且这些成员大部分有对应的DOM属性 或方法 。
以上所述是小编给大家介绍的javaScript事件学习小结(四)event的公共成员(属性 和方法 )的相关知识,希望对大家有所帮助,如果大家有疑问欢迎给我留言!
原文链接:https://www.f2er.com/js/48001.html