dom2

事件冒泡:即事件最开始由最具体的元素接受然后逐级向上传播至最不具体的那个节点(比较主要)
事件捕获:不太具体的事件更早接收到事件,最具体的节点最后接收到事件

html事件的缺点:html和js紧密的耦合在一起

dom0级事件处理程序:document.getElementById('btn').onclick=function(){};

dom2级事件处理程序 :  addeventlistener()
btn.addEventListener('click',showmes,false)       false指添加到事件冒泡,兼容大部分浏览器


ie8及更早的版本只支持事件冒泡


ie只支持attachEvent();

根据浏览器判断添加事件的方法

var eventUtil={
     //添加句柄
     addHandler:function(element,type,handler){
          if(element.addEventListener)
               element.addEventListener(type,handler,false);
          else if(element.attachEvent)
               element.attachEvent('on'+type,handler);
          else
               element['on'+type]=handler;
               //element.onclick===element['onclick'];
     },
     
     //删除句柄
     removeHandler:function(element,type,handler){
          if(element.removeEventListener)
               element.removeEventListener(type,handler,false);
          else if(element.detachEvent)
               element.detachEvent('on'+type,handler);
          else
               element['on'+type]=null;
     },
     
     getEvent:function(event){
          return event?event:window.event;
     },
     preventDefault:function(event){
          if(event.preventDefault){
               event.preventDefault();
          }else{
              event.returnValue=false; 
          }
     }
}



事件对象:在触发DOM上的事件都会产生一个对象
事件对象event
dom里的事件对象:
1.type属性
2.target 属性
3。//阻止事件冒泡(阻止事件传播)
event.stopPropagation();

4.//阻止事件的默认行为
event.preventDefault();

你可能感兴趣的:(JavaScript,dom)