事件

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

  • 區(qū)別1：
    用DOM0事件監(jiān)聽時，無法向一個元素添加多個監(jiān)聽。
    例如：
btn.onclick = function(){
  console.log(1)
}
btn.onclick = function(){
  console.log(2)
}

點擊會只會輸出2，因為后添加的監(jiān)聽會覆蓋之前添加的監(jiān)聽
而DOM2級可以對一個元素添加多個監(jiān)聽

  • 區(qū)別2：
    在刪除監(jiān)聽的時候，
    DOM0級方法只需把元素的對應(yīng)事件屬性賦為null即可
    DOM2級方法可以用removeEventListener()方法刪除

  • 區(qū)別3：
    DOM2級方法有三個參數(shù)：
    1.事件類型
    2.事件處理方法
    3.布爾參數(shù)
    其中布爾參數(shù)如果是true表示在捕獲階段調(diào)用事件處理程序，如果是false，則是在事件冒泡階段處理。

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

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

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

IE的事件冒泡：
事件冒泡是當發(fā)生事件的時候，事件從當前被點擊的元素向document傳遞。在傳遞的過程中如果遇到相同的事件，也會響應(yīng)事件。
DOM2事件傳播機制：
有3個階段：捕獲階段、處于目標階段、冒泡階段。
捕獲階段:當發(fā)生事件的時候，事件從document傳到目標，如果傳遞的過程里有相同的事件就會響應(yīng)。當然元素一般都是默認不捕獲事件，需要把false改為true
處于目標階段:在目標響應(yīng)事件。
冒泡階段:從目標又一層層的傳到body。在傳遞的過程中如果遇到相同的事件，也會響應(yīng)事件。

TIM圖片20170410214220.png

在兼容所有瀏覽器的事件處理程序上主要采用冒泡機制作為事件傳播機制。同時也衍生出了解決當需要在父元素下進行新增的子元素的操作所造成無法觸發(fā)事件或者事件方法復(fù)雜的技巧，如：

<body>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
    </ul>

    <script>
        function $(id){
          return document.querySelector(id);
        }
        $('ul').addEventListener('click', function(e){
          if(e.target.tagName.toLowerCase() === 'li'){
            console.log(e.target.innerHTML);
          }
        });
    </script>
</body>

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

  • 阻止事件冒泡
<body>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
    </ul>
    <script>
        function $(id){
            return document.querySelector(id);
        }
        function $$(id){
            return document.querySelectorAll(id);
        }
        [].forEach.call($$('li'), function(node){
            node.addEventListener('click', function(e){
            e.stopPropagation(); //阻止事件冒泡方法
            console.log(e.target.innerHTML);
            });
        })
        //當父元素也設(shè)置了點擊事件時，點擊子元素也會觸發(fā)父元素事件處理程序
        $('ul').addEventListener('click',function(e){
            console.log(e.target);
        })
    </script>
</body>
  • 阻止默認事件

<body>
    <a >饑人谷官網(wǎng)</a>

    <script>
        function $(id){
            return document.querySelector(id);
        }
        $('a').addEventListener('click', function(e){
            e.preventDefault();
            console.log('阻止跳轉(zhuǎn)...')
        })
    </script>
</body>

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

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>

答：

    <ul>
        <li>這里是</li>
        <li>饑人谷</li>
        <li>前端6班</li>
    </ul>

    <script>
        $('ul').addEventListener('click',function(e){
            if(e.target.tagName.toLowerCase() === 'li'){
                console.log(e.target.innerHTML);
            }
        })

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

參考答案：

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>

<script>
    //方法1， 直接給元素綁定事件

    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);
    })
    }
  
    //方法2 ，使用事件代理，把事件監(jiān)聽綁定到父容器上，根據(jù)事件的來源進行處理
  
    var ct = document.querySelector('.ct');
    ct.addEventListener('click', function(e){
        console.log(e.target.innerText);
    });
   
</script>

6： 補全代碼，要求：

  • 當點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串；當點擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
  • 當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。
<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>
//你的代碼
</script>

答：

<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>
    var content = $('.ipt-add-content');
    var btnStart = $('#btn-add-start');
    var btnEnd = $('#btn-add-end');

    $('ul').addEventListener('click',function(e){
        if(e.target.tagName.toLowerCase() === 'li') {
        console.log(e.target.innerHTML);
        }
    });

    btnStart.addEventListener('click',function(){
        var addLi = document.createElement('li');
        if(content.value) {
            addLi.innerHTML = content.value;
            $('ul').insertBefore(addLi,$('ul').children[0]);
        }else{
            console.log('請?zhí)顚憙?nèi)容后再添加！')
        } 
    });

    btnEnd.addEventListener('click',function(){
        var addLi = document.createElement('li');
        if(content.value) {
            addLi.innerHTML = content.value;
            $('ul').appendChild(addLi);
        }else{
            console.log('請?zhí)顚憙?nèi)容后再添加！')
        } 
    });

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

參考答案：

<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'),
        addStartBtn = document.querySelector('#btn-add-start'),
        addEndBtn = document.querySelector('#btn-add-end'),
        ipt = document.querySelector('#ipt-add-content');
    
    ct.addEventListener('click', function(e){
        if(e.target.tagName.toLowerCase() === 'li'){
        console.log(e.target.innerText);
        }
    });
    
    addEndBtn.addEventListener('click', function(){
        var li = document.createElement('li');
        li.innerText = ipt.value;
        ct.appendChild(li);
    });
    
    addStartBtn.addEventListener('click', function(){
        var li = document.createElement('li');
        li.innerText = ipt.value;
        ct.insertBefore(li,ct.firstChild);
    });
</script>

7： 補全代碼，要求：當鼠標放置在li元素上，會在img-preview里展示當前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>
//你的代碼
</script>

答：

    <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 ulCt = $('.ct');
        var preview = $('.img-preview');

        ulCt.addEventListener('mouseover',function(e){
            if(e.target.tagName.toLowerCase() === 'li'){
            // console.log(e.toElement.getAttribute('data-img'))
            var address = e.toElement.getAttribute('data-img')
            var imgPreview = document.createElement('img');
            imgPreview.setAttribute('src',address);
            preview.appendChild(imgPreview);
            }
        });

        ulCt.addEventListener('mouseout',function(e){
            if(e.target.tagName.toLowerCase() === 'li'){
            preview.innerHTML = '';
            }
        });

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

參考答案：

<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 = '< img src="' + dataImg + '">';  //img前面本不用空格，簡書會轉(zhuǎn)義，所以加空格。
        });
    }
    
    //也可以考慮不使用循環(huán)，用事件代理把事件綁定到父元素上，想想怎么實現(xiàn)
</script>

8： 在 github 上創(chuàng)建個人項目，把視頻里事件兼容的函數(shù)寫法放入項目，在 Readme.md里描述項目(選做題目)

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 聲明：本文來源于http://www.webzsky.com/?p=731我只是在這里作為自己的學(xué)習(xí)筆記整理一下（...
    angryyan閱讀 7,242評論 1贊 6
  • 一、問答 1. dom對象的innerText和innerHTML有什么區(qū)別？ innerHTML： 也就是從對象...
    饑人谷_羅偉恩閱讀 699評論 0贊 2
  • JavaScript 程序采用了異步事件驅(qū)動編程模型。在這種程序設(shè)計風(fēng)格下，當文檔、瀏覽器、元素或與之相關(guān)的對象發(fā)...
    劼哥stone閱讀 1,333評論 3贊 11
  • 如何批量操作 css 如何獲取 DOM 計算后的樣式 使用getComputedStyle獲取元素計算后的樣式 實...
    _Dot912閱讀 668評論 1贊 3
  • 1.何謂事件 用戶和網(wǎng)頁交互時的行為,動作,稱之為事件; 2.監(jiān)視事件 現(xiàn)實生活中，為了監(jiān)視車輛是否違章，通過在紅...
    草鞋弟閱讀 738評論 0贊 0

友情鏈接更多精彩內(nèi)容