<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background: pink; } h1 { background: blue; } p{ background:yellow ; } </style> </head> <body> <button>生成h1</button> <button>生成p</button> <div> <h1>我是h1</h1> <p>我是p</p> <h1>我是h1</h1> </div> <script> var oDiv=document.getElementsByTagName("div")[0]; var arrBtn=document.getElementsByTagName("button"); var i=j=0; function addEvent(obj,fn,even,boolean){ if(obj.addEventListener){ obj.addEventListener(even,fn,boolean) } else{ ev='on'+even; obj.attachEvent(ev,fn); } } addEvent(arrBtn[0],function () { i++; var oH1=document.createElement("h1"); oH1.innerHTML="我是添加的H1"+i; oDiv.appendChild(oH1) },"click") addEvent(arrBtn[1],function () { j++; var oP=document.createElement("p"); oP.innerHTML="我是添加的p"+j; oDiv.appendChild(oP) },"click") addEvent(oDiv,function (ev) { var eve=window.event||ev; // 消除IE和谷歌的兼容性 var src=eve.srcElement; // 消除火狐的兼容性 var ta=eve.target; var ss=src||ta; // 判断是父元素div下面的哪个子元素 if(ss.nodeName.toLowerCase()=="h1"){ alert(ss.innerHTML) } },"click") addEvent(oDiv,function (ev) { var eve=window.event||ev; // 消除IE和谷歌的兼容性 var src=eve.srcElement; // 消除火狐的兼容性 var ta=eve.target; var ss=src||ta; // 判断是父元素div下面的哪个子元素 if(ss.nodeName.toLowerCase()=="p"){ alert(ss.innerHTML) } },"click") </script> </body> </html>
事件委托兼容火狐和谷歌、高低版本IE（让其在js中新添加节点可以改变其样式）
猜你喜欢
转载自blog.csdn.net/xinye666666/article/details/80889430
今日推荐
周排行