摘要:公司日常開發的項目很少有能使用到自定義事件的,已有的事件就夠用了,但作為一個前端人員,學習這個還是有必要了解和學習一下,可能在以后會使用到。。在冒泡過程中,如果有一個元素定義了該事件的監聽函數,該監聽函數就會觸發。
公司日常開發的項目很少有能使用到自定義事件的,已有的事件就夠用了,但作為一個前端人員,學習這個還是有必要了解和學習一下,可能在以后會使用到。。
下面看下代碼
方式一:
// 新建事件實例 var event = new Event("build"); // 添加監聽函數 elem.addEventListener("build", function (e) { ... }, false); // 觸發事件 elem.dispatchEvent(event);
該事件會層層向上冒泡。在冒泡過程中,如果有一個元素定義了該事件的監聽函數,該監聽函數就會觸發。
方式二:
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構造函數的第一個參數是事件名稱,第二個參數是一個對象,該對象的detail屬性會綁定在事件對象之上。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/80818.html
摘要:寫文章不容易,點個贊唄兄弟專注源碼分享,文章分為白話版和源碼版,白話版助于理解工作原理,源碼版助于了解內部詳情,讓我們一起學習吧研究基于版本如果你覺得排版難看,請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理白話版事件是我最感興趣的東西之 寫文章不容易,點個贊唄兄弟專注 Vue 源碼分享,文章分為白話版和 源碼版,白話版助于理解工作原理,源碼版助于了解內部詳情,讓我們一起學習吧研究基于...
摘要:首先來看看什么是自定義事件讓函數能夠具備事件的某些特性。其實自定義事件在一些主流的類庫中都有實現,后續會分析具體的實現方法。今天,我們就先用簡單的例子來實現自定義事件的功能。 在團隊協作的很多情況下,某個js的函數會根據不斷增加的需求進而不斷增加功能,如果功能需求累積過多,我們就很難把控自己在這個函數中新定義的變量會不會覆蓋掉之前的定義。如: function action(){ ...
摘要:寫文章不容易,點個贊唄兄弟專注源碼分享,文章分為白話版和源碼版,白話版助于理解工作原理,源碼版助于了解內部詳情,讓我們一起學習吧研究基于版本如果你覺得排版難看,請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之綁定組件自定義事件組件 寫文章不容易,點個贊唄兄弟專注 Vue 源碼分享,文章分為白話版和 源碼版,白話版助于理解工作原理,源碼版助于了解內部詳情,讓我們一起學習吧研究基于...
摘要:觸發事件可以攜帶數據,這些數據被用于傳遞給綁定了事件的其它組件的回調函數上,進而被傳遞給其它組件。父組件可以在回調函數里做任何事情,頗有靈活性。一般情況下,父組件會在回調函數中更新自己的狀態數據。 上一篇博文梳理了vue的數據驅動和響應式相關的特性,這一篇博文就來梳理vue的一個很重要的特性,組件化。自定義組件之于vue,其意義不亞于函數之于C,java之類的編程語言。函數是計算機科學...
摘要:事件的綁定和解綁的多事件綁定之前學的鼠標事件,表單事件與鍵盤事件都有個特點,就是直接給元素綁定一個處理函數,所有這類事件都是屬于快捷處理。由于瀏覽器事件冒泡特性,可以在觸發時把這個事件往上冒泡到上,因為上綁定事件響應,所以能觸發這個動作。 事件的綁定和解綁 on()的多事件綁定 之前學的鼠標事件,表單事件與鍵盤事件都有個特點,就是直接給元素綁定一個處理函數,所有這類事件都是屬于快捷處理...
摘要:并沒有這個事件,那就用到了自定義事件這個東西了。先看看自定義事件在中的代碼自定義事件名稱是否冒泡是否可以停止捕獲上面整個的代碼,做了一個兼容性的處理。觸發自定義事件上面是滿足頻率后就出發自定義的事件這就是觸發事件的方法。 shakejs是一個搖一搖的工具 gitHub : https://github.com/alexgibson/shake.js 使用方法 //引入 初始化...
閱讀 1627·2021-11-22 14:45
閱讀 1077·2021-11-17 09:33
閱讀 3329·2021-09-02 09:48
閱讀 977·2019-08-30 15:54
閱讀 2775·2019-08-30 15:53
閱讀 2562·2019-08-30 12:54
閱讀 2251·2019-08-29 12:37
閱讀 2430·2019-08-26 13:58