zoukankan      html  css  js  c++  java
  • 原生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 的方法呢?

    首先上代码:

     1 <button id="btn-1">Button-1</button>
     2 <button id="btn-2">Button-2</button>
     3 <script>
     4     // 假如想通过点击 Button-1 触发 Button-2 的某个事件
     5     let btn_1 = document.getElementById('btn-1');
     6     let btn_2 = document.getElementById('btn-2');
     7     btn_1.onclick = function () {
     8         var myEvent = new Event('click');
     9         btn_2.dispatchEvent(myEvent);
    10     }
    11     btn_2.onclick = function () {
    12         alert('OK');
    13     // do something
    14     }
    15 </script>

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

    先上代码:

    1 <button id="btn-1">Button-1</button>
    2 <script>
    3     // 假如想通过点击 Button-1 触发 window 的 resize 事件
    4     let btn_1 = document.getElementById('btn-1');
    5     btn_1.onclick = function () {
    6         var myEvent = new Event('resize');
    7         window.dispatchEvent(myEvent);
    8     }
    9 </script>
     
  • 相关阅读:
    B. Xor of 3 题解(思维+构造)
    小 L 与 GCD 题解(数学 hard)
    F. Clear The Matrix 题解(状压dp)
    小顶堆与大顶堆的自定义cmp函数
    字符指针、字符数组
    python中创建dict对象
    中缀表达式转后缀表达式
    vue中keep-alive,include的缓存问题
    vue 冒号 :、@、# 是什么意思? v-bind v-on v-slot v-是指令
    vue 自定义指令 v-
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12550548.html
Copyright © 2011-2022 走看看