JavaScript Event - 圆业

1,695 views

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,695
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
83
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

JavaScript Event - 圆业

  1. 1. Javascript 事件监听<br />UED前端开发圆业<br />
  2. 2. 事件注册<br />1. HTML Attribute<br />&lt;buttononclick=&quot;handleClick();&quot;&gt;Click Me&lt;/button&gt;<br />&lt;buttononclick=&quot;this.innerHTML=&apos;Clicked&apos;;&quot;&gt;Click Me&lt;/button&gt;<br />
  3. 3. 事件注册<br />2. 绑定对象属性<br />el.onclick = function(e) {<br /> e = e || window.event; // IE下用window.event获得事件对象<br /> alert(e.type);<br />};<br />
  4. 4. 事件注册<br />
  5. 5. 事件注册<br />3. 事件监听<br />// IE<br />el.attachEvent(&quot;onclick&quot;, function(e) {<br /> alert(e.type); // click<br />});<br />// 非IE<br />el.addEventListener(&quot;click&quot;, function(e) {<br /> alert(e.type); // click<br />}, false);<br />
  6. 6. 事件注册<br />
  7. 7. 事件传播<br />IE目前只支持冒泡流程<br />document<br />body<br />冒泡<br />bubbling<br />捕获<br />capturing<br />div<br />button<br />
  8. 8. 事件对象的常用属性/方法<br />e.type<br />e.Target || e.srcElement<br />e.keyCode<br />事件的名称,如“click”,“mouseover”等<br />触发事件的目标元素<br />键盘事件触发时对应的Unicode键值<br />
  9. 9. 事件对象的常用属性/方法<br />e.screenX, e.screenY<br />e.ctrlKey, e.altKey, e.shiftKey<br />e.clientX, e.clientY<br />事件触发时鼠标相对于屏幕的横坐标和纵坐标<br />布尔值,分别表示键盘事件触发时Ctrl、Alt和Shift键是否按下<br />事件触发时鼠标相对于浏览器Client区域的横坐标和纵坐标<br />
  10. 10. 事件对象的常用属性/方法<br />e.stopPropagation() || e.cancelBubble=true<br />e.preventDefault() || e.returnValue=false<br />停止事件的传播<br /><ul><li>IE: e.cancelBubble=true;
  11. 11. 非IE: e.stopPropagation();</li></ul>阻止事件的默认行为,比如阻止链接跳转、阻止表单提交等<br /><ul><li>IE: e.returnValue=false;
  12. 12. 非IE: e.preventDefault();</li></li></ul><li>YAHOO.util.Event 常用方法<br />Event.on(el, sType, fn, obj, overrideContext) <br />添加一个事件监听函数,Event.addListener的别名。<br />Event.onDOMReady(fn, obj, overrideContext)<br /><ul><li>el: 要添加事件监听的元素 ID, 元素引用,ID 或 元素引用的数组
  13. 13. sType: 要添加监听的事件名称,如“click”,不加“on”
  14. 14. fn: 事件触发时执行的回调函数,该函数中this默认指向事件所绑定的元素
  15. 15. obj:【可选】传递给监听函数的一个自定义参数
  16. 16. overrideContext:【可选】如果为true,回调函数中this就指向第三个参数obj</li></ul>绑定DOMReady事件的方法。DOMReady事件会在DOM结构可用时触发,与onload事件不同的是,不需要等待图片等资源加载完,通常DOMReady会在onload事件之前触发。<br />
  17. 17. YAHOO.util.Event 常用方法<br />Event.on(el, &quot;click&quot;, function(e, obj) {<br /> alert(this == el);<br /> alert(obj.index); // 6<br />}, { index:6 });<br />Event.on(el, &quot;click&quot;, function(e) {<br /> alert(this == el); // false<br />alert(this.index); // 6<br />}, { index:6 }, true);<br />
  18. 18. YAHOO.util.Event 常用方法<br />Event.purgeElement(el, recurse, sType) <br />移除指定元素上所有通过YUI添加的监听函数<br />Event.removeListener(el, sType, fn)<br />Event.getListeners(el, sType)<br /><ul><li> el: 要移除监听的元素
  19. 19. recurse:【可选】递归移除子节点上的事件监听
  20. 20. sType:【可选】移除指定类型的事件监听,默认移除所有的类型</li></ul>移除一个事件监听函数<br />返回指定元素上所有通过YUI添加的监听函数<br />
  21. 21. YAHOO.util.Event 常用方法<br />Event.stopEvent(ev)<br />Event.preventDefault(ev)<br />Event.stopPropagation(ev)<br />停止事件的传播并阻止事件的默认行为<br />阻止事件的默认行为,比如阻止链接跳转、阻止表单提交等<br />停止事件的传播<br />
  22. 22. YAHOO.util.Event 常用方法<br />Event.on(a, &quot;click&quot;, function(e) {<br />Event.preventDefault(e); // 阻止超链接点击跳转<br />});<br />Event.on(form, &quot;submit&quot;, function(e) {<br />Event.preventDefault(e); // 阻止表单递交,常用于表单验证<br />});<br />Event.on(textarea, &quot;keydown&quot;, function(e) {<br />if (e.keyCode == 13 && !e.shiftKey) {<br />Event.preventDefault(e); // 阻止回车键换行,保留shift+回车<br />}<br />});<br />
  23. 23. YAHOO.util.Event 常用方法<br />Event.getTarget(ev)<br />Event.getPageX(ev), Event.getPageY(ev)<br />Event.getXY(ev)<br />返回触发事件的目标元素<br />返回事件触发时鼠标相对于页面的横坐标和纵坐标<br />返回事件的坐标数组:[ Event.getPageX(ev), Event.getPageY(ev) ]<br />
  24. 24. YAHOO.util.Event API<br />Resources<br />中文文档<br />
  25. 25. 使用 YAHOO.util.Event 的好处<br />在事件处理函数中,this默认指向事件所绑定的对象,<br />并可以给事件处理函数传递一个自定义参数<br />绑定对象参数可以是元素ID、DOM对象、或数组,使用方便灵活<br />额外提供一些实用的方法,功能强大<br />统一解决令人头痛的各种浏览器兼容性问题<br />……<br />YAHOO.util.Event<br />
  26. 26. 事件代理(Event Delegation)<br />在上级元素上注册事件<br />
  27. 27. 事件代理(Event Delegation)<br />
  28. 28. 事件代理(Event Delegation)<br />
  29. 29. 事件代理(Event Delegation)<br />&lt;scripttype=&quot;text/javascript&quot;&gt;<br />(function() {<br />var Event = YAHOO.util.Event, Dom = YAHOO.util.Dom;<br />Event.on(&quot;J_Container&quot;, &quot;click&quot;, function(e) {<br />vartarget = Event.getTarget(e);<br />if (target && Dom.hasClass(target, &quot;ball&quot;)) {<br />if(Dom.hasClass(target, &quot;selected&quot;)) {<br /> Dom.removeClass(target, &quot;selected&quot;);<br />} else {<br />Dom.addClass(target, &quot;selected&quot;);<br />}<br />}<br />});<br />})();<br />&lt;/script&gt;<br />
  30. 30. 事件代理(Event Delegation)<br />优点<br />缺点<br />
  31. 31. 事件代理(Event Delegation)<br />事件代理的适用场景<br />
  32. 32. 小结<br />
  33. 33. Thank You !<br />

×