事件,就是人与浏览器交互的过程,例如点击按钮,输入文字,等等。。
事件驱动模型:
事件(操作,动作)
事件类型(具体的动作类型)
事件源(事件发生的地方)
事件监听器(监听事件发生的程序)
事件处理程序(事件响应程序---函数)
事件句柄:
DOM0(DOM level 0)事件绑定方式---将事件源元素与事件处理程序关联起来;
事件对象(Event对象)
event对象代表事件的状态,比如:光标坐标,键盘的按键,事件所发生的位置等等
如何获取事件对象?
标准:事件函数的第一个参数即function(event){}
非标准:(IE9之前)window.event
兼容写法:event = event || window.event
鼠标属性:
event.clientX
event.clientY
---------------------------->可见视口中的坐标
event.pageX
event.pageY
---------------------------->文档中的坐标
event.offsetX
event.offsetY
----------------------------->事件源元素坐标系中的坐标
键盘属性:
event.which||event.keyCode
----------------------------->获取键盘按钮的“虚拟键盘码”
event.ctrlKey
event.altKey
event.shiftKey
--返回boolean值,true表示对应按键被按下并保持按下状态
事件流
事件流分三个阶段
a.事件捕获阶段
b.处于目标阶段(event.target)
c.事件冒泡阶段
捕获阶段:
document----->html----->body----->div----->div----->ul----->li(处理目标)(处于目标阶段)
冒泡阶段
document<-----html<-----body<-----div<-----div<-----ul<-----li(处理目标) (处于目标阶段)
默认情况下,浏览器中事件的处理都是按照冒泡的方式处理,集中式处理事件。
事件冒泡
从事件源元素开始向祖先元素作事件传播的行为
从最确定的元素向最不确定的元素作事件传播行为
在事件冒泡的过程中,可以使用event.target来获取最初触发事件的事件源元素
兼容ie写法
var event = event.target || event.srcElment
事件委派:
利用事件冒泡,将后代元素上的事件处理委派给祖先元素。在事件委派过程中,可以使用event.target来获取最初触发事件的事件源元素。事件委派适合未来的元素(动态创建添加的元素)
阻止事件冒泡:
由于事件冒泡会带来副作用,所以需要阻止事件冒泡
标准:event.stopPropagation();
非标准:event.cancelBubble = true;
兼容写法(三目运算符的神奇使用)
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
事件捕获(反向冒泡,IE9之前的浏览器不支持)
从不确定元素向最确定元素作事件传播的行为
从祖先元素到子孙元素作事件的传播行为
添加事件监听:
element.addEventListener(type,callback[,useCapture])
type -- 事件类型字符串,不需要“on”前缀
callback -- 回调函数 事件处理回调函数
useCapture -- 可选参数,是否使用事件捕获方式处理事件,默认为false
false:冒泡事件 true:事件捕获
IE9之前添加事件监听:
element.attachEvent(type,callback)
--type事件类型字符串,需要添加"on"前缀
--callback事件处理函数:事件处理程序回调函数
注册事件监听方式:
1.添加事件监听(addEventListener)--DOM2(推荐)
2.事件句柄(onclick,onmousemove...)--DOM0
3.HTML标签的事件属性 -- DOM0(不推荐使用)