绑定点击事件及解绑点击事件_<div>根据class属性绑定单击事件-优快云博客

本文链接：https://blog.youkuaiyun.com/a1598452168YY/article/details/127429202

本文详细介绍了在HTML中如何绑定和解绑点击事件。使用`onclick`属性进行DOM0级事件绑定，但存在覆盖问题。通过DOM2级的`addEventListener`可以添加多个事件处理函数并按顺序执行。解绑事件的方法包括设置`disabled`属性、将`onclick`设为`null`以及使用`removeEventListener`移除特定事件处理函数。

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

1、绑定点击事件onclick

（1）一个事件由什么东西组成

○ 触发谁的事件：事件源

○ 触发什么事件：事件类型

○ 触发以后做什么：事件处理函数

<body>
    <div></div>
    <script>
        var oDiv = document.querySelector("div")

        oDiv.onclick = function(){}
    </script>
</body>
// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 => onclick => 这个事件类型就是 click
// 触发之后做什么 => function () {} => 这个事件的处理函数

○ 我们想要在点击 div 以后做什么事情，就把我们要做的事情写在事件处理函数里面

var oDiv = document.querySelector('div')

oDiv.onclick = function () {
  console.log('你点击了 div')
}

当我们点击 div 的时候，就会执行事件处理函数内部的代码
每点击一次，就会执行一次事件处理函数
事件是click，不加on，on是点击的动作

（2）box.onclick = function(){}

● 这种绑定方式是dom0的类型的，会出现后面覆盖前面的执行函数

<body>
    <div>aaaa</div>
    <script>
        var oDiv = document.querySelector("div")
        //绑定第一个事件
        oDiv.onclick = function(){
            console.log("111")
        }
        //绑定第二个事件
        oDiv.onclick = function(){
            console.log("222")
        }
    </script>
</body>

结果是：222

解释说明：当你给一个元素对象绑定两个点击事件时（onclick），当你点击元素内容，就只能打印出第二个结果，因为第二个事件把第一个给覆盖了，相当于赋值的意思。

（3）使用dom2方式：绑定多个事件处理函数，按顺序执行

● addEventListener：事件处理器

● addEventListener（事件类型，函数）

<body>
    <div>aaaa</div>
    <script>
        var oDiv = document.querySelector("div")
        oDiv.addEventListener("click",function(){
            console.log("111")
        })
        oDiv.addEventListener("click",function(){
            console.log("222")
        })
        oDiv.addEventListener("click",function(){
            console.log("333")
        })
    </script>
</body>

结果：111 222 333

2、解绑事件

（1）方法一：this.disabled = "disabled”

<body>
    <button id="btn">抽奖</button>
    <script>
        btn.onclick = function(){
            console.log("谢谢惠顾")
            console.log(this)//打印一下当前获取的对象
            this.disabled = "disabled"
        }
    </script>
</body>

结果：

解释说明：通过结果可以看出this当前获取的对象就是这个button元素，然后this.disabled = "disabled”的含义实质上就是给button标签加上一个disabled禁用属性罢了。

缺点是：人家还可以打开后台代码设置，把这个button的disabled的属性删掉，又可以点这个按钮了

（2）方法二：dom0方式：this.onclick = null

<body>
    <button id="btn">抽奖</button>
    <script>
        btn.onclick = function(){
            console.log("谢谢惠顾")
            this.onclick = null
        }
    </script>
</body>

当点击完一次以后直接给点击事件赋值为null。。。

(3) 方法三：dom2方法：this.removeEventListener（事件类型，函数）

removeEventListener：事件处理器，功能是移除事件

<body>
    <button id="btn">抽奖</button>
    <script>
        function handler(){
            console.log("谢谢惠顾")
            this.removeEventListener("click",handler)
        }
        btn.addEventListener("click",handler)
    </script>
</body>

思路：点击事件打印“谢谢惠顾”以后再解绑