前端素材 设计元素 界面设计 网页素材 网站模板 按钮素材 名片素材 字体设计 图标设计 生活百科
官方客服QQ号:3007971137  (一条龙搭建-联系我)
官方客服QQ号:3007947123  (一条龙搭建-联系我)

trigger 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

生活百科 技术02-千编万码 7月前  次浏览

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>


相关链接

发表评论