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);
})
移除事件
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 = false; 6 7 //用于取消事件的默认行为 8 var preventDefault = function(event){ 9 (event.preventDefault) ? event.preventDefault() : event.returnValue = false; 10 }
比如取消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 }
取消事件(中断事件冒泡)
//w3c
event.stopPropagation();
//ie
event.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) });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。