事件的三要素:操作什么对象(元素对象),操作的类型(点击,移除,移入等),怎么操作(函数)
1、事件流:描述的是从页面中接受事件的顺序
IE:事件冒泡流
即事件最开始由最具体的元素接收,然后逐级向上传播至最不具体的那个节点
N:事件捕获流
不太具体的节点应该更早接收到事件,而具体的节点反而更晚接收到事件
2、事件处理程序
1)HTML事件处理程序:把事件直接添加到HTML结构中,缺点是js代码和html代码耦合在一起,不符合前端开发规范
2)DOM0级事件处理程序:较为传统的方式,把一个函数赋值给一个事件处理程序属性,优点在于简单,兼容跨浏览器,用的比较多;可以给一个对象添加多个事件
btn.onclick=function(){};
删除事件:btn.onclick=null;
3)DOM2级事件处理程序:
定义了2个方法,用于处理指定和删除事件处理程序的操作
addEventListener() 和removeEventListener()
接收3个参数:要处理的事件名,作为处理程序的函数和布尔值(true表示捕获事件,false表示在冒泡中处理)
对象.addEventListener("click",函数名,false); 注意:没有on ,函数名没有()
删除事件:用removeEventListener(),所接收的参数要一样
特点:可以给一个对象添加多个事件,按顺序执行
3、IE事件处理程序(IE 和 opera)
attachEvent() 添加事件
detachEvent() 删除事件
接收相同的2个参数:事件处理程序的名称和事件处理程序的函数
btn.attachEvent("onclick",函数名) 注意:onclick需要加上on
4、跨浏览器的事件处理程序:需要把事件处理程序封装到一个对象里,然后再调用这个对象的方法来实现
再封装的时候需要做能力的检测,支持DOM0级的,支持DOM2级的,支持IE事件处理程序的
封装代码:
var eventObJ = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
}
5、DOM中的事件对象:在触发DOM上的事件时都会产生一个对象,叫做事件对象event
event事件对象中常用的方法和属性
备注:IE8前的event通过window.event来引用
1)type:用于获取事件类型(click,mouseout)
2) target:目标,用于获取这个事件用于什么对象
3)stopProPagation() :阻止世界冒泡,语法:event.stopPropagation()
4)preventDefault() 用于阻止事件的默认行为,比如组织a标签默认的跳转行为。语法:event.preventDefault()
6、IE中的事件对象
1)type:用于获取事件类型(click,mouseout)
2)srcElement:目标,用于获取这个事件用于什么对象
3)cancelBubble: 用于阻止事件冒泡,true为阻止冒泡,false为不阻止冒泡
4)returnValue: 值是false,表示阻止事件默认行为
7、事件的类型:鼠标事件,