jQuery学习之事件

来源：互联网发布：windows phone 微信编辑：程序博客网时间：2024/05/18 12:04

浏览器事件模型

1.DOM第0级事件模型

事件处理程序通过把函数实例的引用指派到DOM元素的属性而声明的。

#1 event
if(!event) event=window.event;

var target =(event.target) ? event.target: event.srcElement;

#2 事件传播顺序

从目标元素沿着DOM树冒泡

2.DOM第2级事件模型
由于第0级事件模型的特性，无法为每个元素注册一个事件的多个处理程序
所以引发了DOM第2级事件模型。
element.addEventListener(eventType,Listener,useCapture)
useCapture 事件传播
事件被触发，事件首先从DOM树的根向下传播到目标元素（捕获阶段），然后从目标元素向上传播到DOM树的根（冒泡阶段）

useCapture true 捕获阶段处理 false 冒泡阶段处理，一般使用false，因为IE不支持捕获阶段处理

3.IE事件模型

IE使用attachEvent(eventName,handler)而不是addEventListener

JQuery事件模型

1.利用jQuery绑定事件处理程序
bind(eventType,data,Listener)
简化了一些特定事件的绑定写法
eventTypeName(listener)
1.blur 2.focus 3.mousedown 4.resize
5.change 6.keydown 7.mousemove 8.scroll
9.click 10.keypress 11.mouseout 12.select
13.dblclick 14.keyup 15.mouseover 16.submit

17.error 18.load 19.mouseup 20.unload

2.删除事件处理程序

unbind

3.Event实例
altKey,ctrlKey,metaKey,shiftKey 标志相应的key是否被按下
data bind函数是否传入了值
pageX pageY 鼠标相对于页面原点的坐标
screenX screenY 相对于屏幕原点的坐标

target 哪个元素 type:click等等

4.影响事件传播

stopPropagation阻止DOM树向上传播

5.触发事件处理程序

trigger(eventType)

同理，简化写法

eventName()

6.其它事件相关命令

toggle(listenerOdd,listenerEven)

hover(overListener,outListener)

让事件更多工作起来

0 0