码迷,mamicode.com
首页 > 其他好文 > 详细

事件源,事件对象(简要学习笔记十八)

时间:2015-12-15 10:14:08      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

3.事件委托:利用事件的冒泡技术。子元素的事件最终会冒泡到父元素直到跟节点。事件监听会分析从子元素冒泡上来的事件。
事件委托的好处:
    1.每个函数都是对象,都会占用内存,内存中对象越多,性能越差。
    2.必须事先指定所有事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间。
怎样处理由于事件较多引起的性能差:
1.采用事件委托技术,限制简历的连接数量
2.在不需要的时候移除事件处理程序
例子:
html:
<div id="myDiv">     <input type="button" value="点我" id="myBtn"> </div>
 
js:
技术分享
var btn=document.getElementById("myBtn"); btn.onclick=function(){      document.getElementById("myDiv").innerHTML="Progress..."; }
技术分享

 

注意:通过设置innerHTML可以把按钮移走,但是事件处理程序依旧与按钮保持着事件处理程序的引用都保存在内存中。
    所以最好手动移除:
 
技术分享
var btn=document.getElementById("myBtn"); btn.onclick=function(){     btn.onclick=null;//移除事件处理程序     document.getElementById("myDiv").innerHTML="Progress..."; }
技术分享
    
 
4.事件对象与事件源
技术分享
function eventHandler(e){     //获取事件对象  e = e || window.event;//IE和Chrome下是window.event FF下是e      //获取事件源  var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target  }
技术分享

 

5.取消事件默认行为
技术分享
function eventHandler(e) {     e = e || window.event;     // 防止默认行为      if (e.preventDefault) {         e.preventDefault();//IE以外      } else {         e.returnValue = false;//IE          //注意:这个地方是无法用return false代替的          //return false只能取消元素      } }
技术分享

 

6.阻止事件冒泡
技术分享
function myParagraphEventHandler(e) {     e = e || window.event;     if (e.stopPropagation) {         e.stopPropagation();//IE以外      } else {         e.cancelBubble = true;//IE      } }
技术分享

 

7.event与target
event:代表了包含了事件的所有状态。
target:触发事件的元素。
currentTarget:事件绑定的元素。
注意着两者的区别。

html:

技术分享
<ul id="ulT"> <li class="item1">fsda</li> <li class="item2">ewre</li> <li class="item3">qewe</li> <li class="item4">xvc</li> <li class="item5">134</li> </ul>
技术分享

js:
document.getElementById("ulT").onclick = function  (event) {     console.log(event.target);     console.log(event.currentTarget); }

 

事件源,事件对象(简要学习笔记十八)

标签:

原文地址:http://www.cnblogs.com/mmx-jiayou/p/5047176.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!