JS事件分析
1.注册事件
1.1使用HTML元素的事件属性
onmouseover="javascript:mouseOverHandler()">
1.2给元素对象添加事件属性---DOM0形式
复制代码
复制代码
1.3使用script标签的for和event属性(仅IE支持)
alert("clickedinIE")
1.4attachEventh和detachEvent(仅ltIE11支持)---DOM2形式
在IE11中:对象不支持“attachEvent”属性或方法
1.5addEventListener和removeEventListener(gteIE9支持，chrome支持，ff支持)---DOM2形式
在addEventListener中，第二个参数可以是函数也可以一个对象，要求该对象必须有handleEvent方法属性
复制代码
onclick="removeListener()"/>
复制代码
2.this的指向
2.1使用HTML事件属性
this指代绑定监听器的HTML元素
this指向myDiv
2.2给元素对象添加事件属性
this指向绑定监听器的HTML元素
复制代码
functionclickHandler(){
console.log(this);
}
varmyDiv=document.getElementById("myDiv");
myDiv.onclick=clickHandler;
复制代码
this指向myDiv
2.3使用script标签的for和event
this指代绑定监听器的HTML元素
复制代码
console.log(this);
复制代码
this指向myDiv
2.4使用attachEvent和detachEvent
this指向window对象
复制代码
functionclickHandler(){
console.log(this==window);
}
varmyDiv=document.getElementById("myDiv");
myDiv.attachEvent("onclick",clickHandler);
复制代码
打印结果:true
2.5使用addEventListener和removeEventListener
this指代绑定监听器的HTML元素
复制代码
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:两种都有
复制代码
functionclickHandler(ev){
console.log(ev);
}
varmyDiv=document.getElementById("myDiv");
myDiv.onclick=clickHandler;
复制代码
4.事件对象的属性和方法
4.1cancleBubble:是否取消冒泡
4.1.1该属性在IE的各个版本都支持
复制代码
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的高版本也支持
复制代码
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中)
复制代码
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方法添加的监听器，该属性才有效
复制代码
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是只读的
复制代码
clickhere
复制代码
即使设置了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:只有使用addEventListener方法添加的监听器，该属性才有效。
4.7relatedTarget、fromElement、toElement
发生mouseover和mouseout事件时，还会涉及更多的元素。这两个事件都会涉及把鼠标指针从一个元素的边界之内移到另一个元素边界之内。对mouseover事件而言，事件的主目标是获得光标的元素，而相关元素就是那个失去光标的元素。类似地，对mouseout事件而言，事件的主目标是失去光标的元素，而相关元素则是获得光标的元素。
DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值；对于其他事件，这个属性的值是null。IE不支持realtedTarget属性，但提供了保存着同样信息的不同属性。在mouseover事件触发时，IE的fromElement属性中保存了相关元素；在mouseout事件出发时，IE的toElement属性中保存着相关元素。
兼容性写法:
复制代码
if(event.relatedTarget)
{
returnevent.relatedTarget;
}elseif(event.fromElement)
{
returnevent.fromeElement;
}elseif(event.toElement)
{
returnevent.toElement;
}else{
returnnull;
}
|
|
