事件, 事件流, 事件委托
事件 :
一. 事件驱动程序的(三要素):
1. 事件 : javascript捕获用户的操作或是页面中的行为(如 : onclick, onmouseover, keydown等等)
2. 事件源 : 触发这个事件的元素(如 : 一个按钮, 一个按键等等)
3. 事件处理程序 : 为该事件被触发时所执行的程序,也称为"事件句柄"和"事件监听器"
二. 绑定事件(有兼容性问题)
1. 在 IE 中,给一个对象的同一事件添加或删除多个处理程序的方式:
对象 . attachEvent("on事件","处理程序"); 添加事件
对象 . detachEvent("on事件","处理程序"); 删除事件
注意 : 这两个方法内添加的事件的执行顺序与添加顺序相反;
无法删除匿名函数(因为找不到函数的引用);
2. 在 W3C 的标准浏览器中,给一个对象的同一事件添加或删除多个处理程序的方式:
对象 . addEventLisener("事件","处理程序",boolean); 添加事件
对象 . removeEventLisener("事件","处理程序",boolean); 删除事件
注意 : 这两个方法内添加的事件的执行顺序与添加顺序一致;
无法删除匿名函数(因为找不到函数的引用);
3. 每一个事件被触发时,程序都会为该事件产生一个临时的事件对象,这个对象包含了事件产生时的某些信息,当函数调用完后,这个对象被释放掉
代码展示(例子) : btn.onclick=function(e){
var ev = e || windown.event;
............................
}
解释 : 上面中的 e 就是点击事件时所产生的事件对象;
windown.event : 为IE中获取事件对象的方式
e : 为其他浏览器获取事件对象的方式
三. 鼠标事件(当鼠标事件被触发时,对应的事件对象有如下的属性:)
1. 鼠标相对于浏览器的位置 : clientX, clientY
2. 鼠标相对于屏幕的位置 : screenX, screenY
3. 鼠标相对于事件源(调用事件的对象)的位置 : offsetX, offsetY (不支持FF,FF需要通过计算)
4. onmouseover 鼠标移入某对象
5. onmouseout 鼠标移出某对象
6. onmouseup 鼠标抬起时
7. onmousedown 鼠标按下时
8. onmousemove 鼠标移动时
9. DOMMouseScroll 鼠标滚轮事件(FF)
此方法的事件对象的属性有 : detail (若为正值,表示鼠标滚轮向下滑;负值,向上滑)
10. onmousewheel 鼠标滚轮事件(IE,chrom)
此方法的事件对象的属性有 : wheelDelta(若为正值,表示鼠标滚轮向上滑;负值,向下滑)
(百度出来的)event 的某些属性值得到这些信息：
1. “mousewheel” 事件中的 “event.wheelDelta” 属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。
2. “DOMMouseScroll” 事件中的 “event.detail” 属性值：返回的值，如果是负值说明滚轮是向上滚动（与 “event.wheelDelta” 正好相反），如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数，即：幅度大小 = 返回的值 / 3。
四. 键盘事件
1. keydown 按下键盘按键时
2. keyup 抬起键盘按键时
3. keypress 按住键盘按键时
4. keyCode enter : 13
shift : 16
ctrl : 17
alt : 18
5. altkey, ctrlkey, shiftkey : 是否按下对应的键,是返回true,否返回false;
五. 检测事件类型 : type="事件"
例如 : type = "click"; 表示该事件的类型为点击事件
事件流
一. 事件流(IE只支持冒泡型事件)
1. 冒泡型事件 : 从里往外冒泡;如果被点击的对象没有设置事件,但其仍然是事件源(点击哪个,哪个就是事件源),只是没有给它设置相应的事件,此时,它会把这个事件委托给其外层的对象;如果这个事件源里有需要执行的程序,这个程序会被执行之后再继续向外冒泡.(addEventLisener("事件",foo,false))
2. 捕获型事件 : 从最外层往里冒泡(最外层可到达window对象),(addEventLisener("事件",foo,true))
二. DOM标准的事件模型(冒泡和捕获都支持),当绑定了捕获和冒泡程序时,先执行捕获,在执行冒泡
三. 阻止事件流
1. IE : 事件对象 . cancelBubble = true;
2. FF : 事件对象 . stoppropagation;
解释 : 在A对象添加的方法内设置上面的两个属性,点击A对象,若为冒泡型,则冒泡到该对象就不会继续扩展了;
若为捕获型,则从最外层捕获到这层时,就不会继续向里捕获了.
四. 事件对象的属性
1. 事件对象的属性 : IE target
FF srcElement
事件委托 ：
理解 : 给一个对象A设置一个点击事件,此时这个事件会产生一个事件对象,这个事件对象包含了鼠标事件和键盘事件等;这个事件对象有一个属性 target/srcElement,当点击A对象内层的对象a时,此事件对象调用上句的属性时,会返回被点击的对象a,得到这个对象后,我们可以获取这个对象a的一些信息.这时的效果就好像是给a对象设置了点击事件,但其实我们在代码中并为给对象a设置点击事件,这就是事件委托. 原理上被点击的对象a把点击事件委托给了其外层设置有点击事件的对象
