绑定点击事件及解绑点击事件

 1、绑定点击事件onclick

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

   ○ 触发谁的事件：事件源

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

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

    <div>div>
    <script>
        var oDiv = document.querySelector("div")
 
        oDiv.onclick = function(){}
    script>

// 谁来触发事件 => 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的类型的，会出现后面覆盖前面的执行函数

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

结果是：222

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

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

● addEventListener：事件处理器

● addEventListener（事件类型，函数）

    <div>aaaadiv>
    <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>

结果：111   222   333 

 

2、解绑事件

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

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

结果：

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

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

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

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

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

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

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

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

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