Enlace de eventos DOM

1. Vinculación de eventos

1.1box.onclick = function () {};

Solo se puede atar uno, la parte trasera cubrirá el frente

1.2addEventListener ()

addEventListener()
			 * 	- 通过这个方法也可以为元素绑定响应函数
			 *  - 参数:
			 * 		1.事件的字符串,不要on
			 * 		2.回调函数,当事件触发时该函数会被调用
			 * 		3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
			 * 
			 * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,
			 * 	这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
			 * 
			 * 这个方法不支持IE8及以下的浏览器

1.3attachEvent ()

			 * * attachEvent()
			 * 	-IE8中可以使用attachEvent()来绑定事件
			 *  - 参数:
			 * 		1.事件的字符串,要on
			 * 		2.回调函数
			 * 
			 *  - 这个方法也可以同时为一个事件绑定多个处理函数,
			 * 		不同的是它是后绑定先执行,执行顺序和addEventListener()相反

2. Escriba una plantilla de función vinculante con buena compatibilidad


			 * 参数:
			 * 	obj 要绑定事件的对象
			 * 	eventStr 事件的字符串(不要on)
			 *  callback 回调函数
			 *
			function bind(obj, eventStr, callback){
    
    
				eventStra = "on"+eventStr;
				if (obj.addEventListener){
    
    
					return obj.addEventListener(eventStr, callback, false);
				} else{
    
    
					//ie8:用浏览器调的话,this对象是window,所以传一个匿名函数,这样由函数来调,我们想怎么操作就怎么操作。
					return obj.attachEvent(eventStra,function(){
    
    
						call.call(obj);
					});
				}
			}
//定义一个函数,用来为指定元素绑定响应函数
			/*
			 * addEventListener()中的this,是绑定事件的对象
			 * attachEvent()中的this,是window
			 *  需要统一两个方法this
			 */

3. Código

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" id="btn01">按钮</button>
		<script type="text/javascript">
			var btn01 = document.getElementById("btn01");
			/*
			 * 使用 对象.事件 = 函数 的形式绑定响应函数,
			 * 	它只能同时为一个元素的一个事件绑定一个响应函数,
			 * 	不能绑定多个,如果绑定了多个,则后边会覆盖掉前边的
			 *  如:btn.onclick = function(){
				 ---------------------;
			 };
			 *
			 */
			/*
			 * 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(){
    
    
			// 	//------------;
			// });
			
			
			//定义一个函数,用来为指定元素绑定响应函数
			/*
			 * addEventListener()中的this,是绑定事件的对象
			 * attachEvent()中的this,是window
			 *  需要统一两个方法this
			 */
			/*
			 * 参数:
			 * 	obj 要绑定事件的对象
			 * 	eventStr 事件的字符串(不要on)
			 *  callback 回调函数
			 */
			function bind(obj, eventStr, callback){
    
    
				eventStra = "on"+eventStr;
				if (obj.addEventListener){
    
    
					return obj.addEventListener(eventStr, callback, false);
				} else{
    
    
					//ie8:用浏览器调的话,this对象是window,所以传一个匿名函数,这样由函数来调,我们想怎么操作就怎么操作。
					return obj.attachEvent(eventStra,function(){
    
    
						call.call(obj);
					});
				}
			}
			bind(btn01,"click",function(){
    
    
				alert("我是bind绑定函数");
			});
			
		</script>
	</body>
</html>

Supongo que te gusta

Origin blog.csdn.net/weixin_44154094/article/details/113042596
Recomendado
Clasificación