image.png

  1. var oList=document.createElement('ul'),
  2.         oFrag=document.createDocumentFragment();//文档碎片 暂存的容器
  3.         for(var i=0;i<50;i++){
  4.             var oLi=document.createElement('li');
  5.             oLi.innerHTML='这是第'+(i+1)+'项<button>删除</button>';
  6.             oFrag.appendChild(oLi);
  7.         }
  8.         oList.appendChild(oFrag);
  9.         document.body.appendChild(oList);
  1.        var oList=document.createElement('ul'),
  2.         list='';
  3.         for(var i=0;i<50;i++){
  4.             var oLi=document.createElement('li');
  5.             list+='<li>这是第'+(i+1)+'项<button>删除</button></li>';
  7.         }
  8.         oList.innerHTML=list;
  9.         document.body.appendChild(oList);

模板写法好，比字符串好，字符串没有代码提示，没有写html的提示

  1.   <script type="text/html" id="tpl">
  2.         <li>这是第{{num}}项<button>删除</button></li>
  3.     </script>
  4.     <script>
  5.         var oList=document.createElement('ul'),
  6.         tpl=document.getElementById('tpl').innerHTML,
  7.         list='';
  8.         for(var i=0;i<50;i++){
  9.             list+=tpl.replace(/{{(.*?)}}/,(i+1));
  10.         }
  11.         oList.innerHTML=list;
  12.         document.body.appendChild(oList);
  13.     </script>

事件代理

事件代理->多次重复的绑定事件处理函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <style>
  9.         .box{
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: orange;
  13.         }
  14.         .inner{
  15.             width: 100px;
  16.             height: 100px;
  17.             background-color: green;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.    <div class="box">
  23.        <div class="inner"></div>
  24.    </div>
  25.     <script>
  26.      //事件代理->多次重复的绑定事件处理函数
  27.     //事件对象和事件源对象 ->事件代理的核心
  28.      document.getElementsByClassName('inner')[0].onclick=function(){
  29.          console.log('inner');
  30.      }
  32.      document.getElementsByClassName('box')[0].onclick=function(){
  33.          console.log('box');
  34.      }
  35.     </script>
  37. </body>
  38. </html>

点击box子元素，打印inner、box
点击inner，只打印inner
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <style>
  9.         .box{
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: orange;
  13.         }
  14.         .inner1{
  15.             width: 100px;
  16.             height: 100px;
  17.             background-color: green;
  18.         }
  19.         .inner2{
  20.             width: 100px;
  21.             height: 100px;
  22.             background-color: purple;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.    <div class="box">
  28.        <div class="inner1"></div>
  29.        <div class="inner2"></div>
  30.    </div>
  31.     <script>
  32.      //事件代理->多次重复的绑定事件处理函数
  33.     //事件对象和事件源对象 ->事件代理的核心
  35.     //  document.getElementsByClassName('inner1')[0].onclick=function(){
  36.     //      console.log('inner1');
  37.     //  }
  39.     //  document.getElementsByClassName('inner2')[0].onclick=function(){
  40.     //      console.log('inner2');
  41.     //  }
  42.     //  document.getElementsByClassName('box')[0].onclick=function(){
  43.     //      console.log('box');
  44.     //  }
  45.     //这三个代码，相当于下面一个代码
  47.    document.getElementsByClassName('box')[0].onclick=function(e){
  48.          var e=e||window.event,
  49.          tar=e.target||e.srcElement,
  50.          className=tar.className;
  51.          console.log(className)
  53.                 // switch (className) {
  54.             //     case 'inner1':
  55.             //         console.log('我是inner1');
  56.             //         break;
  57.             //     case 'inner2':
  58.             //         console.log('我是inner2');
  59.             //         break;
  60.             //     default:
  61.             //         break;
  62.             // }
  63.    }
  64.     </script>
  66. </body>
  67. </html>

event参数

e是event事件对象，无论起什么名字，即使是abc都是事件对象，对象的属性作用，与对象的名字无关，最好起有意义的，如e、ev、event
image.png
image.png
image.png

事件代理完成任务

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8. </head>
  9. <body>
  10.     <script type="text/html" id="tpl">
  11.         <li>这是第{{num}}项<button>删除</button></li>
  12.     </script>
  13.     <script>
  14.         var oList=document.createElement('ul'),
  15.         tpl=document.getElementById('tpl').innerHTML,
  16.         list='';
  17.         for(var i=0;i<50;i++){
  18.             list+=tpl.replace(/{{(.*?)}}/,(i+1));
  19.         }
  20.         oList.innerHTML=list;
  21.         document.body.appendChild(oList);
  23.         //事件冒泡 一定是在父函数上绑定
  24.         oList.addEventListener('click',removeItem,false);
  25.         function removeItem(ev){
  26.             var e=ev||window.event,
  27.             tar=e.target||e.srcElemnt,
  28.             tagName=tar.tagName.toLowerCase();//得到的BUTTON是大写，最好需要转化成小写
  29.             if(tagName==='button'){
  30.                 tar.parentNode.remove();
  31.             }
  32.         }
  34.         //事件代理->多次重复的绑定事件处理函数
  35.     </script>
  37. </body>
  38. </html>