DOM事件高级

一、注册事件

        注册方式有2种：传统注册方式、监听注册方式

        传统方式

    <button>点击</button>

    <script>
        //唯一性
        var btn = document.querySelector('button')

        btn.onclick = function(){
            alert('hi')
        }

        btn.onclick = function(){
            alert('hello')
        }

        
    </script>

二、事件监听

      addEventListener()事件监听

        eventTarget.addEventListener(type,listener[,useCapture])

        eventTarget.addEventListener()方法将指定的监听注册到eventTarget(目标对象)

上，当该对象触发指定的事件时，就会执行事件处理函数。

        该方法接收三个参数：

        type：事件类型字符串，比如click、mouserover，注意这里不要带on

        listener：事件处理函数，事件发生时，会调用该监听函数

        useCapture：可选参数，是一个布尔值，默认时false。

    <button>点击</button>
    <script>
        let btn = document.querySelector('button')

        btn.addEventListener('click',function(){
            alert('hi')
        })
        btn.addEventListener('click',function(){
            alert('hello')
        })

        
    </script>

      attacheEvent()事件监听

        eventTarget.attacheEvent(eventNameWithOn,callback)

        eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

        该方法接收两个参数：

        eventNameWithOn：事件类型字符串

        callback：事件处理函数，当目标触发事件时回调函数被调用

    <button>点击</button>

    <script>
        let btn = document.querySelector('button')
        btn.attacheEvent('onclick',function(){
            
        })
    </script>

三、删除事件(解绑事件)

        1.传统注册方式

        eventTarget.onclick = null;

        2.方法监听注册方式

        eventTarget.removeEventListener(type,listener[,userCapture])

        eventTarget.datachEvent(eventNameWithon,callback)

        

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        //传统
        var divs = document.querySelector('div')

        divs[0].onclick = function(){
            alert(11)
            divs[0].onclick = null
        }

        //removeEventListener
        divs[1].addEventListener('click',fn)
        function fn() {
            alert('22')
            divs[1].removeEventListener('click',fn)
        }
    </script>