event的公共成员

有关阅读:

一、事件

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

二、事件流

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

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

JavaScript事件学习小结事件流

三、事件管理程序

金沙js8331,//www.jb51.net/article/86261.htm

四、IE事件管理程序

javaScript事件学习小结

上述内容见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>

运行结果为:

金沙js8331 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(State of Qatar能够阻止之后事件管理程序被调用。

举例:

金沙js8331 2金沙js8331 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

 

运作效果:

金沙js8331 4

a、对比currentTarget和target

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
}

 

例子:

金沙js8331 5金沙js8331 6

<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

运作效果:

金沙js8331 7

在事件管理程序内部,对象this始终等于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,因知识本人在转换,小编也在再三学习成长,小说内容也不安时更新,为幸免误导读者,方便追根求源,请各位转发评释出处:有标题应接与自己谈谈,协同提升。

比喻:页面有个按键,在body中注册click事件,点开关时click事件会冒泡到body进行拍卖。

 document.body.onclick=function{ console.log; console.log("this===event.currentTarget&amp;#63; "+(this===event.currentTarget)); //true console.log("currentTarget===document.body&amp;#63;"+(event.currentTarget===document.body)); //true console.log('event.target===document.getElementById&amp;#63; '+(event.target===document.getElementById; //true }

b、通过type属性,能够在二个函数中管理多少个事件。

原理:通过检查测验event.type属性,对差异事件开展分化处理。

比喻:定义二个handler函数用来拍卖3种事件:click,mouseover,mouseout。

var handler=function{ switch { case "click": alert; break; case "mouseover": event.target.style.backgroundColor="pink"; break; case "mouseout": event.target.style.backgroundColor=""; }}; var btn=document.getElementById; btn.onclick=handler; btn.onmouseover=handler; btn.onmouseout=handler;

运作效果:点击按键,弹出框。鼠标经过按键,开关背景象变为巴黎绿;鼠标离开按键,背景观复苏默许。

c、stopPropagation()和stopImmediatePropagation()对比

同:stopPropagation(卡塔尔(قطر‎和
stopImmediatePropagation(卡塔尔都足以用来裁撤事件的尤为捕获或冒泡。

异:二者的区分在于当二个事变有多少个事件管理程序时,stopImmediatePropagation(State of Qatar能够阻碍之后事件管理程序被调用。

 var btn=document.getElementById; btn.addEventListener("click",function{ console.log("buttn click listened once");// event.stopPropagation();//&#21462;&#28040;&#27880;&#37322;&#26597;&#30475;&#25928;&#26524;// event.stopImmediatePropagation; btn.addEventListener{ console.log("button click listened twice"); },false); document.body.onclick= function  { console.log; }

d、eventPhase

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

var btn=document.getElementById;btn.onclick= function  { console.log("&#25353;&#38062;DOM0&#32423;&#26041;&#27861;&#28155;&#21152;&#20107;&#20214;&#22788;&#29702;&#31243;&#24207;eventPhase&#20540;&#20026;&#65311;"+event.eventPhase);}btn.addEventListener("click",function{ console.log("&#25353;&#38062;DOM2&#32423;&#26041;&#27861;&#28155;&#21152;&#20107;&#20214;&#22788;&#29702;&#31243;&#24207;&#65292;&#19988;addEventListener&#31532;&#19977;&#20010;&#21442;&#25968;&#20026;true&#26102;eventPhase&#20540;&#20026;&#65311;"+event.eventPhase);},true);btn.addEventListener("click",function{ console.log("&#25353;&#38062;DOM2&#32423;&#26041;&#27861;&#28155;&#21152;&#20107;&#20214;&#22788;&#29702;&#31243;&#24207;&#65292;&#19988;addEventListener&#31532;&#19977;&#20010;&#21442;&#25968;&#20026;false&#26102;eventPhase&#20540;&#20026;&#65311;"+event.eventPhase);},false); document.body.addEventListener("click", function  { console.log("body&#19978;&#28155;&#21152;&#20107;&#20214;&#22788;&#29702;&#31243;&#24207;&#65292;&#19988;&#22312;&#25429;&#33719;&#38454;&#27573;eventPhase&#20540;&#20026;&#65311;"+event.eventPhase); },true);document.body.addEventListener("click", function  { console.log("body&#19978;&#28155;&#21152;&#20107;&#20214;&#22788;&#29702;&#31243;&#24207;&#65292;&#19988;&#22312;&#20882;&#27873;&#38454;&#27573;eventPhase&#20540;&#20026;&#65311;"+event.eventPhase);},false);

2、IE中event的国有成员

IE中的event的习性和章程和DOM同样会趁机事件类型的比不上而分歧,可是也可以有一对是具有目的都有的公共成员,且那么些成员超过一半有相应的DOM属性或情势。

上述所述是作者给我们介绍的javaScript事件学习小结的有关文化,希望对大家享有助于,若是大家有疑点迎接给小编留言!

相关文章

发表评论

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