事件的應(yīng)用

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

  • DOM0級方法指定的事件處理程序被認(rèn)為是元素的方法，就是將一個函數(shù)賦值給一個事件處理程序?qū)傩裕總€元素包括window和document都有自己處理程序的屬性）。例如：onclick、onmouseover、onmouseout等。因此，這時候的事件處理程序是在元素的作用域中執(zhí)行的；例如DOM0級綁定事件的方法：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="div1">點(diǎn)我</div>
</body>
<script type="text/javascript">
    var btn = document.getElementById('div1');
    btn.onclick = function(event){
        console.log(event);
        console.log(this.id); //div1
        console.log(this.innerHTML);//點(diǎn)我
    }
</script>
</html>

刪除事件的方法是：

btn.onclick = null;
  • ’DOM2級事件’定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener();所有的DOM節(jié)點(diǎn)都包含這兩種方法。
    它們都接受3個參數(shù)：要處理的事件名，事件處理程序的函數(shù)，和一個布爾值。 最后一個參數(shù)：如果為true，表示在捕獲階段調(diào)用事件處理程序，如果是false，表示在冒泡階段調(diào)用事件處理程序。例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="div2">你可以改變世界！</div>
</body>
<script type="text/javascript">
    var btn2 = document.getElementById('div2');
    btn2.addEventListener('click', function(e){
        console.log(e);
        console.log(this);
        console.log(this.innerHTML);//你可以改變世界！
    }, false);
</script>
</html>

然后我們再給btn2添加一個事件：

    btn2.addEventListener('click', function(e){
        console.log(this.id) //div2
    }, false);

最后我們會看到，當(dāng)點(diǎn)擊div的時候，這兩個事件都會發(fā)生，這就是DOM2級事件處理程序比DOM0級好的地方(DOM0級只能覆蓋，不會連續(xù)觸發(fā)！)。
??我們通過addEventListener()添加事件處理程序的程序只能使用removeEventListener()來移除。，這也意味著，通過addEventListener()添加的匿名函數(shù)無法移除：
接著以上的代碼：

btn2.removeEventListener('click',function(e){
        console.log(this.id);
    },false); //雖然調(diào)用了移除函數(shù)，但是事件并沒有移除

所以，我們必須使用這樣的寫法：

    function handler(){
        console.log('這次可以移除了！');
    }
    btn2.addEventListener('click',handler, false);
    btn2.removeEventListener('click',handler,false);

題目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)運(yùn)行，this是window，所以會返回undefined，而不是元素id。
  • 為一個事件添加多個事件處理程序時，執(zhí)行的順序不同。 addEventListener 會按照添加的順序執(zhí)行。 attachEvent 添加多個事件處理程序時，順序是無規(guī)律的。

題目3： 解釋IE事件冒泡和DOM2事件傳播機(jī)制？

  • IE事件冒泡是事件執(zhí)行開始在具體元素，逐級向上執(zhí)行
  • DOM2事件傳播有三個階段 事件捕獲階段、處于目標(biāo)階段、事件冒泡階段 ，事件捕獲階段是從最上級window開始捕獲事件，逐級向下傳播到具體元素，執(zhí)行事件后再逐級向上傳播到window對象

題目4：如何阻止事件冒泡？ 如何阻止默認(rèn)事件？

  • 高版本瀏覽器方法
    stopPropagation()取消事件進(jìn)一步捕獲或冒泡
    preventDefault()取消事件默認(rèn)行為
  • IE中 是屬性
    cancelBubble默認(rèn)為false,設(shè)置為true后可以取消事件冒泡
    returnValue默認(rèn)為true，設(shè)為false可以取消事件默認(rèn)行為

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

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

題目6： 補(bǔ)全代碼，要求：

當(dāng)點(diǎn)擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串；當(dāng)點(diǎn)擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
當(dāng)點(diǎn)擊每一個元素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>
//你的代碼
    function $(str) {
        return document.querySelector(str);
    }

    var ul = $('ul');
    var addStart = $('#btn-add-start');
    var addEnd = $('#btn-add-end');
    var inp = $('.ipt-add-content');

    addStart.addEventListener('click', function() {
              if(inp.value != ''){
        var newLi = document.createElement('li');
        newLi.innerText = inp.value;
        ul.insertBefore(newLi, ul.firstChild);
            }
    })

    addEnd.addEventListener('click', function() {
              if(inp.value != ''){
        var newLi = document.createElement('li');
        newLi.innerText = inp.value;
        ul.insertBefore(newLi, ul.lastChild);
              }
    })

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

題目7： 補(bǔ)全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片。

<ul class="ct">
    <li data-img="1.png">鼠標(biāo)放置查看圖片1</li>
    <li data-img="2.png">鼠標(biāo)放置查看圖片2</li>
    <li data-img="3.png">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代碼
var ct = document.querySelector('.ct');
    var imgPreview = document.querySelector('.img-preview');
    ct.addEventListener('mousemove', function(e) {
        if(e.target.tagName.toLowerCase() === 'li') {
            imgPreview.innerHTML = '<img src = "' + e.target.getAttribute('data-img') + '"/>';
        }
    })
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

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