如何使用代码模拟用户点击事件,触发回调处理方法(兼容多种浏览器)(原创)

 本文主要内容:如何使用代码模拟用户点击事件,触发回调处理方法

使用代码模拟调用点击事件:

<button onclick="newYear()" id="clickme" style="display:none;"></button>
    <script>
        $(window).load(function () {
            //IE
            if(document.all) {
                document.getElementById("clickme").click();
            }
// 其它浏览器
            else {
                var e = document.createEvent("MouseEvents");
                e.initEvent("click", true, true);
                document.getElementById("clickme").dispatchEvent(e);
            }
        })
    </script>

知识点:

创建一个指定类型的事件。其返回的对象必须先初始化并可以被传递给 element.dispatchEvent

语法

var event = document.createEvent(type);
  • event 就是被创建的 Event 对象.
  • type 是一个字符串,表示要创建的事件类型。事件类型可能包括"UIEvents""MouseEvents""MutationEvents", 或者 "HTMLEvents"。请查看 Notes 章节获取详细信息 。

注意

Event type字符串只能传递事件模块中定义的值给CreateEvent。其中一些事件模块是在DOM事件规范定义的,还有些事在其他规范定义的(如SVG),还有一些是Gecko-specific事件。详情见下表。

To-do: 添加事件名称到下表中。

 完整示例代码:

// 创建事件
var event = document.createEvent('Event');

// 定义事件名为'build'.
event.initEvent('build', true, true);

// 监听事件
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);

// 触发对象可以是任何元素或其他事件目标
elem.dispatchEvent(event);

参考文献:Document.createEvent() - Web API 接口参考 | MDN

参考网页:view-source:http://www.chinasafety.gov.cn/

原文地址:https://www.cnblogs.com/wangqiideal/p/10646842.html