javascript event - 圆业

Javascript 事件监听UED 前端开发圆业

事件注册

1. HTML Attribute

优点：简单、容易查找

缺点： Javascript 和 HTML 结构混杂

<button onclick="handleClick();">Click Me</button>

<button onclick="this.innerHTML='Clicked';">Click Me</button>

事件注册

2. 绑定对象属性

优点：简单、 Javascript 和 HTML 结构分离

缺点：每个事件只能绑定一个处理函数，只有最后绑定的函数有效

el.onclick = function(e) {e = e || window.event; // IE 下用 window.event 获得事件对

象alert(e.type);

};

事件注册

事件注册

3. 事件监听

优点： Javascript 和 HTML 结构分离、支持多次添加监听函数

缺点：需要封装解决浏览器兼容性问题

// IEel.attachEvent("onclick", function(e) {

alert(e.type); // click});

// 非 IEel.addEventListener("click", function(e) {

alert(e.type); // click}, false);

事件注册

事件传播

document

body

div

button

捕获capturing

冒泡bubbling

IE 目前只支持冒泡流程

事件对象的常用属性 / 方法

e.type

事件的名称，如“ click” ，“ mouseover” 等

e.Target || e.srcElement

触发事件的目标元素

e.keyCode

键盘事件触发时对应的 Unicode 键值


e.screenX, e.screenY

事件触发时鼠标相对于屏幕的横坐标和纵坐标

e.ctrlKey, e.altKey, e.shiftKey

布尔值，分别表示键盘事件触发时 Ctrl 、 Alt 和 Shift 键是否按下

e.clientX, e.clientY

事件触发时鼠标相对于浏览器 Client 区域的横坐标和纵坐标


e.stopPropagation() || e.cancelBubble=true

停止事件的传播• IE ： e.cancelBubble=true;

• 非 IE ： e.stopPropagation();

e.preventDefault() || e.returnValue=false

阻止事件的默认行为，比如阻止链接跳转、阻止表单提交等• IE ： e.returnValue=false;

• 非 IE ： e.preventDefault();

YAHOO.util.Event 常用方法

Event.onDOMReady(fn, obj, overrideContext)

绑定 DOMReady 事件的方法。 DOMReady 事件会在 DOM 结构可用时触发，与 onload 事件不同的是，不需要等待图片等资源加载完，通常 DOMReady 会在 onload 事件之前触发。

Event.on(el, sType, fn, obj, overrideContext)

添加一个事件监听函数， Event.addListener 的别名。• el: 要添加事件监听的元素 ID ，元素引用， ID 或元素引用的数组• sType: 要添加监听的事件名称，如“ click” ，不加“ on”• fn: 事件触发时执行的回调函数，该函数中 this 默认指向事件所绑定的元素• obj: 【可选】传递给监听函数的一个自定义参数• overrideContext: 【可选】如果为 true ，回调函数中 this 就指向第三个参数 obj


Event.on(el, "click", function(e, obj) {alert(this == el);alert(obj.index); // 6

}, { index:6 });

Event.on(el, "click", function(e) {alert(this == el); // falsealert(this.index); // 6

}, { index:6 }, true);


Event.removeListener(el, sType, fn)

移除一个事件监听函数

Event.purgeElement(el, recurse, sType)

移除指定元素上所有通过 YUI 添加的监听函数• el: 要移除监听的元素• recurse: 【可选】递归移除子节点上的事件监听• sType: 【可选】移除指定类型的事件监听，默认移除所有的类型

Event.getListeners(el, sType)

返回指定元素上所有通过 YUI 添加的监听函数


Event.stopEvent(ev)

停止事件的传播并阻止事件的默认行为

Event.preventDefault(ev)

阻止事件的默认行为，比如阻止链接跳转、阻止表单提交等

Event.stopPropagation(ev)

停止事件的传播


Event.on(a, "click", function(e) {Event.preventDefault(e); // 阻止超链接点击跳转

});

Event.on(form, "submit", function(e) {Event.preventDefault(e); // 阻止表单递交，常用于表单验证

});

Event.on(textarea, "keydown", function(e) {if (e.keyCode == 13 && !e.shiftKey) {

Event.preventDefault(e); // 阻止回车键换行，保留shift+ 回车

}});


Event.getTarget(ev)

返回触发事件的目标元素

Event.getPageX(ev), Event.getPageY(ev)

返回事件触发时鼠标相对于页面的横坐标和纵坐标

Event.getXY(ev)

返回事件的坐标数组： [ Event.getPageX(ev), Event.getPageY(ev) ]

YAHOO.util.Event API

YUI Event Utility ： http://developer.yahoo.com/yui/event/

API ： http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html

Examples ： http://developer.yahoo.com/yui/examples/event/

Resources

http://code.google.com/p/yui-doc-zh/

中文文档

使用 YAHOO.util.Event 的好处

在事件处理函数中， this默认指向事件所绑定的对象，并可以给事件处理函数传递一个自定义参数

统一解决令人头痛的各种浏览器兼容性问题

绑定对象参数可以是元素ID 、 DOM 对象、或数组，使用方便灵活

额外提供一些实用的方法，功能强大

……

YAHOO.util.Event

事件代理 (Event Delegation)

在上级元素上注册事件

1. 事件发生

2. 事件通过冒泡传播到上级元素上

3. 执行在上级元素上注册的事件处理函数 ( 判定事件的目标元素，以执行相应的代码 )


对子元素进行动态增加和删除操作，无需重新注册事件

减少不必要的事件注册次数，驻留在内存中的事件处理器大大减少了

每次冒泡的时候，需要在事件处理函数里判断事件的目标

不是所有的事件都可以冒泡 ( 比如 focus 和 blur 、 scroll 等事件 )

优点

缺点


页面内有大量相同或类似的元素

同一事件下触发相同或类似的操作

事件代理的适用场景

小结

善用 YUI Event Utility

在合适的情况下，多使用事件代理

Thank You !

javascript event - 圆业

Technology