首页 > 代码库 > JavaScript中常用的事件

JavaScript中常用的事件

2024-10-24 21:16:39   208人阅读

转自：http://www.cnblogs.com/dtdxrk/p/3551454.html
作者：文刀日月
JavaScript中常用的事件

事件委托

可以给元素添加多个事件

var addHandler = function(element,type,handler){    if(element.addEventListener){        element.addEventListener(type,handler,false);  //false表示冒泡阶段    }else if(element.attachEvent){        element.attachEvent("on" + type,handler);    }}

这里还有个性能优化的小技巧，比如页面有9999个li添加点击事件。

<ul>    <li></li>    <li></li>    <li></li>    ....9999个li</ul>

如果我们便利一遍li再分别添加onclick事件，需要9999个onclick会消耗很多内存。

有个非常好的方法就是给ul添加事件委托，根据event.target在给点击的li添加事件

addHandler(ul,"click",function(event){   var event =  event|| window.event,         target = event.target || event.srcElement;     alert(target.innerHTML);})

移除事件

一直没用过移除事件，对于用不到的事件ff chrome都能很好的释放掉内存。但是后来看了一些关于ie内存泄漏的文章，发现这个事件还是非常有用的。

var 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;    }}

 

event.target event.srcElement

获取dom元素 

target w3c

srcElement ie

var getTarget = function(event){        return event.target || event.srcElement;}

取消事件的默认行为

 1 //w3c 2 event.preventDefault(); 3  4 //ie 5 event.returnValue = http://www.mamicode.com/false;>

比如取消a链接的行为，点击将不会生效。

1 <a href="http://www.baidu.com" id="link">www.baidu.com</a>2 3 document.getElementById("link").onclick = function(){4     preventDefault(event);5 }

取消事件(中断事件冒泡)

//w3cevent.stopPropagation();//ieevent.cancelBubble = true;var stopPropagation = function(event){        (event.stopPropagation) ? event.stopPropagation() : event.cancelBubble = true;}

 

<ul id="test" onclick="a(this)">    <li id="first" onclick="a(this)">这是第一条</li>    <li>这是第二条</li>    <li>这是第三条</li></ul>function a(obj){    alert(obj.innerHTML);}// 阻止first冒泡 点击first #test的事件不会触发addHandler(document.getElementById("first"),"click",function(){    stopPropagation(event);});addHandler(document.getElementById("test"),"click",function(){    alert(2)});

JavaScript中常用的事件


联系
我们