js原生和vue的自动触发事件

最新推荐文章于 2024-05-18 21:18:02 发布

hyq_h

最新推荐文章于 2024-05-18 21:18:02 发布

阅读量4k

点赞数

文章标签： JavaScript 前端 web js

本文链接：https://blog.csdn.net/weixin_45613604/article/details/102819128

版权

有时我们需要自动去触发点击事件 , 而不是人为点击

js原生

  <body>
    <button id="btn">点击</button>

    <script>
      const btn = document.getElementById("btn");
      btn.addEventListener("click", function() {
        alert("事件发生！");
      });
      // 不通过鼠标，自动 click 事件。其他事件也类推。
      let ev = new Event("click");
      setTimeout(() => { // 加定时器,一秒后触发
        btn.dispatchEvent(ev); 
      }, 1000);
    </script>
  </body>

还有一种方式 , 使用click()也可以实现自动触发

  <body>
    <button id="btn">点击</button>

    <script>
      const btn = document.getElementById("btn");
      btn.addEventListener("click", function() {
        alert("事件发生！");
      });
      btn.click();
    </script>
  </body>

vue的自动触发事件 , 使用自定义指令

    <button @click='callUp' v-trigger>toggle</button>

    directives: {
        trigger: {
            inserted(el, binging) {
                el.click(console.log("自动唤起"))
                //$(el).trigger('click')
            }
        }
    },
    methods: {
        callUp() {
            console.log("事件")
        }
    }

hyq_h

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js原生和vue的自动触发事件

有时我们需要自动去触发点击事件 , 而不是人为点击 <body> <button id="btn">点击</button> <script> const btn = document.getElementById("btn"); btn.addEventListener("click", function...
复制链接

扫一扫