事件机制
1.什么是事件?
在文档中,可以被识别的控件的操作就是事件。点击鼠标,select选择内容,光标定位等等... 2.事件流
事件执行的先后顺序就是事件流。 事件流分为2种:冒泡事件流和捕获事件流
冒泡事件流是微软提出的事件处理机制。
网景公司提出的事件流是捕获事件流
W3C制定标准:
标准事件流:分为三个阶段。 1.事件流的捕获阶段 2.处于事件阶段 3.事件流的冒泡阶段
目前世界上的大部分浏览器都实现了标准的事件流操作,IE9+,chrome,safari,opera,firefox ,其他版本尤其是IE8以下都没有实现标准事件流,只存在冒泡事件流,不过不需要太担心,因为绝大部分的常用事件都是处在冒泡流阶段。
事件流的处理机制: DOM0阶段
添加事件的方法: 方法1:添加事件
方法2:添加事件
var button=document.getElementsByTagName('button')[0]; button.onclick=function(){ }
删除事件的方法
var button=document.getElementsByTagName('button')[0]; button.onclick=null
DOM2阶段:
DOM2阶段为添加事件与删除事件提供了专用的方法来添加,可惜IE和非IE并不一样。 W3C标准的添加事件方法: addEventListener() 作用:为元素添加事件
格式:元素.addEventListener(‘事件名’,’事件方法’,布尔值)
alert('今天晚上别下雨就行');
参数:
1. 事件名称,使用事件单词,但是没有on,例如click 参数
2.就是一个函数,处理对应的事务,但是提倡写成声明函数不提倡匿名函数。(因为可能不止使用一次) 3.布尔值,设定事件发生的阶段是冒泡阶段(false)还是捕获阶段(true),默认是false,因为大部分浏览器都支持冒泡。
removeEventListener()
格式:元素.removeEventListener(‘事件名’,’事件方法’,布尔值) 参数:
1. 事件名称,使用事件单词,但是没有on,例如click 参数
4.就是一个函数,处理对应的事务,但是提倡写成声明函数不提倡匿名函数。(因为可能不止使用一次) 5.布尔值,设定事件发生的阶段是冒泡阶段(false)还是捕获阶段(true),默认是false,因为大部分浏览器都支持冒泡。
注意:移除事件的方法所使用的参数必须和添加事件的参数完全一致才可以删除
IE浏览器专用方法 attachEvent() 作用:添加事件方法
格式:元素.attachEvent(事件名,事件方法); 参数:
1.事件的名称,但是要写on,例如onclick
2.事件方法,推荐写成声明函数,而不是匿名函数,除非没有要删除的可能 detachEvent() 作用:删除事件方法
格式:元素.detachEvent(事件名,事件方法); 参数:
3.事件的名称,但是要写on,例如onclick
4.事件方法,推荐写成声明函数,而不是匿名函数,除非没有要删除的可能
兼容性的事件注册对象:
//事件工具对象 EventUtil={ //添加事件的方法 addHandler:function(element,type,func){ //检测是否支持addEventListener 非IE678 if(element.addEventListener){ element.addEventListener(type,func,false); //ie678