主動觸發事件 自定義事件 trigger 及其用法

1. 觸發自定義事件方式

js、jq

 

2. jq 觸發

2.1 默認支持的事件

$('#h').on('click',function(){

$(this).append('<p>p</p>')

})

 

$('#h').trigger('click');

 

$('#h').click();

 

2.2 自定義事件

$('#h').on('myclick',function(){

$(this).append('<p>p</p>')

})

 

$('#h').trigger('myclick');

 

3. js 觸發

    // 首先需要提前定義好事件，並且注冊相關的EventListener
    var myEvent = new CustomEvent('event_name', {
      detail: {
        title: 'This is title!'
      },
    });
    window.addEventListener('event_name', function (event) {
      console.log('得到標題為：', event.detail.title);
    });
    // 隨后在對應的元素上觸發該事件
    setInterval(function () {
      if (window.dispatchEvent) {
        window.dispatchEvent(myEvent);
      } else {
        window.fireEvent(myEvent);
      }

    }, 1000);

 

4. 相關文章

JQuery 自己主動觸發事件

jQuery.trigger() 函數詳解

js 自定義事件的兩種方式

JS中自定義事件的使用與觸發