js的事件

1 什么是事件

        一个事件有什么组成

        触发谁的事件：事件源

        触发什么事件：事件类型

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

2 事件绑定方式

 1） dom0级的事件绑定方式

        元素.onxxxx的方式

        弊端：一旦写了第二个事件，那么第一个时间就会被覆盖

 2）dom2级事件监听

        元素.addEventListener('事件类型',事件处理函数[,冒泡还是捕获])

        这个方法不兼容，在IE的低版本里面使用addEvent

        var oDiv = document.querySelector('div')

        // dom0级事件绑定
        oDiv.onclick = function () {
            console.log(this)
            console.log('触发了事件1')
        }
       

        // dom2级事件监听
        oDiv.addEventListener('click', function () {
            console.log('我是第一个事件')
        })

3 事件的解绑方式

        1) dom0级事件的解绑

        元素.onxxx = null

        同类事件会被覆盖并且清空

        2) dom2级事件的解绑

        元素.removeEventListener('事件类型'，要解绑的事件处理函数[,冒泡还是捕获])

        用于解绑指定元素的事件监听器

        var oDiv = document.querySelector('div')
        function clickHandler() {
            console.log(this)
            console.log('第一个事件')
        }
        function clickHandler2() {
            console.log('第二个事件')
        }


        // dom2级 绑定事件
         oDiv.addEventListener('click',clickHandler)
         oDiv.addEventListener('click', clickHandler2)
        // 解绑
         oDiv.removeEventListener('click',clickHandler)
         oDiv.removeEventListener('click', clickHandler2)

        // dom0级 绑定事件
         oDiv.onclick = clickHandler
         oDiv.onclick = clickHandler2
        // dom0解绑
         oDiv.onclick = null

4 事件委派

        元素.dispatchEvent(事件对象)

        == 向一个指定的事件目标派发一个事件，可以是原生事件也可以是自定义事件

        // 事件委派
        var event1 = new Event('click')
        console.log(event1)

        setInterval(function(){
            oDiv.dispatchEvent(event1)
        },1000)