写个javascript的事件委托

最新推荐文章于 2024-02-28 10:26:11 发布

ddback

最新推荐文章于 2024-02-28 10:26:11 发布

阅读量670

点赞数

分类专栏： javascirpt/css 文章标签： javascript class function firefox border float

本文链接：https://blog.csdn.net/ddback/article/details/6626235

版权

javascirpt/css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

javascript的事件代理核心就是依靠事件的冒泡机制去寻找触发事件，适合运用在需要大量加载触发事件的场合，如大型表格中的触发事件，不必为每一个<td>都去添加触发事件，只需给table添加即可。

自己写了个代码，留个记录。

Firefox和IE9测试通过

<!DOCTYPE HTML>
<html>
<head>
	<title>test de</title>
	<script type="text/javascript">
	
       /*事件添加与移除*/
	var eventHandler = {
	    addHandler : function(element, type, handler){
		   if (window.addEventListener){//fireFox
		      element.addEventListener(type, handler, false);
		   }else if (window.attachEvent){//IE
		      element.attachEvent("on" + type, handler);
		   }else {//else
		      element["on" + type] = handler;
		   }
		},
		
		removeHandler : function(element, type, handler){
		   if(window.removeEventListener){
		       element.removeEventListener(type, handler, false);
		   }else if (window.detachEvent){
		       element.detachEvent("on" + type, handler);
		   }else {
		       element["on" + type] = "" || null;
		   }
		}
	}
	
	
    window.onload = function(){
		var gate1 = document.getElementById("gate1");
                  eventHandler.addHandler(gate1, "click", show);//事件代理，只需添加一次
		
		var gate2 = document.getElementById("gate2");
		var gate2_ch = gate2.firstElementChild;
		var oLi = gate2_ch.children;
		for (var i = 0; i < oLi.length; i ++){//没有代理循环添加事件
		    eventHandler.addHandler(oLi[i], "click", show);		
		}
	}
	
	function show(event){
		var startTime = new Date();
		var target = event ? event.target : window.event.srcElement;
		if (target.tagName.toLowerCase() != 'ul') {
			alert(target.innerHTML);//打印出内容
		}
	}
	</script>
	<style type="text/css">
	      ul {
	            margin: 0px;
		    padding: 0px;
		    width: 500px;
	      }	
		
	     .div-style {
		    float: left;
		    width: 400px;
	     }

	    .change{
		     list-style-type: none;
		     width: 320px;
		     line-height: 30px;
		     height: 30px;  
		     margin: 2px;
		     background: #7FD4FF;
		     border: 1px solid #557FFF;
		     text-align: center;
	     }
	
	</style>
</head>
<body>
	<div class="div-style" id="gate1">
		<ul>
			  <li class="change">change1</li>
			  <li class="change">change2</li>
			  <li class="change">change3</li>
			  <li class="change">change4</li>
			  <li class="change">change5</li>
			  <li class="change">change6</li>
			  <li class="change">change7</li>
			  <li class="change">change8</li>
			  <li class="change">change9</li>
			  <li class="change">change10</li>
			  <li class="change">change11</li>
			  <li class="change">change12</li>
			  <li class="change">change13</li>
			  <li class="change">change14</li>
			  <li class="change">change15</li>
			  <li class="change">change16</li>
			  <li class="change">change17</li>
			  <li class="change">change18</li>
			  <li class="change">change19</li>
			  <li class="change">change20</li>
			  <li class="change">change21</li>
			  <li class="change">change22</li>
	    </ul>
	</div>
	
	<div class="div-style" id="gate2">
	   <ul>
			<li class="change">ichange1</li>
			<li class="change">ichange2</li>
			<li class="change">ichange3</li>
			<li class="change">ichange4</li>
			<li class="change">ichange5</li>
			<li class="change">ichange6</li>
			<li class="change">ichange7</li>
			<li class="change">ichange8</li>
			<li class="change">ichange9</li>
			<li class="change">ichange10</li>
			<li class="change">ichange11</li>
			<li class="change">ichange12</li>
			<li class="change">ichange13</li>
			<li class="change">ichange14</li>
			<li class="change">ichange15</li>
			<li class="change">ichange16</li>
			<li class="change">ichange17</li>
			<li class="change">ichange18</li>
			<li class="change">ichange19</li>
			<li class="change">ichange20</li>
			<li class="change">ichange21</li>
			<li class="change">ichange22</li>
	   </ul>
	</div>
</body>
</html>

ddback

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
写个javascript的事件委托

javascript的事件代理核心就是依靠事件的冒泡机制去寻找触发事件，适合运用在需要大量加载触发事件的场合，如大型表格中的触发事件，不必为每一个都去添加触发事件，只需给table添加即可。自己写了个代码，留个记录。Firefox和IE9测试通过 test de /*事件添加与移除*/ var eventHandler = { add
复制链接

扫一扫

专栏目录