前端随心记---------Javascript系列（第十二节.事件流）

事件流

事件流所描述的就是从页面中接受事件的顺序。
当某个事件执行时,从子元素向父元素触发或从父元素向子元素触发称为事件流
事件流的两种模式:
事件冒泡:子元素向父元素触发.
概念;当某事件触发时,同样的事件会向父元素触发,即事件冒泡.不是所有事件都会产生冒泡问题.
阻止冒泡:
现代浏览器::e.stopPropagation( ); 在ie8下不支持
ie浏览器::e.cancelBubble = true;

兼容性：

  if(e.stopPropagation){
                e.stopPropagation( );
                }else{
                e.cancelBubble=true ;
                ]
       e.stopProgapation ?  e.stopPropagation( ):e.cancleBubble=true ;

阻止事件默认行为

现代浏览器 : e.preventDefault( ); ie8下不支持
ie : returnValue = false ; ie8下阻止默认行为的方式
兼容: e.preventDefault ? e.preventDefault( ) : e.returnValue =false;

事件执行函数加 return false 阻止默认行为,所有浏览器都兼容.

绑定事件:
obj.onclick =function( ){ };
<div onclick="add( )"></div>
addEventListener( ) 事件监听

事件监听    addEventListener( )   高版本浏览器
事件监听的好处:
可以为一个元素绑定多个同一事件
程序员可以使用事件监听方式 确定 触发的事件过程是冒泡还是捕获.
事件源.addEventListenter("没有on的事件",function(){ },true/false); 默认false冒泡,true为捕获.
同一元素既有捕获监听,又有冒泡监听,优先执行捕获.

ie事件监听:document.attachEvent("on+事件",function(){ });没有第三参数 没有捕获或冒泡的区分.

兼容事件监听函数

 function addEvent(ele,event,fn){
            if(ele.addEventListener){    //现代浏览器
                ele.addEventListener(event,fn);
            }else{
                ele.attachEvent("on"+event,fn);
            }
        }