原生js实现jquery中的trigger

原生js实现jquery中的trigger

一、总结

一句话总结：

jquery中trigger什么的click事件，相当于js中new Event('click')，然后dispatchEvent

<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');
        btn_2.dispatchEvent(myEvent);
    }
    btn_2.onclick = function () {
        alert('OK');
    // do something
    }
</script>

 

 

 

二、原生js实现jquery中的trigger

转自或参考：原生js javascript 实现trigger（自动触发window 的resize事件）
https://blog.csdn.net/janelittle/article/details/81670021

 

一、大家都知道 jQuery有个 trigger 方法，可以触发被选元素的指定事件类型。 
那么在原生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');
        btn_2.dispatchEvent(myEvent);
    }
    btn_2.onclick = function () {
        alert('OK');
    // do something
    }
</script>

 

二、如果我想在不实际改变浏览器窗口大小的情况下触发 window的 resize 事件可不可以呢？（虽然听起来有些变态，但是有时候你需要重绘图表或者别的需求的时候，这可以帮你解决一些问题）同样的，

先上代码：

<button id="btn-1">Button-1</button>
<script>
    // 假如想通过点击 Button-1 触发 window 的 resize 事件
    let btn_1 = document.getElementById('btn-1');
    btn_1.onclick = function () {
        var myEvent = new Event('resize');
        window.dispatchEvent(myEvent);
    }
</script>