绑定响应函数的几种方法

最新推荐文章于 2022-03-02 22:37:07 发布

weixin_45162984

最新推荐文章于 2022-03-02 22:37:07 发布

阅读量266

点赞数

分类专栏：前端js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45162984/article/details/110010669

版权

前端js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            background-color: #fafafa;
            padding: 20px;
        }
    </style>
</head>
<body>
    <ul id="box" onclick="ulClick()">
		<li class="li">我是li</li>
		<li class="li">我是li</li>
		<li class="li">我是li</li>
    </ul >
    <script>
    		var ul = document.getElementById('box');
    		//第一种 使用对象.事件 = 函数 的形式绑定响应函数,却点是只能为一个元素的一个事件绑定一个函数，如果为一个事件绑定多个函数，则会覆盖前边绑定的函数
    		ul.onclick = function(event){
    		}
    		/*第二种，通过addEventListener()方法绑定响应函数
    		*参数：
    		*    1. 事件的字符串  ，不要on
    		* 		2. 回调函数，事件触发时执行的函数，
    		* 		3. 是否在捕获阶段触发事件，是一个布尔值，一般传false,不写默认传false
    		* 优点是可以帮到多个响应函数，响应函数会按照绑定顺序执行
    		* 缺点是不兼容ie8及以下，
    		* this指向的是绑定的对象
    		* /
    	ul.addEventListener('click',function(){},false)
    		/* attachEvent()
    		* 在ie8及以下可以使用attachEvent()来绑定事件
    		* -参数：
    		* 		1. 事件的字符串，要on
    		* 		2. 回调函数
    		* 优点是可以帮到多个响应函数，响应函数会按照绑定顺序的倒序执行
    		* this指向的是window
    		* /
    		ul.attachEvent('onclick',function() {})

			/* 使用自定义函数的方式来绑定
				* -参数；
				* 		1. 需要绑定函数的对象
				* 		2. 事件字符串（不要on），因为添加on比删去on更容易
				* 		3. 回调函数
				* /
			function bind(obj,eventstr,callback) {
				if(obj.addEventListener()){
					obj.addEventListener(eventstr,callback,false)
				}else {
					//此时this指向是window
					obj.attachEvent('on' + eventstr,callback)
					//此时this指向是绑定的对象
					obj.attachEvent('on' + eventstr,function() {
						callback.call(obj);
					})
				}
			}
			bind(ul,'click',function() {});
			/* 在html元素上绑定事件
			* html写法见ul标签
			* 此时的this指向是window，
			* 如果需要拿到绑定绑定对象，可以用传参的方式，例onclick="ulClick(this)",这里的this就是绑定对象
			*/
			function ulClick(_this){
			//_this 是传进来的绑定对象
			}
			
    </script>
</body>
</html>