Javascript从零基础到精通——事件

事件

事件是给浏览器定义一个预处理函数，当事件触发的时候，执行函数，这就是事件。

理解事件:
在一个程序中，我们决定做了用户做了事情之后该做什么
事件的原理和hover类似。可以做到:hover做不到的事，:hover只能操作当前的元素，但是事件绑定之后可以选择任何元素。

事件触发三要素：

通过谁触发？ 通过什么触发？触发后要做什么？

事件的写法：

w3c标准：事件写在行内，但是因为结构和行为要分离，所以我们一般情况下用JavaScript的方法来绑定事件，只有再极少数情况下，才将事件写在行内。

事件的绑定方法：

浏览器中的节点(对象).on+事件句柄 = function( ){

     要干什么？（放在浏览器中，不执行，当事件发生的时候再执行。）
     
}

例如:

oDiv.onclick=function(){     
     alert（1）
}

事件对象

当事件被触发的时候会得到一个信息（事件对象），包含了跟事件相关的一些属性和方法的封装（如：事件发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等），只有事件在触发的时候才会得到。

JS“缺德”定律：事件对象有兼容问题；

兼容写法：

e=e || window.event;

鼠标事件类型

    onclick
        单击
        
    ondblclick
        双击
        
    oncontextmenu
        鼠标右键（上下文菜单）
        
    onmousedown
        鼠标按下
        
    onmouseup
        鼠标抬起
        
    onmouseover
        鼠标移入
        
    onmouseout
        鼠标移出
        
    onmouseenter
        鼠标移入，但是他不会在穿过子元素的时候出发
        
    onmouseleave
        鼠标移出，但是他不会在穿过子元素的时候出发
        
    onmousemove
        鼠标移动

鼠标事件及方法

    e.buttons
        返回鼠标点击按键（1左键，2右键，4中键滚轮）
        
    e.offsetX / offsetY         距离点击最小的元素边缘的坐标
        获取事件触发最近的盒子（事件源）的坐标
        
    e.clientX / clientY         无论点box的哪个位置，都是固定算到浏览器可视区边缘，不计算滚动部分
        获取可视区的坐标（根据浏览器的定位）
        
    e.screenX / screenY         无论浏览器是多大，都是获取到整个屏幕边缘的坐标
        获取整个屏幕的坐标
        
    e.pageX / e.pageY           如果没有滚动条或者滚动条在最顶部，那么这组值和client是一样的/有滚动条他是计算包含滚动部分的总值
        获取文档的坐标（包含滚动条）
        
    client和page这两对用的最多

键盘事件类型

    keydown
        键盘按下
        
    keyup
        键盘抬起
        
    keypress
        键盘敲击
        
    特殊键码：是否按下alt  ctrl  和 shift
    e.altKey
    e.ctrlKey
    e.shiftKey
    
    // 获取键盘键码的兼容写法
    var code = e.keyCode || e.which

表单事件类型

    在单选，多选，下拉菜单给这些元素绑事件一般用change
    
    获取选中的值的时候并不需要取获取option, 直接获取当前select的value属性即可, text取到的是字符串
        当option没有value属性的时候获取的就是innerHTML
        当option里面有value属性的时候获取到的就是选中option的value值
        
    onfocus
        获取焦点
        
    onblur
        失去焦点
        
    onsubmit
        表单提交

鼠标滚轮事件

    scroll
        没有滚动条的时候是不会触发的
        
    mousewheel(火狐不兼容)
    DOMMouseScroll(兼容火狐)
        没有滚动条的时候也会触发

事件默认行为

只有有默认行为的事件才需要写这个, 不同的事件里阻止的是不同的行为
    比如说a标签，点击后有跳转动作；
    form表单中的submit类型的input有一个默认提交跳转事件；
    reset类型的input有重置表单行为。

阻止默认事件:

	// , 这种写法要放在函数末尾来阻止默认行为
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            return false;
        }

事件流

    子元素的事件被触发时, 父级也会被触发(冒泡)
    
    一个完整事件流包含: 捕获阶段 --> 目标阶段 --> 冒泡阶段
        IE浏览器不认识捕获
        
    冒泡是可以阻止的: 阻止事件从当前元素往外传播
        e.stopPropagation();
        e.cancelBubble=true;    //兼容IE

阻止冒泡事件的兼容写法:

    if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }

事件监听

DOM0级事件处理，是一种赋值方式，是被所有浏览器所支持的，简单易懂容易操作；

DOM2级事件处理是所有DOM节点中的方法，可以重复监听，但是浏览器兼容存在问题；

    //DOM0级
    oDiv.onclick = function(){}
    //DOM2级
    function fn(){}
    if(window.attachEvent){
        // IE
        oDiv.attachEvent("onclick", function(){});  // IE只有冒泡阶段,所以没有第三个参数，而且需要加on；
    }else{
        // 普通浏览器
        // 这里的fn不用加括号, 因为fn不是要直接调用, 而是将来事件触发了才会被事件去调用
        oDiv.addEventListener( "click", fn,false);  // false指冒泡阶段
    }
    //移除事件监听，第二个参数为必须，移除的事件处理函数
    oDiv.removeEventListener( "click",fn)
    oDiv.detachEvent("onclick",fn)

事件委托(事件处理)委派

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以处理某一类型的所有事件
使用场景主要用于事件源不确定的情况，可以把事件委托给父级

判断事件源：

e.target || e.srcElement