国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

利用DOM0級(jí)事件模擬簡(jiǎn)單的事件系統(tǒng)

Mr_zhang / 2541人閱讀

摘要：但是這樣并不能實(shí)際使用，因?yàn)橛脕?lái)保存事件的數(shù)組當(dāng)前是作為一個(gè)全局變量。請(qǐng)先使用綁定事件。在使用時(shí)傳入三個(gè)參數(shù)，元素，事件類(lèi)型，回調(diào)方法，即可。

讓我們回到還沒(méi)有DOM2級(jí)事件方法的年代，那時(shí)候，我們想給某元素綁定一個(gè)事件方法時(shí)，是這樣做的：

javascriptvar ele=document.getElementById("main");
ele.onclick=function(){
    console.log("做一件事");
}

這就是DOM0級(jí)事件方法，我們需要用XXX.onYYY=ZZZ這種形式來(lái)綁定事件，當(dāng)點(diǎn)擊元素時(shí)，會(huì)輸出“做一件事”，恩，很理想。

接下來(lái)，當(dāng)我們希望在點(diǎn)擊該元素的時(shí)候再做另一件事怎么辦呢？下面這樣：

javascriptele.onclick=function(){
   console.log("做第二件事");
}

這樣肯定不行，因?yàn)槲覀兪窍Ｍc(diǎn)擊時(shí)既輸出“做一件事”，又要輸出“做第二件事”。而這樣的話后面的方法將前面的覆蓋掉了，因?yàn)閄XX.onYYY=ZZZ只能給元素的某個(gè)事件類(lèi)型(如例子中的click事件)綁定一個(gè)方法ZZZ；這個(gè)問(wèn)題難不到我們，既然這樣，那我們就把要做的事情全都放在ZZZ里不就行了么；

javascriptfunction fn1(){
    console.log("做一件事");
}
function fn2(){
   console.log("做第二件事");
}
ele.onclick=function(){
    fn1();
    fn2();
}

接下來(lái)，挑戰(zhàn)來(lái)了，那如果我們是希望在點(diǎn)擊元素時(shí)做100件不同的事情呢？難道也是這樣用XXX.onYYY=ZZZ形式，將100個(gè)方法都在ZZZ里依次執(zhí)行嗎？顯然這是很笨的方法；動(dòng)一下腦筋，很快想到另一個(gè)解決方案：
明確以下需求，我們是希望在點(diǎn)擊事件發(fā)生時(shí)，執(zhí)行多個(gè)方法，而具體有多少個(gè)，一開(kāi)始時(shí)不明確的，那么我們可以用一個(gè)數(shù)組來(lái)保存所有的回調(diào)方法；當(dāng)點(diǎn)擊發(fā)生時(shí)，執(zhí)行一個(gè)方法，在這個(gè)方法中依次執(zhí)行數(shù)組中的回調(diào)方法。

javascriptvar arr=[];
ele.onclick=function(){
    for(var i=0;i


這樣的話，當(dāng)我們需要給元素點(diǎn)擊事件添加更多的方法時(shí)，直接往數(shù)組arr中push更多的回調(diào)方法就行了，甚至當(dāng)我們希望去掉某個(gè)方法，也可以通過(guò)刪除數(shù)組中的某項(xiàng)來(lái)完成。

但是這樣并不能實(shí)際使用，因?yàn)橛脕?lái)保存事件的數(shù)組當(dāng)前是作為一個(gè)全局變量。為了持久化保存這個(gè)數(shù)組，我們可以這樣，將這個(gè)數(shù)組定義為元素節(jié)點(diǎn)對(duì)象的某一個(gè)屬性，就像下面這樣：



javascriptele.eventList=[];
ele.onclick=function(){
    for(var i=0;i


以上代碼只是針對(duì)click事件，在實(shí)際運(yùn)用時(shí)，有各種不同的事件類(lèi)型；在某個(gè)類(lèi)型事件觸發(fā)時(shí)，需要執(zhí)行所有綁定到該類(lèi)型事件的方法，因此，針對(duì)每個(gè)事件類(lèi)型，都要采用一個(gè)數(shù)組來(lái)保存相應(yīng)回調(diào)方法。

另外，為了在某類(lèi)型事件觸發(fā)時(shí)，找到針對(duì)與該事件類(lèi)型的所有方法并執(zhí)行，我們可以將這個(gè)數(shù)組直接以事件類(lèi)型名稱命名；

然后考慮將以上方法用一個(gè)函數(shù)封裝起來(lái)：如下



javascriptfunction bind(ele,ev,callback){
    if(!ele.ev){
        ele.ev=[];//直接將保存某個(gè)事件類(lèi)型所有回調(diào)方法的數(shù)組命名為事件類(lèi)型
        ele["on"+ev]=function(){
            for(var i=0;i


為了防止重復(fù)綁定，在將回調(diào)函數(shù)push進(jìn)事件隊(duì)列數(shù)組時(shí)，首先需要判斷被綁定的回調(diào)是否已經(jīng)存在于事件隊(duì)列中；



javascriptfunction bind(ele,ev,callback){
    if(!ele.ev){
        ele.ev=[];
        ele["on"+ev]=function(){ //只需要綁定一次
            for(var i=0;i


而相應(yīng)unbind方法，只需要將需要解綁的回調(diào)函數(shù)從相應(yīng)的函數(shù)隊(duì)列中刪除即可；

另外還有以下一個(gè)問(wèn)題：上述這種情況下，綁定了幾個(gè)類(lèi)型的事件，就會(huì)給ele多添加幾個(gè)屬性，命名空間污染極其嚴(yán)重；所以采用的方案是在元素上只添加一個(gè)屬性(如_event)，然后所有的事件隊(duì)列全都擴(kuò)展在這個(gè)屬性上。




全部代碼如下：


完整版代碼


javascriptfunction bind(ele,ev,callback){
    if(!ele._event){
        ele._event={};
    }
    if(!ele._event[ev]){
        ele._event[ev]=[];
        ele["on"+ev]=function(e){
            e=e||window.event;

            var eList=ele._event[ev];
            for(var i=0;i


在使用時(shí)傳入三個(gè)參數(shù)，元素，事件類(lèi)型，回調(diào)方法，即可。解綁時(shí)傳入同樣的三個(gè)參數(shù)；這個(gè)簡(jiǎn)單的方案解決了以下問(wèn)題：




this關(guān)鍵字指向問(wèn)題


重復(fù)綁定問(wèn)題


執(zhí)行順序問(wèn)題



  
以上，我們就完成了一個(gè)粗糙的事件系統(tǒng)，它的思想很類(lèi)似于Dean Edward在其發(fā)布的addEvent.js中的實(shí)現(xiàn)方式；

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

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

相關(guān)文章

  • 原生js之DOM事件相關(guān)

    摘要：而由于級(jí)標(biāo)準(zhǔn)中并沒(méi)有定義事件相關(guān)的內(nèi)容，所以事件級(jí)別只包括級(jí)，級(jí)和級(jí)三種。此屬性返回當(dāng)前事件所綁定的對(duì)象。自定義事件可以綁定到任意元素上，此處選擇只是為了演示方便。 前端學(xué)習(xí)的東西有很多，現(xiàn)代前端開(kāi)發(fā)，前端工程化的東西要懂，基礎(chǔ)的原生js也要懂，畢竟，框架都是有生命周期的，更替非?？?，然而卻有這么一個(gè)框架，它是最輕量的前端框架，每個(gè)瀏覽器都內(nèi)置，它叫vanilla.js。好吧，其實(shí)va...

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

  • 整理DOM事件相關(guān)知識(shí)點(diǎn)

    摘要：事件相關(guān)內(nèi)容當(dāng)用戶與瀏覽器發(fā)生的一些交互時(shí)如果希望去獲得用戶行為就需要借助事件來(lái)完成事件部分內(nèi)容在中重要性不言而喻羅列需要了解與事件相關(guān)的知識(shí)如下這也是面試中遇到的問(wèn)題事件的級(jí)別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對(duì)象常見(jiàn)的 DOM事件相關(guān)內(nèi)容 當(dāng)用戶與瀏覽器發(fā)生的一些交互時(shí), 如果希望去獲得用戶行為, 就需要借助事件來(lái)完成. 事件部分內(nèi)容在 JS中重要性不言而喻. ...

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

  • 整理DOM事件相關(guān)知識(shí)點(diǎn)

    摘要：事件相關(guān)內(nèi)容當(dāng)用戶與瀏覽器發(fā)生的一些交互時(shí)如果希望去獲得用戶行為就需要借助事件來(lái)完成事件部分內(nèi)容在中重要性不言而喻羅列需要了解與事件相關(guān)的知識(shí)如下這也是面試中遇到的問(wèn)題事件的級(jí)別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對(duì)象常見(jiàn)的 DOM事件相關(guān)內(nèi)容 當(dāng)用戶與瀏覽器發(fā)生的一些交互時(shí), 如果希望去獲得用戶行為, 就需要借助事件來(lái)完成. 事件部分內(nèi)容在 JS中重要性不言而喻. ...

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

  • 讀書(shū)筆記(05) - 事件 - JavaScript高級(jí)程序設(shè)計(jì)

    摘要：而事件分為個(gè)級(jí)別級(jí)事件處理程序，級(jí)事件處理程序和級(jí)事件處理程序。級(jí)中沒(méi)有規(guī)范事件的相關(guān)內(nèi)容，所以沒(méi)有級(jí)事件處理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript來(lái)實(shí)現(xiàn)用戶與WEB網(wǎng)頁(yè)之間的動(dòng)態(tài)交互，接收用戶操作并做出相應(yīng)的反饋，而事件在此間則充當(dāng)橋梁的重要角色。 日常開(kāi)發(fā)中，經(jīng)常會(huì)...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<