1、html事件处理程序
<button id="btn1" onclick="alert(1);">按钮1</button>
2、dom0级事件处理程序
<button id="btn2">按钮2</button> document.getElementById("btn2").onclick=function(){alert(2);}; document.getElementById("btn2").onclick=null; //取消事件
3、dom2级事件处理程序 优点支持多个事件绑定
<button id="btn3">按钮3</button> <script type="text/javascript"> function btn3(){ alert(3); } document.getElementById('btn3').addEventListener('click','btn3',false); document.getElementById('btn3').removeEventListener('click','btn3',false); //移除事件 document.getElementById('btn3').addEventListener('click',function(){alert(33);}); //可以添加多个事件绑定
兼容性问题:chrome支持addEventListener,ie支持attachEvent
<button id="btn3">按钮3</button> <script type="text/javascript"> function btn3(){ alert(3); } document.getElementById("btn3").attachEvent('onclick',btn3); document.getElementById("btn3").detachEvent('onclick',btn3);
支持chrome和低版本ie的:
<button id="btn3">按钮3</button> <script type="text/javascript"> function btn3(){ alert(3); } var eventUtil = { addHandler:function(element,type,handler){ if(element.addEventListener) { element.addEventListener(type,handler,false); //chrome dom2级 }else if(element.attachEvent) { element.attachEvent('on'+type,handler) //ie dom2级 }else { element['on'+type]=handler; //dom0级 } }, 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; } } } eventUtil.addHandler(document.getElementById("btn3"),'click',btn3); eventUtil.removeHandler(document.getElementById("btn3"),'click',btn3); </script>
事件对象 eventUtil.addHandler(document.getElementById("btn3"),'click',btn3);
function btn3(event){ alert(event.target); //获取事件目标 [object HTMLButtonElement] alert(event.type); //获取事件类型 click }
冒泡机制 :当你点击btn3的时候会调用btn3函数和box函数。事件从button冒泡到div上
<div id="box"> <button id="btn3">按钮3</button> </div> <script type="text/javascript"> function btn3(event){ alert(event.target.nodename); //获取事件目标 button alert(event.type); //获取事件类型 click } function box(){ alert('this is box'); } eventUtil.addHandler(document.getElementById("btn3"),'click',btn3); eventUtil.addHandler(document.getElementById("box"),'click',box);
阻止事件冒泡:通过event.stopPropagation();实现
<div id="box"> <button id="btn3">按钮3</button> </div> <script type="text/javascript"> function btn3(event){ alert(event.target.nodeName); //获取事件目标 [object HTMLButtonElement] event.stopPropagation(); // alert(event.type); //获取事件类型 click } function box(){ alert('this is box'); } eventUtil.addHandler(document.getElementById("btn3"),'click',btn3); eventUtil.addHandler(document.getElementById("box"),'click',box);
阻止事件的默认行为,event.preventDefault();这样点击go,就不会发生跳转了
<a href="http://www.baidu.com" id='go'>go</a> <script> function stopgo(event){ event.stopPropagation(); event.preventDefault(); } eventUtil.addHandler(document.getElementById("go"),'click',stopgo);
兼容性问题封装到evenUtil中
getEvent:function(event) { return event?event:window.event; //window.event ie }, getType:function(event) { return event.type; }, getElement:function(event) { return event.target||event.srcElement; //event.srcElement ie }, preventDefault:function(event) { if(event.preventDefault) { event.preventDefault(); }else{ event.returnValue=false; //ie } }, stopPropagation:function(event) { if(event.stopPropagation) { event.stopPropagation(); }else { event.cancleBubble=true //ie } }
//调用
eventUtil.addHandler(document.getElementById("go"),'click',function(e){
e=eventUtil.getEvent(e); //也可以写成 e=e||window.e
alert(eventUtil.getElement(e));
eventUtil.preventDefault(e);
eventUtil.stopPropagation(e);
});
参考文章: