[前端] 代碼中執行綁定元素的指定事件trigger方法

前面業務里有個搜索功能 , 入口比較深 , 現在想要把入口挪到有公共header的地方 , 在不想完全實現一遍功能的情況下 , 就需要模擬進行多個點擊事件來執行點擊後的效果

執行先點擊1 ,再給inout賦值 ,再點擊2

基本思路是類似jquery的trigger方法 , 原生js也是可以實現 , 代碼如下

<button id="btn-1">按鈕1</button>
<button id="btn-2">按鈕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 () {
        alert("按鈕1");
        var myEvent = new Event('click');
        btn_2.dispatchEvent(myEvent);
    }
    btn_2.onclick = function () {
        alert('OK按鈕2');
        // do something
    }
</script>


<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<button id="btn-3">按鈕3</button>
<button id="btn-4">按鈕4</button>
<script>
//jquery的trigger方法
$( "#btn-3" ).click(function() {
    alert("按鈕3");
  $( "#btn-4" ).trigger( "click" );
});
$( "#btn-4" ).click(function() {
    alert("按鈕4");
});
</script>