HTML中的DOM事件

一、事件

        1、事件

        事件,就是函数在某种状态下被调用.JS捕捉到的发生在网页上的行为,官方称为事件句柄,是交互体验的核心功能。官方调用的称为事件。事件分为两种：用户交互时触发的函数，称为交互事件；自发地在某个时刻调用的函数，称为生命周期函数，又叫做钩子。

        事件三要素：事件源、事件类型、事件处理程序。

        2、绑定事件

        （1）行内样式绑定：在行内样式中，添加一个属性，属性名为“on+事件名”，属性值是一个函数调用。在script标签中对函数进行定义。

<div class="box" onclick="fn()">点击</div>
<script>
    function fn(){
        console.log(111)            
    }
</script>

        （2）元素属性绑定：获取元素后，使用点语法对元素添加一个属性，属性名为“on+事件名”，给这个属性赋值一个事件处理程序（函数）。

<div class="box">点击</div>
<script>
    var box = document.querySelector('.box')
    box.onclick = function (){
        console.log(111)
    }
</script>

         （3）H5新增的方法addEventListener（）绑定，有三个参数，第一个为事件类型，是字符串类型，第二个为事件处理函数，第三个为是否在捕获阶段触发，默认false，在冒泡阶段触发。

<div class="box">点击</div>
<script>
    var box = document.querySelector('.box')
    box.addEventListener('click',function(){
        console.log(111)
    })
</script>

二、主要事件

       1、鼠标事件

        click：鼠标单击。dblclick：鼠标双击。

        mousedown：鼠标按下。mouseup：鼠标松开。

        mousemove：鼠标在元素上连续滑动，会连续触发，可以用来获取鼠标的当前坐标。

        mouseover：鼠标进入元素或者元素内的子元素。

        mouseout：鼠标离开，在子元素内移动还是会触发。

        mouseenter(html5标准)：鼠标进入元素时触发一次，包括子元素，即使子元素超出了父元素的范围。

        mouseleave(html5标准)：鼠标完全离开元素，也就是从事件源元素离开到另一个范围，这个范围不包括子元素的范围。

        2、键盘事件

        keydown：某个键被按下。keyup：某个键被松开。

        keypress：与mousemove类似，是一个连续状态，某个键被一直按着，就会一直触发。

        3、输入框事件

        input：检测input框的聚焦状态下的文本变化。

        change：当input框文本内容对比聚焦前的文本发生改变时触发。

        focus：input聚焦时触发。blur：input框失焦时触发。

三、解绑事件

        对于使用行内样式和元素属性绑定的，在解绑时，对一个元素通过绑定一个事件，在函数的执行体中给其他的元素的绑定属性赋值为空，或者其他字符都可以，实质上就是让这个属性不再指向绑定事件的处理程序。

        对于使用addEventListener添加的监听器，解绑时使用removeEventListener移除监听器，参数与添加的参数一样。从参数一样，可以得出，第二个参数必须是传的外部已经定义好的函数，因为函数是属于引用数据，这样才能使两次的函数指向同一个。

        那么对于添加监听器时，第二个参数为函数直接量的绑定，用removeEventListener就不行了，即使将addEventListene中的这个函数直接量粘贴到removeEventListener中，他们也不是同一个东西，两者所指向的地址不同。这种需要将removeEventListener放在addEventListene中，使用arguments.callee，指向正在执行的函数本身的引用，这样就保证两个的引用地址一样。

<script>
    function fn3(){
        var inpu = document.querySelector('input')
        var box = document.querySelector('.box')
        console.log('解绑按钮')
        inpu.onkeypress = null;
        inpu.onfocus = null;
        inpu.onblur = null;
        box.removeEventListener('mouseout',fn)
    }
    var box = document.querySelector('.box')
    function fn(){console.log(111)}
    box.addEventListener('mouseout',fn)
    box.addEventListener('dblclick',function(){
        console.log('双击事件')
        box.removeEventListener("dblclick" , arguments.callee);
    })
</script>