1.DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別破托？

//DOM0監(jiān)聽事件
var btn = document.getElementById('#btn');
btn.onclick = function(){
console.log('DOM0點擊事件監(jiān)聽')
}
//this指向元素自身缨叫，這種方法的缺點是只聽添加一個事件程序，如果多添加了抖苦，后面的會把前面的覆蓋掉


//DOM2級事件監(jiān)聽
var btn = document.getElementById('#btn');
btn.addEventListener('click/dbclick/mouseover/mouseout.....',function(){
console.log('DOM2事件監(jiān)聽')
})
//這種添加事件監(jiān)聽的方法毯侦，比較推薦，可以給一個元素添加多個事件瑰谜，this指向元素本身

2 .attachEvent與addEventListener的區(qū)別欺冀？

• 先說說attachEvent，IE瀏覽器中的事件處理方法萨脑，
  1. 只接受2個參數(shù)attachEvent('帶on的事件名稱'隐轩，function(){要做事的函數(shù)代碼})
  2. 這個事件處理程序中，他的作用域是全局作用域渤早，因此this的指向是window
  3. 給目標(biāo)元素添加多個事件之后职车，標(biāo)準(zhǔn)瀏覽器中的執(zhí)行順序是按照代碼的先后順序進行執(zhí)行的，但是attachEvent是按照，最后添加最先執(zhí)行這樣的順序來的
• addEventListener悴灵，標(biāo)準(zhǔn)瀏覽器中的事件處理方法
  1. 能接受3個參數(shù) addEventListener('不帶on的事件名稱'扛芽，function(){要做事的函數(shù)代碼},一個布爾值，默認(rèn)為false意為在冒泡階段處理事件积瞒，為true的時候就是在捕獲階段的時候來處理事件)
  2. 他的作用域是目標(biāo)元素的作用域川尖，this指向的是當(dāng)前元素
  3. 給目標(biāo)元素添加多事件之后，處理順序與代碼順序一致

3.解釋IE事件冒泡和DOM2事件傳播機制茫孔？

• IE的事件冒泡傳播機制叮喳，就和它的字面意思“冒泡”一樣，想象一下魚缸里面的魚吐泡泡缰贝，就能知道馍悟，是一種從目標(biāo)元素自身向“水面”上逐級傳播的一個過程
• DOM2事件傳播機制，它分完整的3個階段
  第一階段是事件捕獲階段揩瞪，由最上層向下穿透赋朦，為截取事件提供機會
  第二階段是處于目標(biāo)階段，實際目標(biāo)接收事件
  第三階段是冒泡階段李破，從目標(biāo)元素開始宠哄，向上層穿透

4.如何阻止事件冒泡？ 如何阻止默認(rèn)事件嗤攻？

• 對于標(biāo)準(zhǔn)瀏覽器來說毛嫉，直接調(diào)用event對象中的stopPropagation()方法，就可以阻止事件冒泡妇菱。阻止默認(rèn)事件的話直接用preventDefault()方法就可以啦
• 對于老IE而言承粤，他的event對象中由cancelBubble屬性，默認(rèn)的值為false闯团，當(dāng)給它改成true的時候辛臊，就可以取消事件冒泡了。如果取消默認(rèn)的事件行為的話房交，把returnValue的值設(shè)置為false來取消默認(rèn)的事件行為

5.點擊每一個元素li時控制臺展示該元素的文本內(nèi)容彻舰。不考慮兼容

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<script>
  function $(id){
        return document.querySelector(id);
    }
  function $$(cla){
        return document.querySelectorAll(cla);
    }
   var liNodes = $$('.ct li')
   liNodes.forEach(
      function(node){
        node.addEventListener('click', function(){
            console.log(this.innerText)
        })
      }
    )
</script>

6. 補全代碼

第六題

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>任務(wù)班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
// 第6題
   var ulNode = $('.ct'),
       startBtn = $('#btn-add-start'),
       endBtn = $('#btn-add-end'),
       ipt = $('.ipt-add-content'),
       reg =/^\w+$/ ;
      //事件委托，事件冒泡的一種使用方法 顯示每個li的內(nèi)容的需求得到解決
      ulNode.addEventListener('click', function(e){
        if(e.target.tagName.toLowerCase()==='li'){
          console.log(e.target.innerText)
        }
      })
      //頭部添加li  dom方法‘insertBefore’不熟 還要多看一下
        startBtn.addEventListener('click', function(){
        var li = document.createElement('li');
        var iptVal = ipt.value;
        if (reg.test(iptVal)) {
         li.innerText  = iptVal;
         ulNode.insertBefore(li,ulNode.firstChild);
        } 
          else {
              console.log('只能由英文候味，數(shù)字刃唤，下劃線，組成白群！')
            }
      })
      //尾部添加li 
      endBtn.addEventListener('click', function(){
        var li = document.createElement('li');
        var iptVal = ipt.value;
        if (reg.test(iptVal)) {
         li.innerText  = iptVal;
         ulNode.append(li);
        } 
          else {
              console.log('只能由英文尚胞，數(shù)字，下劃線帜慢，組成笼裳！')
            }
      })

function $(id){
        return document.querySelector(id);
    }
function $$(cla){
        return document.querySelectorAll(cla);
    }
</script>

7. 補全代碼

第七題代碼

<style type="text/css">
.img-preview img{
    width: 400px;
    height: 400px;
}
</style>
<ul class="ct">
    <li data-img="https://ws1.sinaimg.cn/large/006tKfTcly1fj5d2lzwlxj30ny0ogq4p.jpg">查看圖片1</li>
    <li data-img="https://ws2.sinaimg.cn/large/006tKfTcly1fj5d4qc4yzj30l411cac8.jpg">查看圖片2</li>
</ul>
<div class="img-preview"></div>
<script>
var liNodes = $$('.ct li');
  var imgPre = $('.img-preview');
  liNodes.forEach(function(node){
   node.addEventListener('mouseover', function(e){
    imgPre.innerHTML = '![]('+e.target.dataset.img+')';
   })
  

  })
  

function $(id){
        return document.querySelector(id);
    }
function $$(cla){
        return document.querySelectorAll(cla);
    }


</script>