zj9 事件

事件模型、事件冒泡、事件捕獲、事件代理、阻止默認(rèn)事件、事件兼容等

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

  • 添加多個事件處理程序區(qū)別:
    Dom2級:可以添加多個事件處理程序
    Dom0級:為一個事件添加多個事件處理程序時(shí),后面的程序會覆蓋前面的。
  • 是否可選事件模型
    Dom2級:可以選擇是在捕獲階段(true)和冒泡階段(false)
    Dom0級:只能在冒泡階段
  • 刪除綁定在元素上的事件處理程序

Dom2級:removeEventListener()

var btn=document.querySelector("#btn");
var handler=function(){
    alert(this.id);
}

btn.addEventListener("click",handler,false);// 指定事件處理程序
btn.removeEventListener("click",handler,false);// 刪除事件處理程序

Dom0級:將事件處理程序設(shè)置為null

var btn=document.querySelector("#btn");
btn.onclick=function () {
    alert(this.id);
}// 添加事件處理程序

btn.onclick=null;// 刪除事件處理程序

題目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

  • 為一個事件添加多個事件處理程序時(shí),執(zhí)行順序不同
    addEventListener添加會按照添加順序執(zhí)行,而attachEvent添加多個事件處理程序時(shí)順序無規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的,但是添加的多了就無規(guī)律了),所以添加多個的時(shí)候,不依賴執(zhí)行順序的還好,若是依賴于函數(shù)執(zhí)行順序,最好自己處理,不要指望瀏覽器

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



IE事件冒泡:事件開始時(shí)由最具體的元素接收,然后逐級向上傳播到較為不具體的元素,如上圖一中所示,如果是一個點(diǎn)擊事件,當(dāng)點(diǎn)擊div時(shí),是一層一層的向父級元素傳遞

DOM2級事件規(guī)定事件流包括三個階段,事件捕獲階段,處于目標(biāo)階段,事件冒泡階段,首先發(fā)生的是事件捕獲,為截取事件提供機(jī)會,然后是實(shí)際目標(biāo)接收事件,最后是冒泡階段

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

  • 支持DOM2瀏覽器
    阻止冒泡e.stopPropagation();
    阻止默認(rèn)事件event.preventDefault()

  • IE瀏覽器
    阻止冒泡e.cancelBubble = true;
    阻止默認(rèn)事件event.returnValue = false;

阻止事件冒泡
function stopPropagation(event){
    if(event.stopPropagation){
        event.stopPropagation()
    }
    else{
        event.cancelBubble = true;
    }

}


阻止默認(rèn)事件
function  preventDefault(event){
    if(event.preventDefault){
        event.preventDefault()
    }
    else{
        e.returnValue = false;
    }
}

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

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<script>
var ct=document.querySelector('.ct');
ct.addEventListener('click',showText);//將事件監(jiān)聽放在父級元素
function showText(event){
    console.log(event.target.innerText);
}
</script> 

題目6: 補(bǔ)全代碼,要求:

當(dāng)點(diǎn)擊按鈕開頭添加時(shí)在<li>這里是</li>元素前添加一個新元素,內(nèi)容為用戶輸入的非空字符串;當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在最后一個 li 元素后添加用戶輸入的非空字符串.
當(dāng)點(diǎn)擊每一個元素li時(shí)控制臺展示該元素的文本內(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>
var ct=document.querySelector('.ct');
var ipt=document.querySelector('.ipt-add-content');
var addStart=document.querySelector('#btn-add-start');
var addEnd=document.querySelector('#btn-add-end');

ct.addEventListener('click',showText);
addStart.addEventListener('click',addBefore);
addEnd.addEventListener('click',addAfter);

function showText(event){
    console.log(event.target.innerText);
}
function addBefore(){
    if(!ipt.value){
        alert('Please fill in the contents in the input box');
        return;
    };
    var li=document.createElement('li');
    li.innerText=ipt.value;
    ct.insertBefore(li,ct.firstChild);
}
function addAfter(){
    if(!ipt.value){
        alert('Please fill in the contents in the input box');
        return;
    };
    var li=document.createElement('li');
    li.innerText=ipt.value;
    ct.appendChild(li);
}

</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="http://a.hiphotos.baidu.com/zhidao/pic/item/1b4c510fd9f9d72aa05bac6cd22a2834349bbb80.jpg">鼠標(biāo)放置查看圖片1</li>
    <li data-img="http://www.qqleju.com/uploads/allimg/140326/26-045728_826.jpg">鼠標(biāo)放置查看圖片2</li>
    <li data-img="http://img1.3lian.com/2015/w2/12/d/83.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>

var ct = document.querySelector('.ct');
var preview = document.querySelector('.img-preview');

ct.addEventListener('mouseover',eventOver);
ct.addEventListener('mouseout',eventOut);
  
function eventOver(e){
    var img = e.target.getAttribute('data-img');
    preview.innerHTML =  '<img src = "' + img + '">';
}
function eventOut(e){
     preview.innerHTML = '';
}
</script>

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

<script>
//綁定事件
    function  bindEvent(node,type,handler){
        if(node.addEventListener){
            node.addEventListener(type,handler);
        }
        else{
            node.attachEvent('on'+type,handler);
        }
    }
//解除事件
    function removeEvent(node,type,handler){
        if(node.removeEventListener){
            node.removeEventListener(type,handler);
        }
        else{
            node.detachEvent('on'+type,handler);
        }
    }
//獲取target
    function getTarget(e){
        return e.target || e.srcElement;
    }

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

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

  • 聲明:本文來源于http://www.webzsky.com/?p=731我只是在這里作為自己的學(xué)習(xí)筆記整理一下(...
    angryyan閱讀 7,101評論 1 6
  • 一、問答 1. dom對象的innerText和innerHTML有什么區(qū)別? innerHTML: 也就是從對象...
    饑人谷_羅偉恩閱讀 627評論 0 2
  • 題目1: DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別? DOM0事件處理程序,事件名以'on'開頭,...
    饑人谷_Leon閱讀 228評論 0 0
  • 1.何謂事件 用戶和網(wǎng)頁交互時(shí)的行為,動作,稱之為事件; 2.監(jiān)視事件 現(xiàn)實(shí)生活中,為了監(jiān)視車輛是否違章,通過在紅...
    草鞋弟閱讀 625評論 0 0
  • 如何批量操作 css 如何獲取 DOM 計(jì)算后的樣式 使用getComputedStyle獲取元素計(jì)算后的樣式 實(shí)...
    _Dot912閱讀 579評論 1 3