JavaScript自定義事件

CoreDump 發(fā)布于2019-08-26 10:30 / 437人閱讀

摘要：基本概念系統(tǒng)內(nèi)發(fā)生的動作或發(fā)生的事情，系統(tǒng)會在事件出現(xiàn)時觸發(fā)某種信號，提供一個自動加載某種動作的機(jī)制。

1：基本概念

系統(tǒng)內(nèi)發(fā)生的動作或發(fā)生的事情，系統(tǒng)會在事件出現(xiàn)時觸發(fā)某種信號，提供一個自動加載某種動作的機(jī)制。

    var myButton = document.getElementById("button");
    myButton.onclick = function(){
        alert("點擊了button");
    }
    myButton = null;

2：事件三要素

事件源（觸發(fā)事件的元素也就是你是要對什么東西進(jìn)行操作）

事件（事件的觸發(fā)方式也就是你要做什么實現(xiàn)所要的交互效果）

處理函數(shù)（事件觸發(fā)后要執(zhí)行的代碼也就是在事件進(jìn)行后你要目標(biāo)變成什么樣子）

3：事件冒泡(DOM)

觸發(fā)階段

捕獲階段

冒泡階段

4：創(chuàng)建自定義事件

    var event = new Event("myEvent");
    /*
    var event = document.creatEvent("Event");
    event.initEvent("myEvent",true,true);
    */
    myButton.addEventListener("myEvent",function(e){
        debugger;
    },false);
    myButton.dispatchEvent(event);

5：添加自定義數(shù)據(jù)

    var event = new CustomEvent("myEvent",{ "detail":{
        time: new Date().toLocalDateString();
    } });
    myButton.addEventListener("myEvent",function (e){
        debugger;
    },false);
    myButton.dispatchEvent(event);

GPU云服務(wù)器云服務(wù)器自定義事件 js 自定義觸發(fā)事件自定義頭像自定義

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

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

相關(guān)文章

javascript自定義事件淺析

摘要：首先來看看什么是自定義事件讓函數(shù)能夠具備事件的某些特性。其實自定義事件在一些主流的類庫中都有實現(xiàn)，后續(xù)會分析具體的實現(xiàn)方法。今天，我們就先用簡單的例子來實現(xiàn)自定義事件的功能。在團(tuán)隊協(xié)作的很多情況下，某個js的函數(shù)會根據(jù)不斷增加的需求進(jìn)而不斷增加功能，如果功能需求累積過多，我們就很難把控自己在這個函數(shù)中新定義的變量會不會覆蓋掉之前的定義。如： function action(){ ...

miya 2019-08-21 10:46 評論0 收藏0
Javascript自定義事件

摘要：事件定義事件是與交互的最常見的方式但它也可以用于非代碼中通過實現(xiàn)自定義事件實現(xiàn)自定義事件的原理是創(chuàng)建一個管理事件的對象如下代碼是事件的定義存儲事件處理程序由個鍵值對組成鍵表示事件名值是一個由事件處理程序組成的數(shù)組添加事件觸發(fā)事件將傳遞給事件定義事件是與DOM交互的最常見的方式,但它也可以用于非DOM代碼中--通過實現(xiàn)自定義事件.實現(xiàn)自定義事件的原理是創(chuàng)建一個管理事件的對象.如下代碼...

Leck1e 2019-08-21 10:40 評論0 收藏0
javascript自定義事件原理

摘要：我們就需要我們自己去定義事件其實就是我們寫的函數(shù)，尤其是組件開發(fā)過程中，用的尤為多?？赡苡写_定按鈕取消按鈕等操作。但是自定義事件的基本原理就是如上描繪的那樣我們都知道，鼠標(biāo)點擊click，觸屏的touch等事件，可以觸發(fā)相應(yīng)的事件處理程序，也可以為這些事件添加事件處理程序，實際開發(fā)過程中可供我們使用的事件很少，click、doubleclick，mouseover、mousemove...

JowayYoung 2019-08-20 15:17 評論0 收藏0
JavaScript疑難雜癥系列-事件

摘要：支持三個參數(shù)分別表示事件名稱，是否可以冒泡，是否阻止事件的默認(rèn)操作觸發(fā)參數(shù)表示事件對象，是方法返回的創(chuàng)建的對象監(jiān)聽方法自定義事件常用模擬模擬方法操作或者自定義事件我的自定義事件。事件這塊知識點雖然是老生長談的,但對于我來說多多整理,多多感悟,溫故知新,每次看看這塊都有不同的收獲.(在這里我不會長篇大論,只會挑重點;具體的小伙伴們自行查找) 什么是事件在編程時系統(tǒng)內(nèi)發(fā)生的動作或者發(fā)生...

CocoaChina 2019-08-30 13:57 評論0 收藏0
JavaScript疑難雜癥系列-事件

摘要：支持三個參數(shù)分別表示事件名稱，是否可以冒泡，是否阻止事件的默認(rèn)操作觸發(fā)參數(shù)表示事件對象，是方法返回的創(chuàng)建的對象監(jiān)聽方法自定義事件常用模擬模擬方法操作或者自定義事件我的自定義事件。事件這塊知識點雖然是老生長談的,但對于我來說多多整理,多多感悟,溫故知新,每次看看這塊都有不同的收獲.(在這里我不會長篇大論,只會挑重點;具體的小伙伴們自行查找) 什么是事件在編程時系統(tǒng)內(nèi)發(fā)生的動作或者發(fā)生...

Anleb 2019-08-26 11:42 評論0 收藏0