javascript核心技术（三十九）原生JS实现用JS代码触发指定事件

人亦已歌 · 发表于 2023-1-27 16:36:45

上一讲中我们通过jquery提供的两种事件触发方式实现了事件的注定触发，下面我们再看一下原生JS如何实现。
在原生JS中，这个过程稍有一点抽象，请大家认真理解。
请先看下面的代码：

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <title>原生JS实现用JS代码触发指定事件</title>
        <script src="./jquery.js"></script>
</head>


<body class="" id="body">
        <button id="btn1">按钮1</button>
        <button id="btn2">按钮2</button>
        <script type="text/javascript">
                // 下面我们想实现的是：点击按钮1触发按钮2的某事件
                var btn1 = document.getElementById('btn1');
                var btn2 = document.getElementById('btn2');
                btn2.onclick = function () {
                        console.log('OK');
                }
                btn1.onclick = function () {
                        var myEvent = new Event('click');//创建一个点击事件
                        btn2.dispatchEvent(myEvent);//将创建好的点击事件指派给btn2
                }
        </script>

</body>

</html>