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

2. 事件注册 1. HTML Attribute <buttononclick="handleClick();">Click Me</button> <buttononclick="this.innerHTML='Clicked';">Click Me</button>

3. 事件注册 2. 绑定对象属性 el.onclick = function(e) { e = e || window.event; // IE下用window.event获得事件对象 alert(e.type); };

4. 事件注册

5. 事件注册 3. 事件监听 // IE el.attachEvent("onclick", function(e) { alert(e.type); // click }); // 非IE el.addEventListener("click", function(e) { alert(e.type); // click }, false);

6. 事件注册

7. 事件传播 IE目前只支持冒泡流程 document body 冒泡 bubbling 捕获 capturing div button

8. 事件对象的常用属性/方法 e.type e.Target || e.srcElement e.keyCode 事件的名称，如“click”，“mouseover”等 触发事件的目标元素 键盘事件触发时对应的Unicode键值

9. 事件对象的常用属性/方法 e.screenX, e.screenY e.ctrlKey, e.altKey, e.shiftKey e.clientX, e.clientY 事件触发时鼠标相对于屏幕的横坐标和纵坐标 布尔值，分别表示键盘事件触发时Ctrl、Alt和Shift键是否按下 事件触发时鼠标相对于浏览器Client区域的横坐标和纵坐标

13. sType: 要添加监听的事件名称，如“click”，不加“on”

14. fn: 事件触发时执行的回调函数，该函数中this默认指向事件所绑定的元素

15. obj:【可选】传递给监听函数的一个自定义参数

16. overrideContext:【可选】如果为true，回调函数中this就指向第三个参数obj绑定DOMReady事件的方法。DOMReady事件会在DOM结构可用时触发，与onload事件不同的是，不需要等待图片等资源加载完，通常DOMReady会在onload事件之前触发。

17. 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); // false alert(this.index); // 6 }, { index:6 }, true);

19. recurse:【可选】递归移除子节点上的事件监听

20. sType:【可选】移除指定类型的事件监听，默认移除所有的类型移除一个事件监听函数 返回指定元素上所有通过YUI添加的监听函数

21. YAHOO.util.Event 常用方法 Event.stopEvent(ev) Event.preventDefault(ev) Event.stopPropagation(ev) 停止事件的传播并阻止事件的默认行为 阻止事件的默认行为，比如阻止链接跳转、阻止表单提交等 停止事件的传播

22. 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+回车 } });

23. YAHOO.util.Event 常用方法 Event.getTarget(ev) Event.getPageX(ev), Event.getPageY(ev) Event.getXY(ev) 返回触发事件的目标元素 返回事件触发时鼠标相对于页面的横坐标和纵坐标 返回事件的坐标数组：[ Event.getPageX(ev), Event.getPageY(ev) ]

24. YAHOO.util.Event API Resources 中文文档

25. 使用 YAHOO.util.Event 的好处 在事件处理函数中，this默认指向事件所绑定的对象， 并可以给事件处理函数传递一个自定义参数 绑定对象参数可以是元素ID、DOM对象、或数组，使用方便灵活 额外提供一些实用的方法，功能强大 统一解决令人头痛的各种浏览器兼容性问题 …… YAHOO.util.Event

26. 事件代理(Event Delegation) 在上级元素上注册事件

27. 事件代理(Event Delegation)

28. 事件代理(Event Delegation)

29. 事件代理(Event Delegation) <scripttype="text/javascript"> (function() { var Event = YAHOO.util.Event, Dom = YAHOO.util.Dom; Event.on("J_Container", "click", function(e) { vartarget = Event.getTarget(e); if (target && Dom.hasClass(target, "ball")) { if(Dom.hasClass(target, "selected")) { Dom.removeClass(target, "selected"); } else { Dom.addClass(target, "selected"); } } }); })(); </script>

30. 事件代理(Event Delegation) 优点 缺点

31. 事件代理(Event Delegation) 事件代理的适用场景

32. 小结

33. Thank You !