事件（一）绑定与解除事件

一.如何绑定事件处理函数

1.DOM.onxxx = function (event){}

div.onclick = function(){}

兼容性很好 但是一个元素的同一个事件只能绑定一个处理程序 

基本等用于 写在html行间上

2.DOM.addEventListener(事件类型,处理函数)

obj.addEventListener('click', function(){
console.log('a');
});

3.DOM.attachEvent（'on'+事件类型，处理函数）

 div.attachEvent('onclick', function(){});

二.事件处理程序的运行环境

1.DOM.onxxx = function (event){}

程序this指向DOM元素本身

2.DOM.addEventListener(事件类型,处理函数)

程序this指向DOM元素本身

3.DOM.attachEvent（'on'+事件类型，处理函数）

div.attachEvent('onclick', function(){
      handle.call(div);//会指向div
});
function handle(){
        this.xxx = xxx;
}

三.事件处理模型---事件冒泡 捕获

注意： 一个对象的一个事件类型上面绑定到的一个处理函数 只能遵循一种事件模型

1.事件冒泡

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

2.事件捕获

结构上（非视觉上）嵌套关系的元素 会存在事件捕获的功能 即同一事件 自父元素捕获至子元素 （事件源元素）

3.触发顺序 先捕获 后冒泡

一个对象的一个对象类型绑定两个处理函数 一个遵循事件捕获 一个遵循事件冒泡 触发顺序是 先捕获 后冒泡

4.focus, blur, change, submit, reset, select等事件不冒泡

四.取消冒泡和阻止默认事件

1.取消冒泡

事件对象 在每个事件处理函数上面可以写一个形参 系统会帮助传这个形参即事件对象 事件对象上面有很多属性 属性记载了事件发生时的一列数据和信息 

（1）stopPropagation() 不支持ie9以下版本

 （2）stopPropagation（） 

document.onclick = function(){
      console.log('xxx');
}
var div = document.getElementByTagName('div');
div.onclick = function(e) {
       //e即为事件对象
       e.stopPropagation();
       this.style.background = "green";
      //如果没有上面一行的取消冒泡操作，
      //点击div时背景既会变成绿色，也会打印console.log中的内容。
       //（因为他是整个页面上的点击事件内容）
}

2.阻止默认事件

，默认事件： 表单提交 , a标签跳转 ， 右键菜单等

（1） rerurn false 以对象属性方式注册的事件才生效

阻止右键弹出菜单

document.oncontextmenu = function() {
        console.log('a');
        return false;
}

（2）event.preventDefault();W3C标准，IE9以下不兼容

document.oncontextmenu = function(e) {
        e.preventDefault();
        console.log('a');
}

（3）event.returnValue = false;兼容IE
（4）封装阻止默认事件的函数cancelHandler(event);

function cancelHandler(event){
    if(event.preventDefault()){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}

• a标签跳转默认跳到页面的开头，如何去掉这个默认事件呢？

<a href = "#">www.xxx.com</a>
//javascript
var a = document.getElementsByTagName('a')[0];
a.onclick = function(e) {
      cancelHandler(e);//利用上方的阻止默认事件的封装函数
}

七.事件委托

利用事件冒泡 和事件源对象进行处理

（1）性能 不需要循环所有的元阿苏一个个绑定事件

（2）灵活 当有新的子元素时不需要重新绑定事件

//html
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
//js
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function (e) {
      //li在ul内部，点击li部分时，会逐步冒泡给ul
      var event = e || window.event;//事件对象
      var target = event.target || event.srcElement;//事件源对象
      console.log(target.innerText);
}