前端素材 設計元素 界面設計 網頁素材 網站模板 按鈕素材 名片素材 字體設計 圖標設計 生活百科

trigger 根據綁定到匹配元素的給定的事件類型執行所有的處理程序和行為

生活百科 技術02-千編萬碼 1月前  次瀏覽

1、當相應的事件發生時,任何通過.on()或一個快捷方法綁定的事件處理程序將被觸發。但是,它們可以用.trigger()方法手動觸發。調用 .trigger() 執行處理程序和用戶自然的觸發該事件,他們的執行順序時相同的

$('#foo').on('click', function() {
      alert($(this).text());
});
$('#foo').trigger('click');
2、當我們使用.on()方法定義一個自定義事件類型,.trigger()的第二個參數就有用了。例如,假設我們自定義事件的處理程序綁定到我們的元素而不是內置的click事件,像我們上面那樣


$('#foo').on('custom', function(event, param1, param2) {
  alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);
那么在原生js中怎么實現 trigger 的方法呢?


<button id="btn-1">Button-1</button>
<button id="btn-2">Button-2</button>
<script>
    // 假如想通過點擊 Button-1 觸發 Button-2 的某個事件
    let btn_1 = document.getElementById('btn-1');
    let btn_2 = document.getElementById('btn-2');
    btn_1.onclick = function () {
        var myEvent = new Event('click');//此處click可以換成你想要的事件
        btn_2.dispatchEvent(myEvent);
    }
    btn_2.onclick = function () {
        alert('OK');
    // do something
    }
</script>


相關鏈接

發表評論

2017怎样手机上赚钱