JavaScript中事件模型指的是什么

這篇文章給大家分享的是有關(guān)JavaScript中事件模型指的是什么的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),漢陰企業(yè)網(wǎng)站建設(shè),漢陰品牌網(wǎng)站建設(shè),網(wǎng)站定制,漢陰網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,漢陰網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。


事件

用戶與網(wǎng)頁交互是通過事件實現(xiàn)的，事件剛開始是作為分擔(dān)服務(wù)器負(fù)載的一個手段，起初沒有統(tǒng)一的規(guī)范，直到 DOM2 級，網(wǎng)景和 IE 才開始有各自的 API 規(guī)范。

對于事件的觸發(fā)機制，兩個公司都認(rèn)為頁面的觸發(fā)機制并不只是點擊了某個元素，就只觸發(fā)當(dāng)前目標(biāo)元素的事件。

比方說：頁面有多個同心圓，當(dāng)點擊最里面的圓時，你其實也點擊了包含這個圓外面的那些圓。  兩個公司對這點的認(rèn)同是一致的，但是事件流的傳播順序上采用了不同的兩種方案來實現(xiàn)，即事件冒泡和事件捕獲。

一、事件冒泡

IE 瀏覽器從老版本開始就一直支持事件冒泡機制，所謂事件冒泡，指事件流開始是從較為具體的元素接收，一直傳播上不具體的元素上。

就是從目標(biāo)元素傳播到父級元素。

<body>
    <div id="parent">
        <div id="child"></div>
    </div>
    <script>
    function childEventHandler(event) {
        console.log(this);
        console.log("child 被點擊了");
    }
    function parentEventHandler(event) {
        console.log(this);
        console.log("parent 被點擊了");
    }
    function bodyEventHandler(event) {
        console.log(this);
        console.log("body 被點擊了");
    }
    function htmlEventHandler(event) {
        console.log(this);
        console.log("html 被點擊了");
    }
    function documentEventHandler(event) {
        console.log(this);
        console.log("document 被點擊了");
    }
    function windowEventHandler(event) {
        console.log(this);
        console.log("window 被點擊了");
    }
    var bodyEl = document.getElementsByTagName("body")[0];
    var htmlEl = document.getElementsByTagName("html")[0];
    var win = window;
    var parentEl = document.getElementById("parent");
    var childEl = document.getElementById("child");
    childEl.onclick = childEventHandler;
    parentEl.onclick = parentEventHandler;
    bodyEl.onclick = bodyEventHandler;
    htmlEl.onclick = htmlEventHandler;
    document.onclick = documentEventHandler;
    win.onclick = windowEventHandler;
    </script>
</body>

如下圖所示，如果點擊了 id 為 child 的元素后，事件流會從 child 一直傳播到 window 對象。

JavaScript中事件模型指的是什么

JavaScript中事件模型指的是什么

所有現(xiàn)代瀏覽器都支持事件冒泡。

二、事件捕獲

由網(wǎng)景公司主導(dǎo)的事件捕獲則剛好和事件冒泡相反，事件流開始從不具體的元素觸發(fā)，然后傳播到具體的元素上。簡而言之就是從父級元素傳播到目標(biāo)元素。

JavaScript中事件模型指的是什么

由于事件捕獲是從 IE 9開始支持，不兼容老版本瀏覽器，所以使用的人比較少。

三、事件流

DOM 規(guī)定事件包括三個階段，事件捕獲，處于目標(biāo)階段、事件冒泡。

從 IE 9 開始的瀏覽器規(guī)定，事件流的順序先是事件捕獲，會截獲到事件，然后是處于目標(biāo)階段，實際的目標(biāo)接收到事件，最后是事件冒泡，可以在這個階段對事件進行響應(yīng)。

以之前的 child 元素為例，直到 child 元素接收到事件前（從 window 到 parent），都是事件捕獲階段。到了 child 元素，此時對事件進行處理，隨后冒泡到 window 對象上，冒泡階段也是可以對事件進行處理的。 基于事件冒泡能對事件進行處理的特點，隨后將講到與其有關(guān)的事件委托機制。

JavaScript中事件模型指的是什么

四、事件綁定

HTML 與 事件的綁定有三種形式：

1. 
<div id="child" onclick="console.log('hello');"></div>

2. 

var childEl = document.getElementById("child");
childEl.onclick = function() {
    console.log('hello');
}

3. 
var childEl = document.getElementById("child");
childEl.addEventListener('click', function() {
    console.log('hello');
}, false);

JavaScript 是單線程的語言，在遇到元素有事件觸發(fā)時，會在事件隊列中尋找有沒有與這個事件綁定的函數(shù)，如果沒有則什么都不做，如果有，則將該函數(shù)放到事件隊列的前面，等待主線程事件執(zhí)行完畢后執(zhí)行。

上述代碼第一種綁定，將事件寫在 html 中，表現(xiàn)和行為沒有解耦，是不建議這樣寫代碼的。

第二種綁定，將事件綁定在元素對象上，這種寫法主要是容易發(fā)生事件的覆蓋。

第三種綁定，首先，第三個參數(shù)為布爾值，默認(rèn)為 false, 表示在事件冒泡階段調(diào)用事件處理程序，如果為 true, 則表示在事件捕獲階段調(diào)用事件處理函數(shù)。

當(dāng)我們想處理完一次事件后，將不想在處理該元素的事件綁定時，應(yīng)該將元素的事件綁定置為空，如果容易發(fā)生內(nèi)存泄漏。

第一種寫法：
childEl.onclick = null;


第三種寫法：
function eventHandler() {
    console.log('hello');
}

childEl.addEventListener('click', eventHandler, false);

childEl.removeEventListener('click', eventHandler, false);
五、事件委托（事件代理）

事件委托是利用事件冒泡的性質(zhì)，事件流開始是從較為具體的元素接收，一直傳播上不具體的元素上。

首先，假如有一個列表 ul，每個列表元素 li 點擊會觸發(fā)事件處理程序，顯然，如果一個一個地給元素綁定事件, 效率肯定不好。

與此同時，當(dāng)新增一個元素時，事件不見得會綁定成功。一起來看：

<ul id="menu">
    <li class="menu-item">menu-1</li>
    <li class="menu-item">menu-2</li>
    <li class="menu-item">menu-3</li>
    <li class="menu-item">menu-4</li>
</ul>
<input type="button" name="" id="addBtn" value="添加" />

<script>
window.onload = function() {
        var menu = document.getElementById("menu");
        var item = menu.getElementsByClassName('menu-item');
        for (var i = 0; i < item.length; i++) {
            item[i].onclick = (function(i) {
                return function() {
                    console.log(i);
                }
            }(i))
        }

        var addBtnEl = document.getElementById("addBtn");
        addBtnEl.onclick = function() {
            var newEl = document.createElement('li');
            newEl.innerHTML = "menu-new"
            menu.appendChild(newEl);
        }
    }
</script>

新增加的 menu-new，點擊發(fā)現(xiàn)沒有反應(yīng)，說明事件沒有綁定進去，但是我們也并不想，每增加一個新元素，就為這個新元素綁定事件，重復(fù)低效率的工作應(yīng)當(dāng)避免去做。

我們通過事件委托的思路來想，事件流的傳播，目標(biāo)元素本身依然會有事件，但同時，冒泡出去后，更高層次的 dom 也能處理事件程序。那么，我們只需要給高層次節(jié)點綁定事件，通過判斷具體是觸發(fā)的哪個子節(jié)點，再做相應(yīng)的事件處理。

<ul id="menu">
    <li class="menu-item">menu-1</li>
    <li class="menu-item">menu-2</li>
    <li class="menu-item">menu-3</li>
    <li class="menu-item">menu-4</li>
</ul>
<input type="button" name="" id="addBtn" value="添加" />

<script>
window.onload = function() {
        var menu = document.getElementById("menu");
        menu.onclick = function(event) {
            var e = event || window.event;
            var target = e.target || e.srcElement;
            console.log(e);
            switch (target.textContent) {
                case "menu-1":
                    console.log("menu-1 被點擊了");
                    break;

                case "menu-2":
                    console.log("menu-2 被點擊了");
                    break;

                case "menu-3":
                    console.log("menu-3 被點擊了");
                    break;

                case "menu-4":
                    console.log("menu-4 被點擊了");
                    break;

                case "menu-new":
                    console.log("menu-new 被點擊了");
                    break;
            }
        }

        var addBtnEl = document.getElementById("addBtn");
        addBtnEl.onclick = function() {
            var newEl = document.createElement('li');
            newEl.innerHTML = "menu-new"
            menu.appendChild(newEl);
        }
    }
</script>

menu 列表的每個子菜單元素的事件都能正確響應(yīng)，新增的 menu-new 同樣也能正確響應(yīng)事件。

事件委托的好處在于，我們不用給每個元素都一一地手動添加綁定事件，避免重復(fù)低效的工作。

其次，事件委托更少得獲取 dom, 初始化元素對象和事件函數(shù)，能有效減少內(nèi)存占用。

每當(dāng)將事件程序指定給元素時，html 代碼和 js 代碼之間就建立了一個連接，這種連接越多，網(wǎng)頁就執(zhí)行起來越慢，所以事件委托能有效減少連接樹，提高網(wǎng)頁性能。

感謝各位的閱讀！關(guān)于JavaScript中事件模型指的是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

名稱欄目：JavaScript中事件模型指的是什么
本文地址：http://muchs.cn/article2/gpjgoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、企業(yè)建站、、定制網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)