绑定事件

div.onclick = function(){
    console.log("a");
};
<div style="width: 100px;height:100px;background-color:red;" onclick="console.log("a");"></div>

div.addEventListener("click", function(){
    console.log("a");
}, false);
//第三个参数: 
// true: 事件句柄在捕获阶段执行
// false：事件句柄在冒泡阶段执行
// 以上两种方式绑定, this 都是指向被绑定的元素

//IE9以下绑定事件
div.attachEvent("on" + 事件类型, 处理函数);
//this -> window

解决attachEvent的this指向问题

div.attachEvent("onclick", fucntion(){
    handle.call(div);             
});
fucntion handle(){
    //事件处理函数
    this;
}

综合的addEvent

function addEvent(ele, type, handle) {
        if(ele.addEventListener){
            ele.addEventListener(type, handle, false);
        } else if (ele.attachEvent) {
            ele.attachEvent("on" + type, function () {
                handle.call(ele);
            });
        } else {
            ele["on" + type] = handle;
        }
}

解除事件绑定

removeEventListener()

ele.onclick = null;

ele.detachEvent()

事件冒泡

​ 事件冒泡: 结构上(非视觉上)存在嵌套关系的元素, 会存在事件冒泡, 同一事件, 自子元素冒泡向父级元素.(自底向上)

​ 事件捕获: 结构上(非视觉上)存在嵌套关系的元素, 会存在事件捕获, 同一事件, 自父元素冒泡向子级元素.(自顶向下)

​ IE的捕获事件: setCapture(), releaseCapture(), 这个捕获方法很横! 横到能捕获浏览器之外的事件

​ 触发顺序: 先捕获, 后冒泡.

​ focus, submit, blur, change, select,没有冒泡

​ 阻止冒泡事件: e.stopPropagation

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

阻止默认事件

​ 以鼠标右键菜单为例(还有链接跳转, 表单提交等)

document.oncontextmenu = function(e){
    console.log("a");
    return false;   //以对象属性的方式注册的事件才生效
    e.preventDefault();     //W3C标准, IE9以下不兼容
    e.returnValue = false;  //IE的方式
}

​ 封装成函数

function cancelDefault( e ){
    if( e.stopPropagation ){
        e.stopPropagation();
    } else {
        e.returnValue = false;
    }
}

cancelDefault( e );

事件源对象

​ 事件源对象指的是：事件在谁身上触发上的, 就是谁

​ 一个div里面包裹着另外一个div, 如果点击里面的div, 这时候srcElement就是里面的div.

​ 这个事件源对象保存在一个event对象里面. 这个对象里面有很多的东西, 源对象只是其中一个.

给li绑定事件的经典例子

var ul = document.getElementsByTagName('ul')[0];
    ul.onclick = function(e){
    var event = e || window.event;
    var target = event.target || event.srcElement;
    if(target.tagName.toLocaleUpperCase() === "LI"){
        //do something ...
    }
}