Js 三种绑定事件方式及区别

最新推荐文章于 2023-02-16 12:48:12 发布

Missy Peng

最新推荐文章于 2023-02-16 12:48:12 发布

阅读量827

点赞数 1

分类专栏： JavaScript 文章标签： js 绑定事件方式区别 js绑定事件方式

本文链接：https://blog.csdn.net/superman_peng/article/details/115264827

版权

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

摘要由CSDN通过智能技术生成

三种事件绑定方式

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>