Upload
taobaocom
View
2.215
Download
3
Embed Size (px)
DESCRIPTION
Citation preview
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
YAHOO.util.Event 常用方法
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);
YAHOO.util.Event 常用方法
Event.removeListener(el, sType, fn)
移除一个事件监听函数
Event.purgeElement(el, recurse, sType)
移除指定元素上所有通过 YUI 添加的监听函数• el: 要移除监听的元素• recurse: 【可选】递归移除子节点上的事件监听• sType: 【可选】移除指定类型的事件监听,默认移除所有的类型
Event.getListeners(el, sType)
返回指定元素上所有通过 YUI 添加的监听函数
YAHOO.util.Event 常用方法
Event.stopEvent(ev)
停止事件的传播并阻止事件的默认行为
Event.preventDefault(ev)
阻止事件的默认行为,比如阻止链接跳转、阻止表单提交等
Event.stopPropagation(ev)
停止事件的传播
YAHOO.util.Event 常用方法
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+ 回车
}});
YAHOO.util.Event 常用方法
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. 执行在上级元素上注册的事件处理函数 ( 判定事件的目标元素,以执行相应的代码 )
事件代理 (Event Delegation)
事件代理 (Event Delegation)
事件代理 (Event Delegation)
<script type="text/javascript">(function() { var Event = YAHOO.util.Event, Dom = YAHOO.util.Dom;
Event.on("J_Container", "click", function(e) {var target = Event.getTarget(e);if (target && Dom.hasClass(target, "ball")) {
if (Dom.hasClass(target, "selected")) {Dom.removeClass(target, "selected");
} else {Dom.addClass(target, "selected");
}}
});})();</script>
事件代理 (Event Delegation)
对子元素进行动态增加和删除操作,无需重新注册事件
减少不必要的事件注册次数,驻留在内存中的事件处理器大大减少了
每次冒泡的时候,需要在事件处理函数里判断事件的目标
不是所有的事件都可以冒泡 ( 比如 focus 和 blur 、 scroll 等事件 )
优点
缺点
事件代理 (Event Delegation)
页面内有大量相同或类似的元素
同一事件下触发相同或类似的操作
事件代理的适用场景
小结
善用 YUI Event Utility
在合适的情况下,多使用事件代理
Thank You !