菜单

javaScript事件学习小结(四)event的公共成员(属性和方法)402.com:

2019年8月31日 - 计算机教程

相关阅读:

一、事件

JavaScript事件学习小结(五)js中事件类型之鼠标事件

二、事件流

//www.jb51.net/article/86259.htm

以上内容见:javaScript事件(一)事件流

JavaScript事件学习小结(一)事件流

三、事件处理程序

//www.jb51.net/article/86261.htm

四、IE事件处理程序

javaScript事件学习小结(四)event的公共成员(属性和方法)

以上内容见javaScript事件(二)事件处理程序

//www.jb51.net/article/86262.htm

五、事件对象

JavaScript事件学习小结(二)js事件处理程序

以上内容见javaScript事件(三)事件对象

//www.jb51.net/article/86264.htm

六、事件对象的公共成员

JavaScript事件学习小结(三)js事件对象

1、DOM中的event的公共成员

event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法不一样。但是,DOM中所有事件都有以下公共成员。【注意bubbles属性和cancelable属性】

属性/方法 类型 读/写 说明
bubbles Boolean 只读    表明事件是否冒泡
stopPropagation() Function 只读 取消事件的进一步捕获或冒泡。如果bubbles为true,则可以使用这个方法
stopImmediatePropagation()  Function 只读 取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用(DOM3级事件中新增)
cancelable Boolean 只读 表明是否可以取消事件的默认行为
preventDefault() Function 只读 取消事件的默认行为。如果cancelable是true,则可以使用这个方法
defaultPrevented Boolean 只读 为true表示已经调用了preventDefault()(DOM3级事件中新增)
currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素(currentTarget始终===this,即处理事件的元素
target Element 只读 直接事件目标,真正触发事件的目标
detail Integer  只读 与事件相关的细节信息
eventPhase Integer 只读 调用事件处理程序的阶段:1表示捕获阶段,2表示处于目标阶段,3表示冒泡阶段
trusted Boolean 只读 为true表示事件是由浏览器生成的。为false表示事件是由开发人员通过JavaScript创建的(DOM3级事件中新增)
type String 只读 被触发的事件的类型
view AbstractView 只读 与事件关联的抽象视图。等同于发生事件的window对象

一、事件对象的公共成员

1、对比currentTarget和target

在事件处理程序内部,对象this始终等于currentTarget的值,而target则只是包含事件的实际目标。

举例:页面有个按钮,在body(按钮的父节点)中注册click事件,点按钮时click事件会冒泡到body进行处理。

<body>
<input id="btn" type="button" value="click"/>
<script>
    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
    }
</script>
</body>

运行结果为:

402.com 1

1、DOM中的event的公共成员

2、通过type属性,可以在一个函数中处理多个事件。

原理:通过检测event.type属性,对不同事件进行不同处理。

举例:定义一个handler函数用来处理3种事件:click,mouseover,mouseout。

<body>
<input id="btn" type="button" value="click"/>
<script>
var handler=function(event){
    switch (event.type){
        case "click":
            alert("clicked");
            break;
        case "mouseover":
            event.target.style.backgroundColor="pink";
            break;
        case "mouseout":
            event.target.style.backgroundColor="";
    }
};
    var btn=document.getElementById("btn");
    btn.onclick=handler;
    btn.onmouseover=handler;
    btn.onmouseout=handler;
</script>
</body>

运行效果:点击按钮,弹出框。鼠标经过按钮,按钮背景色变为粉色;鼠标离开按钮,背景色恢复默认。

event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法不一样。但是,DOM中所有事件都有以下公共成员。

3、stopPropagation()和stopImmediatePropagation()对比

同:stopPropagation()和
stopImmediatePropagation()都可以用来取消事件的进一步捕获或冒泡。

异:二者的区别在于当一个事件有多个事件处理程序时,stopImmediatePropagation()可以阻止之后事件处理程序被调用。

举例:

402.com 2402.com 3

<body>
<input id="btn" type="button" value="click"/>
<script>
    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");
    }
</script>
</body>

View Code

 

运行效果:

402.com 4

402.com 5

4、eventPhase

eventPhase值在捕获阶段为1,处于目标阶段为2,冒泡阶段为3。

常量
Event.CAPTURING_PHASE 1
Event.AT_TARGET 2
Event.BUBBLING_PHASE 3

可以通过下面代码查看:

var btn=document.getElementById("btn");
btn.onclick= function (event) {
console.log(event.CAPTURING_PHASE); //1
console.log(event.AT_TARGET); //2
console.log(event.BUBBLING_PHASE); //3
}

 

例子:

402.com 6402.com 7

<body>
<input id="btn" type="button" value="click"/>
<script>
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);
</script>

View Code

运行效果:

402.com 8

a、对比currentTarget和target

2、IE中event的公共成员

IE中的event的属性和方法和DOM一样会随着事件类型的不同而不同,但是也有一些是所有对象都有的公共成员,且这些成员大部分有对应的DOM属性或方法。

属性/方法 类型 读/写 说明
cancelBubble Boolean 读/写 默认为false,但将其设置为true就可以取消事件冒泡(与DOM中stopPropagation()方法的作用相同
returnValue Boolean 读/写 默认为true,但将其设置为false就可以取消事件的默认行为(与DOM中的preventDefault()方法的作用相同
srcElement Element 只读 事件的目标(与DOM中的target属性相同
type String 只读 被触发的事件的类型

七、鼠标事件

这部分内容见javaScript事件(五)事件类型之鼠标事件

 

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/4096198.html有问题欢迎与我讨论,共同进步。

在事件处理程序内部,对象this始终等于currentTarget的值,而target则只是包含事件的实际目标。

举例:页面有个按钮,在body(按钮的父节点)中注册click事件,点按钮时click事件会冒泡到body进行处理。

<body>
<input id="btn" type="button" value="click"/>
<script>
 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
 }
</script>
</body>

运行结果为:

402.com 9

b、通过type属性,可以在一个函数中处理多个事件。

原理:通过检测event.type属性,对不同事件进行不同处理。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图