事件就是用户或浏览器自身执行的某种动作。诸如click、load、和mouseover,都是事件的名字。而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以"on"开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。
以下是跨浏览器的javascript中事件的相关方法
1 //跨浏览器的方法 2 var EventUtil={ 3 /* 4 与addHandler()对应的方法是removeHandler(),他们的职责分别是添加和移除事件处理程序; 5 这两个方法首先都会检测传入的元素中是否存在DOM2级方法(所有DOM节点,IE9+、firefox、safari、chrome、opera都支持),如果存在则使用该方法:传入事件类型、事件处理程序函数和第三个参数false(表示冒泡阶段); 6 如果存在的是IE的方法,则采用第二种方案(IE及opera支持); 7 最后一种方案就是使用DOM0级方法(虽然现在浏览器支持,但应该都不会执行这里的代码,前面两种方案基本够了,且前面两种方案支持在一个元素上添加多个事件处理程序,而最一种方案只能添加一个事件处理程序) 8 */ 9 addHandler:function(element,type,handler){ 10 if(element.addEventListener){ 11 element.addEventListener(type,handler,false); 12 }else if(element.attachEvent){ 13 element.attachEvent("on"+type,handler); 14 }else{ 15 element["on"+type]=handler; 16 } 17 }, 18 removeHandler:function(element,type,handler){ 19 if(element.removeEventListener){ 20 element.removeEventListener(type,handler,false); 21 }else if(element.detachEvent){ 22 element.detachEvent("on"+type,handler); 23 }else{ 24 element["on"+type]=null; 25 } 26 }, 27 //获取事件对象 28 getEvent:function(event){ 29 return event?event:window.event; 30 }, 31 //获取事件的目标 32 getTarget:function(event){ 33 return event.target||event.srcElement; 34 }, 35 //取消事件默认行为 36 preventDefault:function(event){ 37 if(event.preventDefault){ 38 event.preventDefault(); 39 }else{ 40 event.returnValue=false; 41 } 42 }, 43 //阻止事件冒泡 44 stopPropagation:function(event){ 45 if(event.stopPropagation){ 46 event.stopPropagation(); 47 }else{ 48 event.cancelBubble=true; 49 } 50 } 51 }
未完,待续。。。