JavaScript三种绑定事件的方式及其用法区别（一个很好的面试题目）

关注

转载最新推荐文章于 2026-02-26 22:17:42 发布 440 阅读 AI 写同款· GEO 优化 ›

【微信小程序入门到精通】— 事件绑定的详细解读_微信小程序绑定点击事件大家每天都要开开心心的喔，让我们一起快乐的学习吧！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！尝辄止，不再深入研究，那么很难做到真正的技术提升。**需要这份系统化资料的朋友，可以戳这里获取。阅读详情

转自：https://www.cnblogs.com/mylove103104/p/4667211.html

JavaScript三种绑定事件的方式：

　　1. <div id="btn" onclick="clickone()"></div> //直接在DOM里绑定事件

　　　　<script>

　　　　　function clickone(){ alert("hello"); }

　　　　</script>

　　2. <div id="btn"></div>

　　　　<script>

　　　　　document.getElementById("btn").onclick = function（）{ alert("hello"); } //脚本里面绑定

　　　　</script>

　　3. <div id="btn"></div>

　　　　<script>

　　　　　document.getElementById("btn").addeventlistener("click",clickone,false); //通过侦听事件处理相应的函数

　　　　　function clickone(){ alert("hello"); }

　　　　</script>

那么问题来了，1 和 2 的方式是我们经常用到的，那么既然已经有两种绑定事件的方法为什么还要有第三种呢？答案是这样的：

用 "addeventlistener" 可以绑定多次同一个事件，且都会执行，而在DOM结构如果绑定两个 "onclick" 事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

　　1. <div id="btn" onclick="clickone()" onclick="clicktwo()"></div> 

　　　　<script>

　　　　　function clickone(){ alert("hello"); } //执行这个

　　　　　function clicktwo(){ alert("world!"); }

　　　　</script>

　　2. <div id="btn"></div>

　　　　<script>

　　　　　document.getElementById("btn").onclick = function（）{ alert("hello"); }

　　　　　document.getElementById("btn").onclick = function（）{ alert("world"); } //执行这个

　　　　</script>

　　3. <div id="btn"></div>

　　　　<script>

　　　　　document.getElementById("btn").addeventlistener("click",clickone,false);

　　　　　function clickone(){ alert("hello"); } //先执行

　　　　　document.getElementById("btn").addeventlistener("click",clicktwo,false);

　　　　　function clicktwo(){ alert("world"); } //后执行

　　　　</script>

以上；可根据场景灵活选择。

值得仔细推敲。

收录于