JavaScript 学习笔记— —事件委托
2015-04-06 22:05
381 查看
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果 //好处 //1.提高性能 //2.新添加的元素,还会有之前的事件 //event对象: // 事件源:不管在那个事件中,只要你操作的那个元素就是事件源 //ie : window.event.srcElement // 标准下 :event.target //nodeName : 找到当前元素的标签名 window.onload=function(){ var oBtn=document.getElementsByTagName("input")[0]; var oUl=document.getElementById("ul"); iNow=5; // oBtn.onclick=function(ev){ // var oEvent=ev || event; // if(oEvent.srcElement){ // alert(oEvent.srcElement.value); // }else{ // alert(oEvent.target.value); // } // } oBtn.onclick=function() { iNow++; var oLi=document.createElement("li"); oLi.innerHTML=iNow*11111111; oUl.appendChild(oLi); } oUl.onmouseover=function(ev) { var oEvent=ev || event; //alert(oEvent.srcElement.innerHTML)// IE CHROME //alert(oEvent.target.innerHTML)// FF var target=oEvent.srcElement || oEvent.target; if(target.nodeName.toLowerCase()=="li") { target.style.background="yellow"; } } oUl.onmouseout=function(ev) { var oEvent=ev || event; //alert(oEvent.srcElement.innerHTML)// IE CHROME //alert(oEvent.target.innerHTML)// FF var target=oEvent.srcElement || oEvent.target; if(target.nodeName.toLowerCase()=="li") { target.style.background=""; } } } </script> </head> <body> <input type="button" value="按钮"> <ul id="ul"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> <li>55555555</li> </ul> </body> </html>
相关文章推荐
- [ASP.NET学习笔记之二十二].NET中的委托与事件研究
- 事件和委托学习笔记(2007.12.20)
- JavaScript 学习笔记 之事件
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
- [学习笔记]c#中的委托、事件、Func、Predicate、Observer设计模式以及其他
- javascript学习笔记(五)--事件
- javascript学习笔记之事件和事件处理
- JavaScript 学习笔记 事件二
- Javascript学习笔记13——关于响应事件
- JavaScript 学习笔记(十六) js事件
- 学习笔记---再次理解事件和委托
- 自定义控件学习笔记(5):事件委托列表的使用
- 委托和事件学习笔记
- 委托与事件学习笔记1---什么是委托?
- 委托与事件学习笔记1---什么是委托?
- javascript 事件模型学习笔记
- javascript事件学习笔记
- SilverLight学习笔记--Silverligh之在Javascript中捕获和处理Silverlight控件事件
- JavaScript学习笔记--第二章.条件语句与交互事件(链接事件、图片交互)
- Javascript学习指南(第2版)笔记(四) 表单、表单事件及校验