收藏

下载资源 加入VIP,免费下载

第1页 / 共17页

第2页 / 共17页

第3页 / 共17页

第4页 / 共17页

第5页 / 共17页

复制代码

1.3使用script标签的for和event属性（仅IE支持）

100px;height:

100px;background-color:

red">

alert（"clickedinIE"）

1.4attachEventh和detachEvent（仅ltIE11支持）---DOM2形式

100px;height:

100px;background-color:

red">

在IE11中:

对象不支持“attachEvent”属性或方法

1.5addEventListener和removeEventListener（gteIE9支持，chrome支持，ff支持）---DOM2形式

100px;height:

100px;background-color:

red">

在addEventListener中，第二个参数可以是函数也可以一个对象，要求该对象必须有handleEvent方法属性

复制代码

100px;height:

100px;background-color:

red">

onclick="removeListener（）"/>

复制代码

2.this的指向

2.1使用HTML事件属性

　　this指代绑定监听器的HTML元素

100px;height:

100px;background-color:

red"onclick="console.log（this）">

40px;height:

40px;background-color:

blue">

this指向myDiv

2.2给元素对象添加事件属性

　　this指向绑定监听器的HTML元素

复制代码

100px;height:

100px;background-color:

red">

40px;height:

40px;background-color:

blue">

functionclickHandler（）{

console.log（this）;

}

varmyDiv=document.getElementById（"myDiv"）;

myDiv.onclick=clickHandler;

复制代码

this指向myDiv

2.3使用script标签的for和event

　　this指代绑定监听器的HTML元素

复制代码

100px;height:

100px;background-color:

red">

40px;height:

40px;background-color:

blue">

console.log（this）;

复制代码

this指向myDiv

2.4使用attachEvent和detachEvent

　　this指向window对象

复制代码

100px;height:

100px;background-color:

red">

40px;height:

40px;background-color:

blue">

functionclickHandler（）{

console.log（this==window）;

}

varmyDiv=document.getElementById（"myDiv"）;

myDiv.attachEvent（"onclick",clickHandler）;

复制代码

打印结果:

true

2.5使用addEventListener和removeEventListener

　　this指代绑定监听器的HTML元素

复制代码

100px;height:

100px;background-color:

red">

40px;height:

40px;background-color:

blue">

functionclickHandler（）{

console.log（this）;

}

varmyDiv=document.getElementById（"myDiv"）;

myDiv.addEventListener（"click",clickHandler）;

复制代码

3.事件对象Event

IE各个版本会将Event对象绑定到window中，在需要使用Event对象时，只需window.event;

在使用DOM0方法注册事件时:

　　gteIE9的版本会将Event对象作为参数传递到处理函数中

在使用attachEvent方法注册事件时:

　　IE的各个版本Event对象作为参数传递到处理函数中

firefox会将Event对象作为参数传递到处理函数中

chrome:

两种都有

复制代码

100px;height:

100px;background-color:

red">

40px;height:

40px;background-color:

blue">

functionclickHandler（ev）{

console.log（ev）;

}

varmyDiv=document.getElementById（"myDiv"）;

myDiv.onclick=clickHandler;

复制代码

4.事件对象的属性和方法

4.1cancleBubble:

是否取消冒泡

4.1.1该属性在IE的各个版本都支持

复制代码

100px;height:

100px;background-color:

red">

40px;height:

40px;background-color:

blue">

functionparentCliked（ev）{

console.log（"parentclicked"）;

varev=ev?

ev:

window.event;

}

functionchildClicked1（ev）{

console.log（"childclicked1"）;

varev=ev?

ev:

window.event;

ev.cancelBubble=true;

}

functionchildClicked2（ev）{

console.log（"childclicked2"）;

varev=ev?

ev:

window.event;

}

varmyDiv=document.getElementById（"myDiv"）;

vard1=document.getElementById（'d1'）;

myDiv.onclick=parentCliked;

d1.attachEvent（"onclick",childClicked2）;

d1.attachEvent（"onclick",childClicked1）;

复制代码

IE中打印:

childclicked1

childclicked2

注意:

添加监听器的顺序

4.1.2chrome和firefox的高版本也支持

复制代码

100px;height:

100px;background-color:

red">

40px;height:

40px;background-color:

blue">

functionparentCliked（ev）{

console.log（"parentclicked"）;

varev=ev?

ev:

window.event;

}

functionchildClicked1（ev）{

console.log（"childclicked1"）;

varev=ev?

ev:

window.event;

ev.cancelBubble=true;

}

functionchildClicked2（ev）{

console.log（"childclicked2"）;

varev=ev?

ev:

window.event;

}

varmyDiv=document.getElementById（"myDiv"）;

vard1=document.getElementById（'d1'）;

myDiv.onclick=parentCliked;

d1.addEventListener（"click",childClicked1）;

d1.addEventListener（"click",childClicked2）;

复制代码

打印出:

childclicked1

childclicked2

4.2stopPropagation（）:

取消冒泡

　　bubbles:

返回boolean值，判断当前事件能否冒泡（只读）

只有使用addEventListener方法添加的监听器，该属性才有效（即使在IE中）

复制代码

100px;height:

100px;background-color:

red">

40px;height:

40px;background-color:

blue">

functionparentCliked（ev）{

console.log（"parentclicked"）;

varev=ev?

ev:

window.event;

}

functionchildClicked1（ev）{

console.log（"childclicked1"）;

varev=ev?

ev:

window.event;

ev.stopPropagation（）;

}

functionchildClicked2（ev）{

console.log（"childclicked2"）;

varev=ev?

ev:

window.event;

}

varmyDiv=document.getElementById（"myDiv"）;

vard1=document.getElementById（'d1'）;

myDiv.onclick=parentCliked;

d1.addEventListener（"click",childClicked1）;

d1.addEventListener（"click",childClicked2）;

复制代码

打印出:

childclicked1

childclicked2

4.3stopImmediatePropagation（）:

取消冒泡，监测该事件的其他监听器都停止工作

只有使用addEventListener方法添加的监听器，该属性才有效

复制代码

100px;height:

100px;background-color:

red">

40px;height:

40px;background-color:

blue">

functionparentCliked（ev）{

console.log（"parentclicked"）;

varev=ev?

ev:

window.event;

}

functionchildClicked1（ev）{

console.log（"childclicked1"）;

varev=ev?

ev:

window.event;

ev.stopImmediatePropagation（）;

}

functionchildClicked2（ev）{

console.log（"childclicked2"）;

varev=ev?

ev:

window.event;

}

varmyDiv=document.getElementById（"myDiv"）;

vard1=document.getElementById（'d1'）;

myDiv.onclick=parentCliked;

d1.addEventListener（"click",childClicked1）;

d1.addEventListener（"click",childClicked2）;

复制代码

打印出:

childclicked1

4.4cancelable和preventDefault（）;

preventDefault（）方法阻止默认行为

cancelable:

返回boolean值，判断能否阻止默认行为（只读）

只有使用addEventListener方法添加的监听器，该属性才有效

复制代码

clickhere

复制代码

cancelable是只读的

复制代码

复制代码

即使设置了cancelable=true,仍然能阻止默认行为

4.5returnValue:

是否取消默认行为，设置为false则取消默认行为是IE浏览器特有的属性

复制代码

clickhere

复制代码

复制代码

clickhere

复制代码

IE中:

　　当使用attachEvent注册监听器时，可以使用参数ev或者window.event来设置returnValue;

　　当使用addEventListener注册监听器时

　　　　IE9,10window.event.returnValue=false;或者ev.preventDefault（）;

　　　　IE11ev.preventDefault（）或者window.event.preventDefault（）;

　　当使用obj.onclick=clickHandler形式时

　　　　　　IE9，10，11支持参数传递，但是参数ev对象中没有returnValue属性，通过ev参数来设置行不通

　　　　　　IE5~10可以使用window.event.returnValue=false来阻止默认行为

　　　　　　IE11:

window.event没有returnValue属性，设置失败

综上:

　　IE浏览器5，6，7，8，9，10都能使用attachEvent来注册监听，使用此方法生成的Event对象是具有IE特性的对象，里面包含了cancelBubble,returnValue等IE标志

　　IE11废弃了对attachEvent的支持

　　IE9,10,11实现了对addEventListener的支持，该方法生成的Event对象是符合DOM标准的

　　IE9,10的ev对象是DOM标准对象，window.event是IE私有对象

　　IE11的ev对象和window.event都是DOM标准对象

DOM标准对象中没有IE私有属性

4.6srcElement、target、currentTarget

srcElement只在IE浏览器中存在，不管以addEventListener还是attachEvent

它指向触发事件的元素，而不是绑定事件的元素

currentTarget和target:

只有使用addEven