《JavaScript视频22》事件的绑定

最新推荐文章于 2024-06-26 17:56:14 发布

Han_python

最新推荐文章于 2024-06-26 17:56:14 发布

阅读量77

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Han_python/article/details/113853655

版权

javascript

JavaScript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

事件的绑定

使用 对象.事件 = 函数 的形式绑定响应函数，只能绑定一个响应函数，绑定多个则后面的会覆盖掉前面的。

通过 addEventListener() 方法可以为元素绑定响应函数，使用这种方式可以为相同事件绑定多个响应函数，当事件被触发时，响应函数将会按照函数绑定顺序执行。该种方法需要传入三个参数：

需要传入事件的字符串，不要on，比如click
回调函数，当事件触发时，该函数会被调用
是否在捕获阶段触发事件，需要一个bool值，一般都传false
如果希望在从外往里的捕获阶段时就开始执行，可以将第三个参数改为true

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			window.onload = function(){
				var button1 = document.getElementById("button1");
				// button1.onclick = function(){
				// 	alert("1");
				// };
				button1.addEventListener("click",function(){
					alert(1);
				},false);
				
				button1.addEventListener("click",function(){
					alert(2);
				},false);
			};
		</script>
	</head>
	<body>
		<button id="button1" type="button">按钮</button>
	</body>
</html>

但是IE8不支持addEventListener()这个方法。可以使用attachEvent()来绑定。

attachEvent()需要传入两个参数：

事件字符串，要on
回调函数

button1.attachEvent("onclick",function(){
	alert(1);
});

attachEvent()这个事件不适用IE以外的浏览器。

addEventListener()中的this，是绑定事件的对象
attachEvent()中的this，是window

this是谁，由调用方式决定的，如果this是window，那说明浏览器是使用函数的形式调用的。

如果不希望浏览器直接调用回调函数，我们可以直接传一个匿名函数，然后在匿名函数中调用回调函数。然后我们就可以通过call()方法来指定回调函数的this了。

call()是函数对象的方法，当函数对象调用call()方法时，都会调用函数执行。在调用call()方法时，可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this

为了实现兼容和统一this：

  function bind (obj, eventStr, callback){
   
   if(obj.addEventListener){
	   //常规浏览器
	   obj.addEventListener(eventStr,callback,false);
   }else{
	   //IE8及以下
	   obj.attachEvent("on"+eventStr,function(){
		   //为了this的统一，我们使用了call()方法
		   //浏览器调用function函数，
		   callback.call(obj);
	   });
   }
   
  }
  
  bind(button1,"click",function(){
   alert(this);
  })