JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)...

1.事件冒泡与事件捕获

2.事件与事件句柄

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/zqzjs/p/4878785.html

JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)...相关推荐

JavaScript权威设计--CSS(简要学习笔记十六)
1.Document的一些特殊属性 document.lastModified document.URL document.title document.referrer document.domai ...
jQuery中的事件冒泡捕获阻止冒泡
jQuery中的事件冒泡捕获阻止冒泡事件冒泡 IE中的事件流叫做事件冒泡,就是又最开始的时间接收到逐级向上传播较为不具体的节点.IE9.谷歌浏览器.Safari.Opera等等都是将事件一直冒泡到w ...
事件冒泡详解及阻止事件冒泡
什么是事件冒泡? 事件冒泡:从子元素向父元素触发 ->当某个事件触发时,同样的事件会向父元素触发. 但并不是所有事件都会产生冒泡问题 onfocus. onblur .onload不会产生冒泡问 ...
关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
js /jquery停止事件冒泡和阻止浏览器默认事件
var el = window.document.getElementById("a");el.onclick = function (e) {//如果提供了事件对象,则这是一个非 ...
click事件在什么时候出发_关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
JavaScript学习（十八）--鼠标事件（鼠标点击松开移动效果）
目录鼠标的单击事件鼠标的松开或按下事件鼠标的移入/移出事件鼠标移动事件鼠标单击事件和鼠标双击事件鼠标拖拽事件鼠标和键盘事件是在页面操作中使用最频繁的操作,可以利用鼠标事件在页面中实现鼠标 ...
Vue.js 学习笔记十自定义按键事件
<div id="divApp"><input type="text" v-on:keyup=& ...
HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)...
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是coo ...

JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)...

JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)...相关推荐

最新文章

热门文章