事件流
事件流所描述的就是从页面中接受事件的顺序。
当某个事件执行时,从子元素向父元素触发或从父元素向子元素触发称为事件流
事件流的两种模式:
事件冒泡:子元素向父元素触发.
概念;当某事件触发时,同样的事件会向父元素触发,即事件冒泡.不是所有事件都会产生冒泡问题.
阻止冒泡:
现代浏览器::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); } }