JavaScript自动触发事件

68 阅读 0 评论 45 点赞

我是靠谱客的博主独特小蘑菇，最近开发中收集的这篇文章主要介绍JavaScript自动触发事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

有时候，我们需要代码自动触发对应的事件，而不需要人为操作。比如，一个按钮的点击事件，不要点击它，而让它自动执行。

首先定义事件，先按照传统的 onclick 方式来。（这里以点击某个标签事件为梨）

var xx = document.getElementById("xx");
xx.onclick = function(){
        alert( this.innerHTML );
}

触发事件：

 xx.click();  // IE8+,chrome,FF

也可以：

  xx.onclick();

但是这种方式的本质是执行 onclick指向的函数。

如果用 addEventListener 来添加事件， xx.onclick() 这种方式就无法触发事件代码执行。

综上，要触发事件，就使用类似 xx.click() 就行了。

----------------2019.8.4 更新 -----------------

经过查阅资料，通过代码自动触发事件，还是用以下类似的代码更科学：

代码触发事件：
<button id="mybtn">按钮</button>
<script>
    let btn = document.getElementById("mybtn");
    btn.addEventListener("mouseenter",function(){
       console.info("事件发生！");
    });
    // 不通过鼠标，自动 mouseenter 事件。其他事件也类推。
    let  ev = new Event("mouseenter");
    btn.dispatchEvent(ev);
</script>

new Event（）是创建一个事件对象。通过标签的 dispatchEvent 方法可以触发该事件。