成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

js事件詳解

AlienZHOU / 2050人閱讀

摘要：使用級(jí)方法指定的事件處理程序被認(rèn)為是元素的方法。用于立即停止事件在中的傳播，取消進(jìn)一步的事件捕獲或冒泡。捕獲事件目標(biāo)對(duì)象冒泡只有在事件處理程序執(zhí)行期間，對(duì)象才會(huì)存在，執(zhí)行完成后，對(duì)象就會(huì)被銷(xiāo)毀。

引用

事件是我認(rèn)為前端最特別的地方，這是唯一其他語(yǔ)言不一樣的地方，我們通過(guò)它與頁(yè)面進(jìn)行交互。

事件流

事件流描述的是從頁(yè)面中接收事件的順序。IE和網(wǎng)景團(tuán)隊(duì)提出流相反的事件流概念。IE事件流是事件冒泡流，而網(wǎng)景是事件捕獲流。

事件冒泡

IE的事件流叫做事件冒泡，即事件開(kāi)始由最具體的元素接收，然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)。




    
    Document


    

        點(diǎn)我點(diǎn)我

如果你單擊了div元素，那么click事件會(huì)按照如下事件傳播




document
點(diǎn)擊元素會(huì)從最具體的元素向上傳播。所有現(xiàn)代瀏覽器都支持事件冒泡，但是具體實(shí)現(xiàn)還是有些差別，IE5.5及更早版本的事件會(huì)跳過(guò)元素。

事件捕獲

網(wǎng)景公司提出的另一個(gè)事件流叫做事件捕獲，事件捕獲的思想上不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件，而最具體的元素應(yīng)該最后接收到事件，事件捕獲的目的的事件到達(dá)預(yù)期目標(biāo)之前捕獲它。之前的例子來(lái)說(shuō)就是

document
html
body
div

由于老版的瀏覽器不支持事件捕獲，所以我們一般使用的都是事件冒泡。

DOM事件流

DOM2級(jí)規(guī)定的事件流包含三個(gè)階段，事件捕獲階段、處于目標(biāo)階段和事件冒泡階段。

事件處理程序

事件就是用戶(hù)或?yàn)g覽器自身執(zhí)行的某種動(dòng)作，click、load、mouseover，都是事件的名字。而響應(yīng)某個(gè)事件的函數(shù)就叫做事件處理程序，click的事件處理程序就是onclick,load事件處理程序就是onload。

HTML事件處理程序

在HTML中指定事件處理程序有兩個(gè)缺點(diǎn)，一是存在時(shí)間差，如果頁(yè)面已經(jīng)出現(xiàn)了HTML元素，但是js還沒(méi)加載完，這時(shí)候就會(huì)報(bào)錯(cuò)。還有就是會(huì)造成js代碼與HTML代碼耦合。

DOM0級(jí)事件處理程序

通過(guò)js指定事件處理程序的傳統(tǒng)方式，就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?。這種為事件處理程序賦值的方法是在第四代web瀏覽器中出現(xiàn)的，現(xiàn)在瀏覽器還支持這種操作。
使用DOM0級(jí)方法指定的事件處理程序被認(rèn)為是元素的方法。因此，這時(shí)候的事件處理程序是在元素的作用域中運(yùn)行；程序中的this指向當(dāng)前元素。

var btn = document.getElementById("mybtn");
btn.onclick = function () {
    alert(this.id);    //mybtn
}

DOM0級(jí)添加的事件處理程序會(huì)在事件流的冒泡階段被處理。
也可以通過(guò)刪除DOM0級(jí)方法指定的事件處理程序，只要像下面這樣將事件事件處理程序?qū)傩栽O(shè)置為null就可以了。
將事件處理程序設(shè)置為null之后，再單擊按鈕將不會(huì)有任何動(dòng)作發(fā)生。

DOM2級(jí)事件處理程序

“DOM2級(jí)事件”定義了兩個(gè)方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和 removeEventListener()。所有DOM節(jié)點(diǎn)都包含這兩個(gè)方法，并且它們都接收三個(gè)參數(shù)，要處理的事件名、事件處理函數(shù)、一個(gè)布爾值。最后一個(gè)參數(shù)如果是true，表示在捕獲階段處理程序，如果是false，表示在捕獲階段處理程序。
與DOM0級(jí)方法一樣，這里的this指向是添加處理事件的元素中執(zhí)行，使用DOM2級(jí)可以為元素添加多個(gè)事件處理程序，順序按添加事件的順序執(zhí)行。通過(guò)addEventListener添加的事件處理程序只能通過(guò)removeEventListener移除，移除傳入的參數(shù)必須與添加時(shí)的參數(shù)相同，這就以為添加的匿名函數(shù)無(wú)法移除。

IE中事件處理程序

IE實(shí)現(xiàn)了兩個(gè)方法:attachEvent和detachEvent。這兩個(gè)方法，通過(guò)attachEvent添加的事件處理程序都會(huì)被添加到冒泡階段，注意attachEvent第一個(gè)參數(shù)是onclick,而非addEventListener方法中的click。在IE中使用attachEvent的this指向的是全局作用域。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function () {
    console.log(this === window); // true
})

同樣的可以添加多個(gè)事件，不過(guò)事件的執(zhí)行順序是相反的。
我們可以封裝跨瀏覽器處理程序。

var EventUtil = {

        addHandler: function (ele, type, handler) {
            if (ele.addEventListener) {
                ele.addEventListener(type, handler, false)
            } else if (ele.attachEvent) {
                ele.attachEvent(`on${type}`, handler)
            } else {
                ele[`on${type}`] = handler
            }
        },
        removeHandler: function (ele, type, handler) {
            if (ele.removeEventListener) {
                ele.removeEventListener(type, handler, false)
            } else if (ele.detachEvent) {
                ele.detachEvent(`on${type}`, handler)
            } else {
                ele[`on${type}`] = null
            }
        },
    }
DOM中的事件對(duì)象

無(wú)論指定事件處理程序時(shí)用的什么方法，都會(huì)傳入一個(gè)event對(duì)象。事件處理程序內(nèi)部，對(duì)象this的值等于currentTarget的值，而target只包含事件的實(shí)際目標(biāo)，如果直接將事件處理程序指定給了目標(biāo)元素，this、currentTarget和target包含相同的值。

var bth = document.getElementById("myBth");

bth.onclick = function (e) {
    console.log(e.currentTarget === this); // true
    console.log(e.target === this); // true
}

可以通過(guò)e.preventDefault()阻止事件的默認(rèn)行為，cancelable為true的事件才可以阻止。
stopPropagation()用于立即停止事件在DOM中的傳播，取消進(jìn)一步的事件捕獲或冒泡。

var btn = document.getElementById("myBtn");

btn.onclick = function (e) {
    e.stopPropagation();
}

document.body.onclick = function (e) {
    //不執(zhí)行
}

可以用eventPhase來(lái)確定事件處于哪個(gè)事件流階段。
1：捕獲
2：事件目標(biāo)對(duì)象
3：冒泡
只有在事件處理程序執(zhí)行期間，event對(duì)象才會(huì)存在，執(zhí)行完成后，對(duì)象就會(huì)被銷(xiāo)毀。

IE中的事件對(duì)象

在使用DOM0級(jí)方法添加事件處理程序時(shí)，event 對(duì)象做為window對(duì)象的一個(gè)屬性存在。

var btn = document.getElementById("myBtn");
btn.onclick = function () {
    var event = window.event;
    console.log(event.type)
}

var btn = document.getElementById("myBtn");
btn.onclick = function () {
    var event = window.event;
    console.log(event.srcElement === this)  //true
    //event.srcElement 相當(dāng)于DOM中的target
}

var btn = document.getElementById("myBtn");
btn.attachEvent = function (event) {
    console.log(event.srcElement === this)  //false
    //this是window
}

returnValue屬性相當(dāng)于preventDefault,cancelBubble屬性stopPropagation()方法類(lèi)型，不過(guò)其只能阻止冒泡，因?yàn)榈桶姹綢E只支持冒泡。

跨瀏覽器的事件對(duì)象 
var EventUtil = {
    addHandler: function (ele, type, handler) {

    },
    getEvent: function (event) {
        return event ? event : window.event
    },
    getTarget: function (event) {
        return event || event.srcElement
    },
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault()
        } else {
            event.returnValue = false
        }
    },
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation()
        } else {
            event.cancelBubble = true
        }
    }
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83540.html

相關(guān)文章

  • 【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門(mén)

    摘要：個(gè)人前端文章整理從最開(kāi)始萌生寫(xiě)文章的想法，到著手開(kāi)始寫(xiě)，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫(xiě)好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開(kāi)始萌生寫(xiě)文章的想法，到著手...

    madthumb 評(píng)論0 收藏0

  • JS基礎(chǔ)篇--JS之onunload、onbeforeunload事件詳解

    摘要：事件事件在用戶(hù)退出頁(yè)面時(shí)發(fā)生。注意事件同樣觸發(fā)了頁(yè)面載入事件事件。如圖所示大體一句話(huà)描述和支持事件但是或者不支持該事件。瀏覽器兼容情況完美支持不支持文字提醒信息不支持如圖所示使用遇到的凡是標(biāo)簽都會(huì)觸發(fā)事件包括這種。 簡(jiǎn)介 onunload，onbeforeunload都是在刷新或關(guān)閉時(shí)調(diào)用，可以在腳本中通過(guò) window.onunload來(lái)調(diào)用。區(qū)別在于onbeforeunload在o...

    rollback 評(píng)論0 收藏0

  • js事件委托詳解

    摘要：先說(shuō)事件流的事件流分為個(gè)階段捕獲目標(biāo)冒泡。如果是每個(gè)都去單獨(dú)綁定事件明顯不科學(xué)，畢竟去拿列表也是畢竟消耗性能的，同時(shí)每個(gè)事件綁定的回調(diào)函數(shù)也會(huì)占用大量的內(nèi)存。那如果有動(dòng)態(tài)插入的元素呢于是委托就可以用上了。 先說(shuō)事件流 js的事件流分為3個(gè)階段：捕獲、目標(biāo)、冒泡。即事件來(lái)了，先從上到下傳播（捕獲），到達(dá)目標(biāo)節(jié)點(diǎn)（目標(biāo)），然后在往上傳播（冒泡）?？聪聢D： showImg(https://s...

    Sleepy 評(píng)論0 收藏0

  • js事件委托詳解

    摘要：先說(shuō)事件流的事件流分為個(gè)階段捕獲目標(biāo)冒泡。如果是每個(gè)都去單獨(dú)綁定事件明顯不科學(xué)，畢竟去拿列表也是畢竟消耗性能的，同時(shí)每個(gè)事件綁定的回調(diào)函數(shù)也會(huì)占用大量的內(nèi)存。那如果有動(dòng)態(tài)插入的元素呢于是委托就可以用上了。 先說(shuō)事件流 js的事件流分為3個(gè)階段：捕獲、目標(biāo)、冒泡。即事件來(lái)了，先從上到下傳播（捕獲），到達(dá)目標(biāo)節(jié)點(diǎn)（目標(biāo)），然后在往上傳播（冒泡）?？聪聢D： showImg(https://s...

    GeekQiaQia 評(píng)論0 收藏0

  • js事件詳解一

    摘要：所有節(jié)點(diǎn)中都包含這兩個(gè)方法，并且它們都接受個(gè)參數(shù)要處理的事件名作為事件處理程序的函數(shù)和一個(gè)布爾值。最后這個(gè)布爾值如果是，表示在捕獲階段調(diào)用事件處理程序如果是，表示在冒泡階段調(diào)用事件處理程序。 事件處理的方法： 1、直接在html中編寫(xiě) 例如： 但是這樣處理的事件存在兩個(gè)缺點(diǎn)，一個(gè)是時(shí)間差問(wèn)題，一個(gè)是不同瀏覽器對(duì)標(biāo)識(shí)符的解析有差異，很可能會(huì)在訪(fǎng)問(wèn)非限定對(duì)...

    TerryCai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<