事件详解

之前注册事件的方法:on....,但是在多人开发的时候则会出现问题,会被后来写的覆盖掉。
btn.addEventListener('click',function(){
     alert('hello itheima');
})
addEventListener(事件名,方法)
有浏览器兼容性问题 在IE9之后才兼容
IE9以前通过attachEvent来兼容
attachEvent('on事件名',方法);
兼容处理:  直接是element.方法,如果有就是true
function addEventListener(element,eventName,fn) {
	if (element.addEventListener) {
		element.addEventListener(eventName,fn);
	}else if (element.attachEvent) {
		element.attachEvent ('on' +eventName,fn);
	}else {
		element['on' + eventName] =fn;
	}
}
移除事件:
1、btn.onclick=null;
2、btn.addEventListener('click',fn);
function fn(){
   btn.removeEventListener('click',fn);
}
3、与上一个类似,btn.detachEvent();
事件的三个阶段:
当addEventListener第三个参数是false的时候就是事件冒泡,从里往外触发事件。
如果第三个参数是true的时候是事件捕获,与事件冒泡相反。
onclick和attachEvent无法设置冒泡和捕获
onclick方法是事件冒泡形式
事件委托的原理就是事件冒泡,本该自己做的事情委托给父元素
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
事件参数e,默认存在的,当事件发生的时候可以获取到与事件相关的信息
e.target就是触发事件的真正元素
<ul class='meinv'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script type="text/javascript">
	var mn=document.getElementsByClassName("meinv")[0];
	mn.addEventListener('click',function(e) {
		alert(e.target.innerText);
	});
</script>
点击里面的li相当于点击外面的ul
事件对象,通过事件对象可以获得与事件相关的东西
e就是事件对象,在老版本的iE中通过window.event获取
兼容性处理:
e=e||window.event;
console.log(e.eventPhase)  1 捕获阶段 2 目标阶段 3 冒泡阶段
e.target 触发事件的源  有浏览器兼容,srcElement
e.currentTarget 事件元素所属的对象 相当于this
var target = e.target || e.srcElement;

e.type获取事件名称
e.clientX和e.clinetY可以获取触发事件时候鼠标的坐标,相对于浏览器可视区域的坐标。(忽略滚动条)
e.pageX和e.pageY 整个页面的位置

pageY=clientY + 页面滚动出去的距离
document.body.scrollTop
document.body.scrollLeft
或者
document.documentElement.scrollLeft
取消默认行为,组织默认行为
e.preventDefault();
e.returnValue = false;   //老版本

阻止事件冒泡
e.stopPropagation();

发表评论

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