随手笔记5--事件的高级

一、事件基础

1.事件对象：当浏览器执行事件时，会将所有与事件相关的内容(鼠标位置，触发的目标等)封装为一个对象，并且在触发事件的函数，在事件函数中进行传递
   常见属性：
        clientX
        clinetY 鼠标相对客户端的位置
        pageX
        pageY 鼠标相对于页面的位置
        type 事件类型
        target 事件作用的节点对象
2.事件的兼容性
   在低版本的IE和火狐上，事件传递机制不一样，需要通过window.event来获取事件

二、事件的绑定(监听器)

1. 事件绑定
   添加事件的做法，若出现为同一个节点绑定了同名的事件，会出现覆盖效果。
   添加事件绑定：addEventListener(事件名,事件函数,isBubble)
        isBubble :默认为false 事件是冒泡机制 true 事件为捕获机制
   注意：事件名没有on前缀
   移除事件绑定：removeEventListener(事件名,事件函数,isBubble)
   注意：一定要保证移除事件时和添加事件时是同一个事件函数
   失败做法：

o.addEventListener('click',function(){
            console.log('hello');
        },false)

        //注意：移除事件是，一定要保证移除的事件函数与添加时是同一个事件函数
        o.removeEventListener('click',function(){
            console.log('hello');
        },false)

正确做法：

o.addEventListener('click',fn2,false);
o.removeEventListener('click',fn2,false);//移除事件 
function fn2(){
   console.log('world');
}

事件绑定兼容性问题:在低版本IE中(IE 6/7/8)不支持addEventListener和removeEventListener,因此在低版本IE中可以使用：
attachEvent(事件名,事件函数) 绑定事件 detachEvent 取消事件
注意：事件名 包含on前缀
两种事件绑定的区别：
1.addEventListener：

• 事件名没有on前缀
• 可以选择冒泡或者捕获机制
• this 指事件调用者
• 同名事件的执行顺序：先添加先执行

2.attachEvent

• 事件名需要添加on前缀
• 不能选择冒泡或捕获的机制
• this 指window对象
• 同名事件的执行顺序：后添加先执行

三、事件流

事件流：事件被触发之后会在DOM树的节点之间传递
冒泡：事件由最具体的元素(事件的触发者),层层向外传递（传递给父节点），直到window 对象停止
捕获：事件由最外层元素(window),层层向内传递，直到最具体的元素
事件流机制有时候会对页面效果造成一些影响，所以需要拦截事件的冒泡。
兼容性写法：
//判断window.event是否有值。IE低版本用第一个，标准浏览器用后面哪一个
window.event?window.event.cancelBubble=true:e.stopPropagation()

四、拦截浏览器的默认行为

拦截浏览器自带的一些事件行为，例如：a超链接的跳转等....

对象.事件名                          return false
对象.addEventListener()      e.preventDefault()
对象.attachEvent()                e.returnValue=false; retrun false;

五、事件的委托

事件委托：事件添加元素父节点(原理：事件的冒泡机制) 将事件添加到父元素上，当事件发生时，父元素会找到对应触发事件的子元素去处理，后期添加的子元素，依然有这个事件

var o=document.querySelector('div');
        document.querySelector('#btn').onclick=function(){
            o.innerHTML+="<button>点我</button>";
        };
        var btns=o.getElementsByTagName('button');
        o.onclick=function(e){
            e=e||window.event;
            if(e.target.nodeName=="BUTTON"){
                alert('hello world');
            }
        };