js自定義事件和jQuery自定義事件

2021-07-31 16:52:42 字數 1423 閱讀 5468

1.簡述

js自定義事件是用來擴充套件dom元素的行為的,可以讓dom元素監聽自定義事件,並手動觸發,更加靈活地實現一些操作。jquery自定義事件使用場景更加廣泛一些,不僅限於dom監聽自定義事件,可以任意自定義事件並隨時觸發。用於實現觀察者模式,為大型專案解耦非常方便。

2.js自定義事件,js可以讓乙個dom元素和乙個自定義事件繫結,當dom元素觸發這個事件時,會執行相應的響應函式。示例**如下

// 獲取乙個dom元素

var dom = document.getelementbyid('mydiv');

// 建立乙個js自定義事件

var evt = document.createevent('htmlevents');

// 初始化這個自定義事件(給它起個名字)

evt.initevent('myevent1', true, true);

// 讓dom元素監聽這個事件

dom.addeventlistener('myevent1', function (e, data) );

// dom元素觸發事件 myevent1

dom.dispatchevent(evt); // 1

值得注意的是,乙個自定義事件只能初始化一次,即只能擁有乙個名字,如果初始化多次,則以最後一次為準

var dom = document.getelementbyid('mydiv');

var evt = document.createevent('htmlevents');

evt.initevent('myevent1', true, true);

evt.initevent('myevent2', true, true);

dom.addeventlistener('myevent1', function (e, data) );

dom.addeventlistener('myevent2', function (e, data) );

dom.dispatchevent(evt); // 2

// 建立乙個jquery自定義事件物件

var eventemitter = $({});

// 監聽事件 myevent1

eventemitter.on('myevent1', function () );

// 監聽事件 myevent2

eventemitter.on('myevent2', function() );

// 觸發事件 myevent1

eventemitter.trigger('myevent1') // 1

// 觸發事件 myevent2

eventemitter.trigger('myevent2') // 2

jquery 自定義事件

眾所周知類似於mousedown click keydown等等這型別的事件都是瀏覽器提供的,通俗叫原生事件,這型別的事件是需要有互動行為才能被觸發。elem on click function alert需要執行的條件 必須有使用者點選才可以。如果不同使用者互動是否能在某一時刻自動觸發該事件呢?正...

js自定義事件

使用event let myevent new event event name 為了能夠傳遞引數,使用customevent let mycusevent new customevent event name customenent的另種寫法 首先建立自定義事件物件 let event docum...

js自定義事件

customevent event new customevent typearg,1.用法 定義事件 var event new customevent student 監聽事件 domelement.addevent student function e 觸發事件,同乙個監聽的dom元素,dis...