中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JS中的事件冒泡和事件委托的使用

發布時間:2020-06-10 14:34:34 來源:億速云 閱讀:247 作者:元一 欄目:web開發

簡介

JavaScript(簡稱“JS”) 是一種具有函數優先的輕量級,解釋型或即時編譯型的高級編程語言。雖然它是作為開發Web頁面的腳本語言而出名的,但是它也被用到了很多非瀏覽器環境中,JavaScript 基于原型編程、多范式的動態腳本語言,并且支持面向對象、命令式和聲明式(如函數式編程)風格。

JavaScript在1995年由Netscape公司的Brendan Eich,在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作,Netscape管理層希望它外觀看起來像Java,因此取名為JavaScript。但實際上它的語法風格與Self及Scheme較為接近。

JavaScript的標準是ECMAScript 。截至 2012 年,所有瀏覽器都完整的支持ECMAScript 5.1,舊版本的瀏覽器至少支持ECMAScript 3 標準。2015年6月17日,ECMA國際組織發布了ECMAScript 的第六版,該版本正式名稱為 ECMAScript 2015,但通常被稱為ECMAScript 6 或者ES6。

特性

JavaScript是一種屬于網絡的高級腳本語言,已經被廣泛用于Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。 

是一種解釋性腳本語言(代碼不進行預編譯)。

主要用來向HTML(標準通用標記語言下的一個應用)頁面添加交互行為。 

可以直接嵌入HTML頁面,但寫成單獨的js文件有利于結構和行為的分離。 

跨平臺特性,在絕大多數瀏覽器的支持下,可以在多種平臺下運行(如Windows、Linux、Mac、Android、iOS等)。

Javascript腳本語言同其他語言一樣,有它自身的基本數據類型,表達式和算術運算符及程序的基本程序框架。Javascript提供了四種基本的數據類型和兩種特殊數據類型用來處理數據和文字。而變量提供存放信息的地方,表達式則可以完成較復雜的信息處理。

可以實現web頁面的人機交互。

事件冒泡

事件冒泡 :當一個元素接收到事件的時候 會把他接收到的事件傳給自己的父級,一直到window 。(注意這里傳遞的僅僅是事件 并不傳遞所綁定的事件函數。所以如果父級沒有綁定事件函數,就算傳遞了事件 也不會有什么表現 但事件確實傳遞了。)

IE的事件流叫做事件冒泡。顧名思義當事件發生后,事件就開始從里向外傳播,查看下方代碼:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="myDiv"></div>
    </body>
</html>

如果點擊頁面中的 <div> 元素,那么這個 chick 事件就會按照如下順序傳播:

JS中的事件冒泡和事件委托的使用

click 事件 在 直系DOM 樹的每一級節點都會發生(自下而上),直到 document 對象。

事件委托

那什么叫事件委托呢?它還有一個名字叫事件代理,JavaScript高級程序設計上講:事件委托就是利用事件冒泡,只指定一個事件處理程序,就可以管理某一類型的所有事件。那這是什么意思呢?網上的各位大牛們講事件委托基本上都用了同一個例子,就是取快遞來解釋這個現象,我仔細揣摩了一下,這個例子還真是恰當,我就不去想別的例子來解釋了,借花獻佛,我摘過來,大家認真領會一下事件委托到底是一個什么原理:

有三個同事預計會在周一收到快遞。為簽收快遞,有兩種辦法:一是三個人在公司門口等快遞;二是委托給前臺MM代為簽收。現實當中,我們大都采用委托的方案(公司也不會容忍那么多員工站在門口就為了等快遞)。前臺MM收到快遞后,她會判斷收件人是誰,然后按照收件人的要求簽收,甚至代為付款。這種方案還有一個優勢,那就是即使公司里來了新員工(不管多少),前臺MM也會在收到寄給新員工的快遞后核實并代為簽收。

這里其實還有2層意思的:

第一,現在委托前臺的同事是可以代為簽收的,即程序中的現有的dom節點是有事件的;

第二,新員工也是可以被前臺MM代為簽收的,即程序中新添加的dom節點也是有事件的。

事件委托利用了事件冒泡,只指定一個父類事件處理程序,就可以管理某一類型的所有子類元素事件。

<ul id="myList">
    <li id="goSth"></li>
    <li id="doSth"></li>
    <li id="sayHi"></li>
</ul>
專門建立的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學習方法和需要注意的小細節,不停更新最新的教程和學習技巧(從零基礎開始到前端項目實戰教程,學習工具,全棧開發學習路線以及規劃)

三個<li> 被單擊,按照傳統方式,會給他們單獨添加事件:


    document.getElementById('sayHi').onClick(function(){...})

點擊事件不多的情況下還好,若是所有元素都采用這樣的方式,結果就會有數不清的代碼用于添加事件處理。就好比一萬個人全擠到公司前臺去拿快遞,那場面,蔚為壯觀啊!但是把快遞放到前臺,前臺接收,然后分批次派送,就會舒服很多:


    document.getElementById('myList').onClick(function(ev){
        var e = ev || window.event;
        var target = e.target;
        switch (target.id) {
            case 'goSth':
                ...
                break;
            case 'doSth':
                ...
                break;
            ...
        }
    })

上面是用事件委托的方式,子元素是帶有事件效果的,我們可以發現,當用事件委托的時候,根本就不需要去遍歷元素的子節點,只需要給父級元素添加事件就好了,子元素點擊,會通過以事件冒泡的方式激活父元素已添加的相同事件,減少了很多 js 對于 dom 的事件操作,占用更少的內存,這大概是事件委托的精髓所在。

所有用到按鈕的事件(多數鼠標和鍵盤事件)都適合采用事件委托。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

天津市| 漳平市| 淮南市| 星座| 田东县| 中阳县| 海盐县| 修武县| 凯里市| 南郑县| 萨迦县| 渭南市| 宁德市| 萨嘎县| 监利县| 洛隆县| 通榆县| 韩城市| 土默特左旗| 六枝特区| 沂南县| 凤凰县| 米易县| 白水县| 华阴市| 普兰县| 延川县| 清镇市| 射洪县| 湖口县| 商丘市| 梁山县| 明溪县| 太谷县| 平塘县| 揭东县| 固镇县| 葵青区| 临湘市| 永清县| 广汉市|