js事件对象2

这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战

事件对象：

事件触发，会传入一个对象,DOM中的事件对象event 属性：

1. curentTarget：事件处理程序当前正在处理事件的那个元素
2. target：目标元素
3. type：事件类型
4. eventPhase:调用程序的阶段

说明：

1. 事件处于目标阶段:currentTarget=target=this是相同的
2. 在DOM的事件处理程序中，currentTarget和this相等

方法:

1. stopPropagation()：取消事件冒泡或事件捕获
2. preventDefault():取消事件的默认行为，比如a链接点击一下就跳转

DOM0级事件处理

1. 事件处理函数被认为是元素的方法
2. 添加的事件在事件冒泡阶段被处理
3. 移出事件： 将元素的事件处理函数置为null
4. 其中的this指向当前运行的环境(处于冒泡和捕获阶段的this不是当前调用的元素)

var div=document.getElementById('myDiv');
div.onclick=function(){
	console.log(this);
}
//移除事件
div.onclick=null;

DOM2级事件处理

1. 添加事件处理：addEventListener()
2. 移除事件处理：removeEventListener()
3. 参数：事件名(eg：click,load)、事件处理函数、事件捕获/事件冒泡阶段阶段执行（布尔值） true:事件捕获阶段执行 false：事件冒泡阶段执行
4. 可以为同一个元素添加多个事件，按照添加的顺序执行
5. 移除事件和添加事件处理，参数必须一样，匿名函数没法移除
6. this指向当前的调用运行的环境

var btn1=document.getElementById('mybtn');
//给元素添加click事件处理函数，并在冒泡阶段处理
var handler=function(){
	console.log(this);
}
btn1.addEventListener('click',handler,false);
btn1.addEventListener('click',function(){
console.log(this.id);
},false);
//移除事件,事件必须要和添加事件处理的参数一样
btn1.removeEventListener('click',handler,false);

IE中的event对象

Dom0级定义： event对象window.event

attachEvnet中定义： event对象就是传入的参数对象

var btn1=document.getElementById('mybtn');
btn1.onclick=function(){
	console.log(window.event);
}
btn1.attachEvent('onclick',function(event){
	console.log(event);
})

属性:

1. cancelBubble：布尔值，阻止冒泡 stopPropagation()
2. returnValue：布尔值，fasle阻止默认行为 preventDefault()
3. srcElement:当前的元素 target