1.什么是事件?
浏览器赋予元素天生默认的一些行为,不论是否绑定相关的方法,只要行为操作进行了,那么一定会触发相关的事件行为
2.什么是事件绑定?
给元素的某一个事件行为绑定方法,目的是行为触发后可以做点自己想做的事情
3.事件绑定 DOM0事件绑定/DOM2事件绑定
【DOM0事件绑定】
元素.onxxx=function(){}
元素.onxxx=null;
原理:给DOM元素对象的某一个私有事件属性赋值函数值,当用户触发这个事件行为,JS引擎会帮助我们把之前绑定的方法执行的
=>1.不是所有的事件类型都支持这种方式,元素有哪些onxxx事件属性,才能给其绑定方法(例如:DOMContentLoaded事件就不支持这种绑定方案)
=>2.只能给当前元素的某一个事件行为绑定一个方法(绑定多个也只能识别最后一个)
【DOM2事件绑定】
元素.addEventListener([事件类型],[方法],[传播模式])
元素.removeEventListener([事件类型],[方法],[传播模式])
function anonymous(){
console.log('ok');
}
box.addEventListener('click',anonymous,false);
box.removeEventListener('click',anonymous,false);
原理:基于原型链查找机制,找到EventTarget.prototype上的addEventListener方法执行,它是基于浏览器事件池机制完成事件绑定的
4.事件对象
当前元素的某个事件行为被触发,不仅会把绑定的方法执行,还会给绑定的方法传递一个实参,这个实参就是事件对象;事件对象就是用来存储当前行为操作相关信息的对象;(MosueEvent/KeyboardEvent/Event/TouchEvent...)
=>事件对象和在哪个方法中拿到的没关系,它记录的是当前操作的信息
给元素的事件行为绑定方法,当事件行为触发,方法会被执行,不仅被执行,而且还会把当前操作的相关信息传递给这个函数 => “事件对象”
—如果是鼠标操作,获取的是MouseEvent类的实例 => 鼠标事件对象
鼠标事件对象 -> MouseEvent.prototype -> UIEvent.prototype -> Event.prototype -> Object.prototype
—如果是键盘操作,获取的是KeyboardEvent类的实例 =>键盘事件对象
—除了以上还有:普通事件对象(Event)、手指事件对象(TouchEvent)等
鼠标事件对象
- clientX/clientY: 当前鼠标触发点距离当前窗口左上角的X/Y轴坐标
- pageX/pageY: 触发点距离当前页面左上角的X/Y轴坐标
- type: 触发事件的类型
- target: 事件源(操作的是哪个元素,哪个元素就是事件源),在不兼容的浏览器中可以使用srcElement获取,也代表的是事件源
- preventDefault(): 用来阻止默认行为的方法,不兼容的浏览器中用ev. returnValue=false也可以阻止默认行为
- stopPropagation(): 阻止冒泡传播,不兼容的浏览器中用ev.cancelBubble=true也可以阻止默认行为
let obj = null; .
box. addEventListener('click', function (ev) {
console.1og(ev);
obj = ev;
});
box . addEventListener( 'click', function (ev) {
console.1og(ev === obj); //=>true
});
document . body.onclick = function (ev) {
console.log(ev === obj); //=>true
}
事件对象和函数以及给谁绑定的事件没啥必然关系,它存储的是当前本次操作的相关信息,操作一次只能有一份信息,所以在哪个方法中获取的信息都是一样的;第二次操作,存储的信息会把上一次操作存储的信息替换掉…;
每一次事件触发,浏览器都会这样处理一下
- 捕获到当前操作的行为(把操作信息获取到),通过创建MouseEvent等类的实例,得到事件对象EV
- 通知所有绑定的方法(符合执行条件的)开始执行,并且把EV当做实参传递给每个方法,所以在每个方法中得到的事件对象其实都是一个
- 后面再重新触发这个事件行为,会重新获取本次操作的信息,用新的信息替换老的信息,然后继续之前的步骤…