javascript点击事件与事件监听 -- 技巧⭐

最新推荐文章于 2025-03-27 23:07:21 发布

霄的超

最新推荐文章于 2025-03-27 23:07:21 发布

阅读量2.3k

点赞数 1

文章标签： javascript html html5

本文链接：https://blog.youkuaiyun.com/Messchao/article/details/120540719

版权

本文探讨了JavaScript中onclick事件处理与addEventListener方法监听事件的区别。onclick无法支持多个单击函数并行执行，而addEventListener则可以。通过示例代码展示了如何使用这两种方式触发不同的警告框，进一步解释了事件监听的灵活性。

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

js点击事件与事件监听 @Draven

效果预览
html代码
css代码
js代码

onclick 与 addEventListener绑定click的区别在于前者不能执行多个单击函数，后者则可以执行多个单击函数

效果预览

在这里插入图片描述

html代码

	<button>传统注册方式</button>
	<button>方法监听注册方式</button>

css代码

无

js代码

<script>
    var button = document.querySelectorAll('button')
    button[0].onclick = function () {
        alert('hello')
    }
    button[0].onclick = function () {
        alert('hao a you')
    }
    //事件侦听注册时间
    button[1].addEventListener('click',function (){
        alert(11)
    })
    button[1].addEventListener('click',function (){
        alert(22)
    })
</script>