JS中的事件绑定

偏执的太偏执、 2023-01-21 09:23 9阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			
    			window.onload = function(){ 
    				
    				/* * 点击按钮以后弹出一个内容 */
    				//获取按钮对象
    				var btn01 = document.getElementById("btn01");
    				
    				/* * 使用 对象.事件 = 函数 的形式绑定响应函数， * 它只能同时为一个元素的一个事件绑定一个响应函数， * 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的 */
    				
    				//为btn01绑定一个单击响应函数
    				/*btn01.onclick = function(){ alert(1); };*/
    				
    				//为btn01绑定第二个响应函数
    				/*btn01.onclick = function(){ alert(2); };*/
    				
    				/* * addEventListener() * - 通过这个方法也可以为元素绑定响应函数 * - 参数： * 1.事件的字符串，不要on * 2.回调函数，当事件触发时该函数会被调用 * 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false * * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数， * 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行 * * 这个方法不支持IE8及以下的浏览器 */
    				/*btn01.addEventListener("click",function(){ alert(1); },false); btn01.addEventListener("click",function(){ alert(2); },false); btn01.addEventListener("click",function(){ alert(3); },false);*/
    				
    				/* * attachEvent() * - 在IE8中可以使用attachEvent()来绑定事件 * - 参数： * 1.事件的字符串，要on * 2.回调函数 * * - 这个方法也可以同时为一个事件绑定多个处理函数， * 不同的是它是后绑定先执行，执行顺序和addEventListener()相反 */
    				/*btn01.attachEvent("onclick",function(){ alert(1); }); btn01.attachEvent("onclick",function(){ alert(2); }); btn01.attachEvent("onclick",function(){ alert(3); });*/
    				
    				/*btn01.addEventListener("click",function(){ alert(this); },false);*/
    				
    				/*btn01.attachEvent("onclick",function(){ alert(this); });*/
    				
    				bind(btn01 , "click" , function(){ 
    					alert(this);
    				});
    			
    				
    			};
    			
    			//定义一个函数，用来为指定元素绑定响应函数
    			/* * addEventListener()中的this，是绑定事件的对象 * attachEvent()中的this，是window * 需要统一两个方法this */
    			/* * 参数： * obj 要绑定事件的对象 * eventStr 事件的字符串(不要on) * callback 回调函数 */
    			function bind(obj , eventStr , callback){ 
    				if(obj.addEventListener){ 
    					//大部分浏览器兼容的方式
    					obj.addEventListener(eventStr , callback , false);
    				}else{ 
    					/* * this是谁由调用方式决定 * callback.call(obj) */
    					//IE8及以下
    					obj.attachEvent("on"+eventStr , function(){ 
    						//在匿名函数中调用回调函数
    						callback.call(obj);
    					});
    				}
    			}
    			
    		</script>
    	</head>
    	<body>
    		
    		<button id="btn01">点我一下</button>
    	</body>
    </html>