自定義事件

xietao3 發(fā)布于2019-08-20 12:08 / 2441人閱讀

摘要：公司日常開(kāi)發(fā)的項(xiàng)目很少有能使用到自定義事件的，已有的事件就夠用了，但作為一個(gè)前端人員，學(xué)習(xí)這個(gè)還是有必要了解和學(xué)習(xí)一下，可能在以后會(huì)使用到。。在冒泡過(guò)程中，如果有一個(gè)元素定義了該事件的監(jiān)聽(tīng)函數(shù)，該監(jiān)聽(tīng)函數(shù)就會(huì)觸發(fā)。

公司日常開(kāi)發(fā)的項(xiàng)目很少有能使用到自定義事件的，已有的事件就夠用了，但作為一個(gè)前端人員，學(xué)習(xí)這個(gè)還是有必要了解和學(xué)習(xí)一下，可能在以后會(huì)使用到。。

下面看下代碼

方式一：

// 新建事件實(shí)例
var event = new Event("build");

// 添加監(jiān)聽(tīng)函數(shù)
elem.addEventListener("build", function (e) { ... }, false);

// 觸發(fā)事件
elem.dispatchEvent(event);

該事件會(huì)層層向上冒泡。在冒泡過(guò)程中，如果有一個(gè)元素定義了該事件的監(jiān)聽(tīng)函數(shù)，該監(jiān)聽(tīng)函數(shù)就會(huì)觸發(fā)。

方式二：

var myEvent = new CustomEvent("myevent", {
  detail: {
    foo: "bar"
  },
  bubbles: true,
  cancelable: false
});

el.addEventListener("myevent", function(event) {
  console.log("Hello " + event.detail.foo);
});

el.dispatchEvent(myEvent);

CustomEvent構(gòu)造函數(shù)的第一個(gè)參數(shù)是事件名稱，第二個(gè)參數(shù)是一個(gè)對(duì)象，該對(duì)象的detail屬性會(huì)綁定在事件對(duì)象之上。

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

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

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

相關(guān)文章

【Vue原理】Event - 白話版

摘要：寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號(hào)也可以吧原理白話版事件是我最感興趣的東西之寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...

kumfo 2019-08-23 18:35 評(píng)論0 收藏0
javascript自定義事件淺析

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

miya 2019-08-21 10:46 評(píng)論0 收藏0
【Vue原理】Event - 源碼版之綁定組件自定義事件

摘要：寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號(hào)也可以吧原理源碼版之綁定組件自定義事件組件寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...

amuqiao 2019-08-23 18:36 評(píng)論0 收藏0
vue總結(jié)系列--組件化

摘要：觸發(fā)事件可以攜帶數(shù)據(jù)，這些數(shù)據(jù)被用于傳遞給綁定了事件的其它組件的回調(diào)函數(shù)上，進(jìn)而被傳遞給其它組件。父組件可以在回調(diào)函數(shù)里做任何事情，頗有靈活性。一般情況下，父組件會(huì)在回調(diào)函數(shù)中更新自己的狀態(tài)數(shù)據(jù)。上一篇博文梳理了vue的數(shù)據(jù)驅(qū)動(dòng)和響應(yīng)式相關(guān)的特性，這一篇博文就來(lái)梳理vue的一個(gè)很重要的特性，組件化。自定義組件之于vue，其意義不亞于函數(shù)之于C，java之類的編程語(yǔ)言。函數(shù)是計(jì)算機(jī)科學(xué)...

cuieney 2019-08-22 18:28 評(píng)論0 收藏0
jQuery 事件(三) 事件的綁定和解綁、對(duì)象的使用、自定義事件

摘要：事件的綁定和解綁的多事件綁定之前學(xué)的鼠標(biāo)事件，表單事件與鍵盤事件都有個(gè)特點(diǎn)，就是直接給元素綁定一個(gè)處理函數(shù)，所有這類事件都是屬于快捷處理。由于瀏覽器事件冒泡特性，可以在觸發(fā)時(shí)把這個(gè)事件往上冒泡到上，因?yàn)樯辖壎ㄊ录憫?yīng)，所以能觸發(fā)這個(gè)動(dòng)作。事件的綁定和解綁 on()的多事件綁定之前學(xué)的鼠標(biāo)事件，表單事件與鍵盤事件都有個(gè)特點(diǎn)，就是直接給元素綁定一個(gè)處理函數(shù)，所有這類事件都是屬于快捷處理...

niuxiaowei111 2019-08-22 10:53 評(píng)論0 收藏0
從shakejs來(lái)看自定義事件，及addEventListener

摘要：并沒(méi)有這個(gè)事件，那就用到了自定義事件這個(gè)東西了。先看看自定義事件在中的代碼自定義事件名稱是否冒泡是否可以停止捕獲上面整個(gè)的代碼，做了一個(gè)兼容性的處理。觸發(fā)自定義事件上面是滿足頻率后就出發(fā)自定義的事件這就是觸發(fā)事件的方法。 shakejs是一個(gè)搖一搖的工具 gitHub : https://github.com/alexgibson/shake.js 使用方法 //引入初始化...

王笑朝 2019-08-21 10:27 評(píng)論0 收藏0