事件的绑定

事件的绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var btn01=document.getElementById("btn01");
				/*
				使用对象.事件=函数 的形式绑定响应函数
				她只能同时为一个元素的一个事件绑定一个响应事件
				*/
				// btn01.onclick=function(){
				// 	alert("123");
				// }
				// addEventListener();  通过这个方法  也可以为元素绑定事件
				/*
				  参数
				     1.事件的字符串,不要on
					 2.回掉函数,当事件触发时该函数会被调用
					 3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
					 
				*/
			   // btn01.addEventListener("click",function(){alert(1);},false);
			   // btn01.addEventListener("click",function(){alert(2);},false);
			   
			   /*
			   attachEcent()
			     - 在IE8中可以使用attachEvent()来绑定事件
				 - 参数
				   1.事件的字符串,要on
				   2.回调函数
				   
				   可以同时为一个事件绑定多个处理函数
				      不同的是他是后绑定先执行,执行顺序和addEventListener()相反
			   */
			  bind(btn01,"click",function(){
				  alert(this);
			  })
			}
			// 定义一个函数,用来为指定元素绑定响应函数?
			// addEventListener()中的this,是绑定事件的对象?
			// attachEvent()中的this,是window
			/*
			   参数
			     obj  要绑定事件的字符串
				 eventStr 事件的字符串
				 callback  回调函数
			*/
			function bind(obj,eventStr,callback){
				if(obj.addEventListener){
					// 大部分浏览器兼容的方式
					obj.addEventListener(eventStr,callback,false);
				}else{
					/*
					this是谁由调用方式决定的
					callbank.call(obj)
					*/
					// IE8及以下
					obj.attachEvent("on"+eventStr,function(){
						// 在匿名函数中调用回掉函数
						callback.call(obj);
					});
				}
				
				
				
			}
		</script>
	</head>
	<body>
		<button type="button" id="btn01">btn01</button>
	</body>
</html>

原文地址:https://www.cnblogs.com/SSPOFA/p/12057018.html