事件

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

Dom0級(jí)事件處理程序是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩匝甓觯ㄟ^將事件處理程序設(shè)置為null刪除綁定在元素上的事件處理程序宏胯。這種方法無法給一個(gè)事件添加多個(gè)事件處理程序,后面的程序會(huì)覆蓋前面的程序谦秧。相當(dāng)于變量賦值蝎土。
Dom2級(jí)定義了addEventListener()和removeEventListener()用于處理指定和刪除事件處理程序樱报。所有Dom節(jié)點(diǎn)都包含這兩個(gè)方法蝙昙,并且它們都接受3個(gè)參數(shù)闪萄,要處理的事件名、作為事件處理程序的函數(shù)和一個(gè)布爾值奇颠。最后這個(gè)布爾值參數(shù)如果是true败去,表示在捕獲階段調(diào)用事件處理程序;如果是false烈拒,表示在冒泡階段調(diào)用事件處理程序圆裕。相當(dāng)于函數(shù)調(diào)用

  • 支持的事件處理程序:
    DOM2事件監(jiān)聽對(duì)同一個(gè)事件可以添加多個(gè)處理函數(shù),當(dāng)事件發(fā)生觸發(fā)時(shí)會(huì)依次生效荆几,而對(duì)于DOM0事件監(jiān)聽吓妆,因?yàn)闀?huì)將添加的事件處理程序轉(zhuǎn)化為它的一個(gè)屬性值,因此當(dāng)添加多個(gè)事件處理程序時(shí)吨铸,只有最后一個(gè)處理程序生效行拢,之前的會(huì)被覆蓋
  • 功能:
    DOM2級(jí)提供的兩個(gè)函數(shù)addEventListener和removeEventListener可以方便我們對(duì)冒泡和捕獲行為進(jìn)行控制,提供更大的便利性

2. attachEvent與addEventListener的區(qū)別诞吱?

attachEvent屬于IE事件的處理方法舟奠,而addEventListener屬于DOM事件的處理方法。
在添加事件處理程序事addEventListener和attachEvent主要有幾個(gè)區(qū)別

  • 參數(shù)個(gè)數(shù)不相同房维,這個(gè)最直觀沼瘫,addEventListener有三個(gè)參數(shù),attachEvent只有兩個(gè)咙俩,attachEvent添加的事件處理程序只能發(fā)生在冒泡階段耿戚,addEventListener第三個(gè)參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理(我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段)
  • 第一個(gè)參數(shù)意義不同,addEventListener第一個(gè)參數(shù)是事件類型(比如click,load)溅话,而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱(onclick晓锻,onload)
  • 事件處理程序的作用域不相同歌焦,addEventListener的作用域是元素本身飞几,this是指的觸發(fā)元素,而attachEvent事件處理程序會(huì)在全局變量?jī)?nèi)運(yùn)行独撇,this是window屑墨,所以剛才例子才會(huì)返回undefined,而不是元素id
  • 為一個(gè)事件添加多個(gè)事件處理程序時(shí)纷铣,執(zhí)行順序不同卵史,addEventListener添加會(huì)按照添加順序執(zhí)行,而attachEvent添加多個(gè)事件處理程序時(shí)順序無規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的搜立,但是添加的多了就無規(guī)律了)以躯,所以添加多個(gè)的時(shí)候,不依賴執(zhí)行順序的還好啄踊,若是依賴于函數(shù)執(zhí)行順序忧设,最好自己處理,不要指望瀏覽器

3. 解釋IE事件冒泡和DOM2事件傳播機(jī)制颠通?


IE的事件冒泡:事件開始時(shí)由最具體的元素接收址晕,然后逐級(jí)向上傳播到較為不具體的元素

DOM事件流:DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段,事件捕獲階段顿锰,處于目標(biāo)階段谨垃,事件冒泡階段,首先發(fā)生的是事件捕獲硼控,為截取事件提供機(jī)會(huì)刘陶,然后是實(shí)際目標(biāo)接收事件,最后是冒泡階段

4. 如何阻止事件冒泡牢撼? 如何阻止默認(rèn)事件匙隔?

  • 阻止事件冒泡:通過stopPropogation()方法來阻止事件進(jìn)一步捕獲或冒泡
  • 阻止默認(rèn)事件:通過preventDefault()方法來阻止默認(rèn)事件

5. 有如下代碼,要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(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);
});
</script>

6. 補(bǔ)全代碼牡直,要求:

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

ct.addEventListener('click', function(e){
    console.log(e.target.innerText);
  });
addStartBtn.addEventListener('click',function(){
    if(ipt.value){
        var li = document.createElement('li');
        li.innerText = ipt.value;
        ct.insertBefore(li,ct.firstChild);
    }
})
addEndBtn.addEventListener('click',function(){
    if(ipt.value){
        var li = document.createElement('li');
        li.innerText = ipt.value;
        ct.appendChild(li);
    }
})
</script>

7. 補(bǔ)全代碼,要求:當(dāng)鼠標(biāo)放置在li元素上阔加,會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(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 preview = document.querySelector('.img-preview');
var ct = document.querySelector('.ct');
 
 ct.addEventListener('mouseover',function(e){
    var dataImg=e.target.getAttribute('data-img');
      preview.innerHTML='<img src ="'+dataImg+'">';
 })

ct.addEventListener('mouseout',function(){
    preview.innerHTML = '';
})
//注意mouseenter和mouseover的區(qū)別
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子胳喷,更是在濱河造成了極大的恐慌湃番,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吭露,死亡現(xiàn)場(chǎng)離奇詭異吠撮,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)讲竿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門泥兰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人题禀,你說我怎么就攤上這事鞋诗。” “怎么了迈嘹?”我有些...
    開封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵削彬,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我秀仲,道長(zhǎng)融痛,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任啄育,我火速辦了婚禮酌心,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘挑豌。我一直安慰自己安券,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開白布氓英。 她就那樣靜靜地躺著侯勉,像睡著了一般。 火紅的嫁衣襯著肌膚如雪铝阐。 梳的紋絲不亂的頭發(fā)上址貌,一...
    開封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音徘键,去河邊找鬼练对。 笑死,一個(gè)胖子當(dāng)著我的面吹牛吹害,可吹牛的內(nèi)容都是我干的螟凭。 我是一名探鬼主播,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼它呀,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼螺男!你這毒婦竟也來了棒厘?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤下隧,失蹤者是張志新(化名)和其女友劉穎奢人,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體淆院,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡何乎,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了迫筑。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宪赶。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖脯燃,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蒙保,我是刑警寧澤辕棚,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站邓厕,受9級(jí)特大地震影響逝嚎,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜详恼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一补君、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧昧互,春花似錦挽铁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至玖雁,卻和暖如春更扁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背赫冬。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來泰國打工浓镜, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人劲厌。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓膛薛,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親脊僚。 傳聞我的和親對(duì)象是個(gè)殘疾皇子相叁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

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

  • 如何批量操作 css 如何獲取 DOM 計(jì)算后的樣式 使用getComputedStyle獲取元素計(jì)算后的樣式 實(shí)...
    _Dot912閱讀 553評(píng)論 1 3
  • JavaScript 程序采用了異步事件驅(qū)動(dòng)編程模型遵绰。在這種程序設(shè)計(jì)風(fēng)格下,當(dāng)文檔增淹、瀏覽器椿访、元素或與之相關(guān)的對(duì)象發(fā)...
    劼哥stone閱讀 1,252評(píng)論 3 11
  • 事件 JavaScript和HTML的交互是通過事件實(shí)現(xiàn)的。JavaScript采用異步事件驅(qū)動(dòng)編程模型虑润,當(dāng)文檔成玫、...
    徐國軍_plus閱讀 572評(píng)論 0 2
  • DOM0級(jí)和DOM2級(jí)在事件監(jiān)聽使用方式上有什么區(qū)別? DOM0級(jí)事件監(jiān)聽:用JavaScript指定事件處理程序...
    LeeoZz閱讀 369評(píng)論 0 1
  • 聲明:本文來源于http://www.webzsky.com/?p=731我只是在這里作為自己的學(xué)習(xí)筆記整理一下(...
    angryyan閱讀 6,971評(píng)論 1 6