Javascript 绑定事件，删除事件，事件冒泡，事件捕获，取消冒泡，阻止默认事件

本文是博主学习JavaScript的学习记录。

1 绑定事件

1.1 句柄绑定事件

onclick 等
onxxx = function(event) {}兼容性最好，但同一个dom对象只能绑定一个处理函数，基本等同于写在HTML行间上
由于function在预编译提升，所以只会执行下面的处理函数

var div = document.getElementsByTagName("div")[0];
div.onclick = function(e) {
    console.log("OK");
}
div.onclick = function(e) {
    console.log("NO");
}

obj.addEventListener(type, fn, false);IE9以下不兼容，可以绑定多个处理函数
obj.attachEvent('on' + type + fn);IE独有，一个事件可绑定多个处理程序，但这里的this指向window，不指向obj。
addEventListener如果添加多个一样的处理函数，相当于一个

div.addEventListener("click", test, false);
div.addEventListener("click", test, false);
function test() {
    console.log("test执行了...");
}

封装兼容性的方法addEvent()，

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

1.2删除监听事件

某些网站例如迅雷，点一次进入广告，点第二次进入正常链接，就是将点击函数封装成只执行一次的处理函数，例如在处理函数末尾加this.onclick = null; .
对于addEventListener(type, fn, false)添加的监听事件，通过removeEventListener(type, fn, false)进行删除type和fn名字必须相同。
对于IE的监听事件 ele.detachEvent("on" , type, fn); .
若绑定匿名函数，就无法解除了

div.addEventListener("click", function tttt(e) {
    test();
    div.removeEventListener("click", tttt, false);
}, false);

div.addEventListener("click", function ttt(e) {
    test();
    div.removeEventListener("click", ttt, false);
},false);
function test() {
    console.log("test执行了...");
}

2 事件处理模型

2.1 事件冒泡

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能事件，自子元素冒泡向父元素（自底向上）

var wrapper = document.getElementsByClassName("wrapper")[0];
var plat = document.getElementsByClassName("plat")[0];
var box = document.getElementsByClassName("box")[0];

wrapper.addEventListener("click", function(e) {
    console.log("wrapper");
}, false);
plat.addEventListener("click", function(e) {
    console.log("plat");
})
box.addEventListener("click", function(e) {
    console.log("box");
}, false);

2.2 事件捕获

结构上（菲视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（自顶向下）
IE没有捕获事件
事件捕获就是把addEventListener(type,fn,false);函数的第三个参数false改为true即可。

wrapper.addEventListener("click", function(e) {
    console.log("wrapper");
 }, true);
 plat.addEventListener("click", function(e) {
     console.log("plat");
 }, true);
 box.addEventListener("click", function(e) {
     console.log("box");
 }, true);

触发顺序 先捕获，后冒泡

2.3 取消冒泡

W3C标准 event.stopPropagation();不支持IE9以下。

plat.addEventListener("click", function(e) {
    console.log("plat");
    e.stopPropagation();
},false);
box.addEventListener("click", function(e) {
    console.log("box");
    e.stopPropagation();
}, false);

IE用event.cancelBubble = true; (谷歌也可以用)
封装取消冒泡的函数 stopBubble(event) 实现兼容

// 封装取消冒泡方法
     function stopBubble(event) {
         if(event.stopPropagation) {
             event.stopPropagation();
         } else {
             event.cancelBubble = true;
         }
     }

2.4 阻止默认事件

例如：表单提交 a标签跳转，右键菜单等

1. return fase; 以对象属性的方式注册的事件生效
   a.onclick = function(e) { return false; }
2. event.preventDefault(); //W3C标准，IE9不兼容
3. event.returnValue = false; //兼容IE
   封装阻止默认事件的函数cancleHandler(event);

// 封装阻止默认事件的函数
function cancelHandler(event) {
    if(event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
}

2.5 事件源对象

获取事件源对象

event||window.event   //后者用于IE
// 事件源对象
event.target   //火狐
event.srcElement //IE
// Chrome都有
// 兼容性写法
var event = event || window.event;
var target = event.target || event.srcElement;

利用事件冒泡，和事件源对象进行处理
优点：
1 性能不需要循环所有元素一个个绑定事件
2 灵活 当有心得子元素时不需要重新绑定事件
例如
若想给ul下的li添加事件，li可能无限增加，这时候可以在ul上添加监听事件。

function demo(event) {
     var event = event || window.event;
     var target = event.target || event.srcElement;
     return target;
 }
 var ul = document.getElementsByTagName("ul")[1];
 ul.onclick = function(event) {
     console.log(demo(event));
 }

效果:

2.6 拖拽功能

        var pushDiv = document.getElementsByClassName("demo")[0];
        var divX,
            divY;
    // 添加事件
        function addEvent(elem, type, handle) {
            if(elem.addEventListener) {
                elem.addEventListener(type, handle, false);
            } else if(elem.attachEvent) {
                elem.attachEvent("on", type, handle.call(elem));
            } else {
                elem["on" + type] = handle;
            }
        }

    // 取消事件
        function removeEvent(elem, type, handle) {
            if(elem.addEventListener) {
                elem.removeEventListener(type, handle, false);
            } else if(elem.attachEvent) {
                elem.detachEvent("on", type, handle.call(elem));
            } else {
                elem["on" + type] = null;
            }
        }
        
        addEvent(pushDiv, "mousedown", divMouseDown);
        function divMouseDown(e) {
            var event = e || window.event;
            divX = event.pageX - parseInt(pushDiv.style.left);
            divY = event.pageY - parseInt(pushDiv.style.top);
            
            addEvent(document, "mousemove", divMouseMove);
            addEvent(document, "mouseup", divMouseUp);
        }
        function divMouseMove(e) {
            var event = e || window.event;
            pushDiv.style.left = event.pageX - divX + "px";
            pushDiv.style.top = event.pageY - divY + "px";
            
        }
        function divMouseUp(e) {
            removeEvent(document, "mousemove", divMouseMove);
        }

效果图![拖拽功能效果图

3 鼠标，键盘，文本操作事件

3.1 鼠标事件

常用事件

• click
• mousedown
• mouseup
• mousemove
• contextmenu （过时）
• mouseover
• mouseout
• mouseleave

用button区分鼠标的按键 0/1/2
click事件只能监听左键，只能用mousedown和mouseup来判断鼠标按键

3.2 键盘事件

• keydown keyup keypress
• keydown > keypress > keyup
• keydown可以响应任意键盘按键，keypress只可以响应字符类键盘按键
• keypress返回ASCII码，可以转换成相应字符

可以用fromCharCode()方法将ASCII码转换成字符。

document.onkeypress = function(e) {
    console.log(String.fromCharCode(e.keyCode));
}

keydown事件获取的keyCode是字符大写的ASCII码，keypress事件获取的keyCode是字符小写的ASCII码
按字符键时，先触发keydown，再触发keypress，后触发keyup。

3.3 文本操作事件

input，输入
focus，聚焦
blur，失去焦点
change 值改变。