事件

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

  • DOM0級事件監(jiān)聽就是把一個方法賦值給一個元素的事件處理程序?qū)傩浴⑦@些屬性的值設(shè)置為一個函數(shù)，就可以指定事件處理程序。一個事件只能綁定一次，并且新方法會覆蓋老方法。
var cancel = document.querySelector('#cancel')
cancel.onclick = function() {
    console.log('heihei')
}
cancel.onclick = function() {
    console.log('haha')  //把上面的覆蓋
}
  • DOM2級事件監(jiān)聽定義了兩個方法用于處理指定和刪除事件處理程序的操作：addEventListener、removeEventListener。所有的DOM節(jié)點都包含這兩個方法，并且它們都接受三個參數(shù)：事件類型、事件處理方法、布爾參數(shù)。可以選擇按照冒泡的順序處理還是捕獲的順序處理。
var handler = function(){
    console.log('hello')
}
cancel.addEventListener('click',handler,false) //默認false 按冒泡順序處理
cancel.addEventListener('click',function(){
console.log('word')
},true)// 按捕獲順序處理
cancel.removeEventListener('click', handler)//刪除名為handler的函數(shù)處理程序

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

  • 參數(shù)個數(shù)不相同，這個最直觀，addEventListener有三個參數(shù)，attachEvent只有兩個，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
  • 第一個參數(shù)意義不同，addEventListener第一個參數(shù)是事件類型（比如click，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
  • 事件處理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的觸發(fā)元素，而attachEvent事件處理程序會在全局變量內(nèi)運行，this是window，所以剛才例子才會返回undefined，而不是元素id
  • 為一個事件添加多個事件處理程序時，執(zhí)行順序不同，addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)，所以添加多個的時候，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器

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

  • IE的事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素
  • DOM事件流：DOM2級事件規(guī)定的 事件流包括三個階段，事件捕獲階段，處于目標階段，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機會，然后是實際目標接收事件，最后是冒泡階段，可以在這個階段對時間做出響應(yīng)（IE8及其以下不支持）
    實際上規(guī)范明確要求捕獲階段不會涉及事件目標，但現(xiàn)代瀏覽器都會在捕獲階段觸發(fā)事件對象上的操作，結(jié)果就是有兩個機會在目標對象上面操作。

4.如何阻止事件冒泡？ 如何阻止默認事件？

  • stopPropagation()方法可以停止事件在DOM層次的傳播，即取消進一步的事件捕獲或冒泡
var handler = function (e) {
    alert(e.type);
    e.stopPropagation();
}
  • 要阻止事件的默認行為，可以使用preventDefault()方法，前提是cancelable值為true，比如我們可以阻止鏈接導(dǎo)航這一默認行為
document.querySelector('#btn').onclick = function (e) {
    e.preventDefault();
}

5.有如下代碼，要求當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。不考慮兼容

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<script>
//
    var ct = document.querySelector('.ct')
    ct.addEventListener('click',function(e){
        console.log(e.target.innerText)
    })
 // 
    var lists = document.querySelectorAll('.ct li')
    lists.forEach(function(e){
        e.addEventListener('click',function(){
        console.log(e.innerText)
        })
    })
//
    var liArr = document.getElementsByClassName('ct')
    [0].getElementsByTagName('li')
    for (var i = 0;i < liArr.length;i++){
    liArr[i].addEventListener('click',function(){
    console.log(this.innerText)
    })
    }
</script>

6. 補全代碼

要求：

  • 當(dāng)點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串
  • 當(dāng)點擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串
  • 當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。
<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<input id="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
// 添加新元素，選中所有包括新加的元素 
var ct = document.querySelector('.ct')
    ipt = document.querySelector('#ipt-add-content')
    addStartBtn = document.querySelector('#btn-add-start')
    addEndBtn = document.querySelector('#btn-add-end')
  ct.addEventListener('click',function(e){
    if(e.target.tagName.toLowerCase() === 'li'){
      console.log(e.target.innerText)
    }
  })
  addStartBtn.addEventListener('click',function(){
    var li = document.createElement('li')
    function isNoSpace(str){
      var reg = /\s/g
      return reg.test(str)
    }
    if(isNoSpace(ipt.value) || ipt.value === ""){ 
      alert("請勿輸入空白字符") 
    }else{
      li.innerText = ipt.value
      ct.insertBefore(li,ct.firstChild)
    }
  })
  addEndBtn.addEventListener('click',function(){
    function isNoSpace(str){
      var reg = /\s/g
      return reg.test(str) 
    }
    if(isNoSpace(ipt.value) || ipt.value === ""){ 
      alert("請勿輸入空白字符") 
    }else{    
    li.innerText = ipt.value
    ct.appendChild(li)  
    }  
  })
</script>

預(yù)覽- http://js.jirengu.com/qefix/1/edit?html,console,output

7. 補全代碼

要求：當(dāng)鼠標放置在li元素上，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片。

<ul class="ct">
    <li data-img="1.png">鼠標放置查看圖片1</li>
    <li data-img="2.png">鼠標放置查看圖片2</li>
    <li data-img="3.png">鼠標放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
    var list1 = document.querySelector('li:nth-child(1)')
    var node1 = document.createElement('img')  //生成html元素節(jié)點
    node1.setAttribute('src','http://upload.jianshu.io/users/upload_avatars/2170795/c54ce48bc4a8?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120')// 設(shè)置屬性
    var preview = document.querySelector('.img-preview')
    list1.addEventListener('mouseover',function(){  
        preview.appendChild(node1)
    })
    list1.addEventListener('mouseout',function(){
        preview.removeChild(node1)
    })
    //
    var list2 = document.querySelector('li:nth-child(2)')
    var node2 = document.createElement('img')  //生成html元素節(jié)點
    node2.setAttribute('src','http://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png')// 設(shè)置屬性
    list2.addEventListener('mouseover',function(){
        preview.appendChild(node2)
    })
    list2.addEventListener('mouseout',function(){
        preview.removeChild(node2)
    })  
    //
    var list3 = document.querySelector('li:nth-child(3)')
    var node3 = document.createElement('img')  //生成html元素節(jié)點
    node3.setAttribute('src','http://upload.jianshu.io/collections/images/229031/%E7%AE%80%E5%8C%96%E7%89%88.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120')// 設(shè)置屬性
    list3.addEventListener('mouseover',function(){
        preview.appendChild(node3)
    })
    list3.addEventListener('mouseout',function(){
        preview.removeChild(node3)
    })      
</script>

預(yù)覽- http://js.jirengu.com/kobuf/1/edit

<ul class="ct">
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠標放置查看圖片1</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠標放置查看圖片2</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠標放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector('.ct'),
    childs = ct.querySelectorAll('li'),
    preview = document.querySelector('.img-preview');
for(var i=0; i<childs.length; i++){
    childs[i].addEventListener('mouseenter', function(){
       var dataImg = this.getAttribute('data-img');
       preview.innerHTML = '![](' + dataImg + ')'
    });
}
</script>

預(yù)覽- http://js.jirengu.com/fozuc/2/edit

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • JavaScript 程序采用了異步事件驅(qū)動編程模型。在這種程序設(shè)計風(fēng)格下，當(dāng)文檔、瀏覽器、元素或與之相關(guān)的對象發(fā)...
    劼哥stone閱讀 1,278評論 3贊 11
  • 一、問答 1. dom對象的innerText和innerHTML有什么區(qū)別？ innerHTML： 也就是從對象...
    饑人谷_羅偉恩閱讀 642評論 0贊 2
  • 聲明：本文來源于http://www.webzsky.com/?p=731我只是在這里作為自己的學(xué)習(xí)筆記整理一下（...
    angryyan閱讀 7,121評論 1贊 6
  • 如何批量操作 css 如何獲取 DOM 計算后的樣式 使用getComputedStyle獲取元素計算后的樣式 實...
    _Dot912閱讀 580評論 1贊 3
  • 以下文章為轉(zhuǎn)載，對理解JavaScript中的事件處理機制很有幫助，淺顯易懂，特分享于此。 什么是事件？ 事件(E...
    jxyjxy閱讀 3,069評論 1贊 10