Js 三种绑定事件方式及区别_js绑定事件的方法和区别-优快云博客

本文介绍了JavaScript中三种事件绑定方式：DOM结构直接绑定、JavaScript代码中绑定和使用addEventListener监听。每种方式都有其特点，DOM绑定的事件在多个同名事件中只会执行第一个，而JavaScript绑定的事件会覆盖DOM绑定，且使用addEventListener可以多次绑定同一事件并依次执行。当三种方式同时存在时，事件执行顺序为：addEventListener > 脚本on事件 > DOM属性事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三种事件绑定方式

DOM里直接绑定事件

<button id="btn" onclick="submit()">提交</button>
<script>
    function submit() {
     	console.log('DOM click......');
 	};
</script>

js代码里获取DOM元素进行事件绑定

<button id="btn">提交</button>
<script>
    document.getElementById('btn').onclick = function() {
        console.log('脚本 click......');
    };
</script>

通过监听处理相应的事件

<button id="btn">提交</button>
<script>
    function submit() {
        console.log('listener click......');
    };
    document.getElementById('btn').addEventListener('click', submit, false);
</script>

区别

在DOM结构如果绑定两个 “onclick” 事件，只会执行第一个

<button id="btn" onclick="submit1()" onclick="submit2()">提交</button>
<script>
    function submit1() {
        console.log('click1......'); // 执行这个
    };
    function submit2() {
        console.log('click2......'); 
    };
</script>

在脚本通过匿名函数的方式绑定的只会执行最后一个事件

<button id="btn">提交</button>
<script>
    document.getElementById('btn').onclick = function() {
        console.log('click1......');
    };
    document.getElementById('btn').onclick = function() {
        console.log('click2......'); // 执行这个
    };
</script>

用 addeventlistener可以绑定同一个事件多次，且都会执行

<button id="btn">提交</button>
<script>
    function submit1() {
        console.log('click1......'); // 先执行
    };
    function submit2() {
        console.log('click2......'); // 后执行
    };
    document.getElementById('btn').addEventListener('click', submit1, false);
    document.getElementById('btn').addEventListener('click', submit2, false);

</script>

三种事件同时绑定时，DOM结构绑定的事件会失效，只执行脚本和监听绑定的事件，且脚本事件的执行优先级高于监听事件的优先级

注：脚本事件和DOM属性事件在本质上是一样的。因为元素属性事件是写在元素中的，所以它会首先触发，然后再触发JS中的事件（addEventListener事件、on事件）。当它们同时存在时，脚本事件会覆盖元素属性事件（本质相同、后面的脚本事件会覆盖前面的脚本事件）

<button id="btn" onclick="submit1()">提交</button>
<script>
    function submit1() {
        console.log('DOM click......') // 不执行
    }
    function submit2() {
        console.log('listener click......'); // 后执行
    };
    document.getElementById('btn').addEventListener('click', submit2, false);

    document.getElementById('btn').onclick = function() {
        console.log('脚本 click......'); // 先执行
    };
</script>