理解事件对象
追根溯源事件对象,才发现自己会的微不足道!
在触发DOM的事件的时候,浏览器会默认产生一个event对象,这个对象包含了所有与该事件有关的信息,比如:鼠标点击页面的某个按钮会让事件对象中包含对象的节点、鼠标的位置….等信息。
一:对于直接在html里写入的事件,通过变量event来输出event对象:
<input type="button" value="按钮3" onmouseover="console.log(event)">
二:event对象有是什么呢?不要怕,慢慢来看:
三:this、e.target和e.currentTarget的区别
在事件处理程序的内部,对象this始终等于currentTarget,而target则只包含事件的实际目标。
公共代码:
<input type="button" value="点击1" id="mybtn1">
<input type="button" value="点击2" id="mybtn2">
<input type="button" value="点击4" id="mybtn4">
<a href="http://www.baidu.com" id="mybtn3">百度</a>
情况一:直接将事件处理程序指定给目标(两者相等)
btn.addEventListener('mouseover',function(e){
console.log(e)
console.log(e.type); //mouseover
console.log(e.currentTarget);//<input type="button" value="点击" id="mybtn">
console.log(e.target); //<input type="button" value="点击" id="mybtn">
},false);
情况二:事件处理程序指定在按钮的父节点中(两者不相等)
document.body.onclick = function(e){
console.log(this); //body...</body>
console.log(e.currentTarget);//body...</body>
console.log(e.target); //<div id="mybtn2"></div>
}
总结各个情况:当eventPhase等于2的时候,this、target和currentTarget始终是相等的,其余别的情况,两者不相等。
btn4.onclick = function(e){
console.log(e.eventPhase); //2
}
document.body.addEventListener('click',function(e){
console.log(e.eventPhase); //1
},true);
document.body.onclick = function(e){
console.log(e.eventPhase); //3
}
四:一个函数处理多个事件的方法?
var handler = function(event){
switch(event.type){
case 'click':
alert('clicked');
break;
case 'mouseover':
event.target.style.backgroundColor = 'red';
break;
case 'mouseout':
event.target.style.backgroundColor = '';
break;
}
};
btn1.onclick = handler;
btn2.onmouseover = handler;
btn2.onmouseout = handler;
五:stopPropagation和preventDefault用法
//stopPropagation取消事件进一步捕获或者冒泡
//preventDefault取消事件默认行为
//defaultPrevented的值为true的时候表示调用了preventDefault()方法
btn3.onclick = function(e){
alert('click');
e.stopPropagation();
e.preventDefault();
console.log(e.defaultPrevented);//true
}
document.body.onclick = function(e){
alert('Body Clicked');
}
只有在事件处理程序执行的时候,event才会被创建,处理程序执行完成的时候event被销毁