JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)
2015-10-14 20:38
736 查看
1.事件冒泡与事件捕获
2.事件与事件句柄
3.事件委托:利用事件的冒泡技术。子元素的事件最终会冒泡到父元素直到跟节点。事件监听会分析从子元素冒泡上来的事件。
事件委托的好处:
1.每个函数都是对象,都会占用内存,内存中对象越多,性能越差。
2.必须事先指定所有事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间。
怎样处理由于事件较多引起的性能差:
1.采用事件委托技术,限制简历的连接数量
2.在不需要的时候移除事件处理程序
例子:
html:
js:
注意:通过设置innerHTML可以把按钮移走,但是事件处理程序依旧与按钮保持着事件处理程序的引用都保存在内存中。
所以最好手动移除:
4.事件对象与事件源
5.取消事件默认行为
6.阻止事件冒泡
7.event与target
event:代表了包含了事件的所有状态。
target:触发事件的元素。
currentTarget:事件绑定的元素。
注意着两者的区别。
html:
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); }
相关文章推荐
- 打子弹游戏 js
- Fastjson 自定义输出
- JavaScript向php传递json数据之后php解析json数据
- extjs define store 找不到
- js求字符长度
- 实例演示(列表一个开其余的关)
- JS连续滚动幻灯片:原理与实现
- JavaScript的面向对象
- JS学习之闭包、this关键字、预解释、作用域综合
- 东北大学地理位置数据JSON版
- javascript循环性能优化的几种方法
- JavaScript中字体浮动的简单演示实例
- JS控制div显示隐藏
- js ajax 加载图片 img的简单方法
- JScrollBar在Nimbus L&F下滚动条消失
- JS调用水晶报表打印翻页按钮事件
- JS-获取图片地址
- javaScript中代理模式详解
- json解析效率对比
- Json数据中的特殊字符处理