0023 js的 原生绑定事件-for循环

目录

1.静态 标签绑定函数 事件

触发事件执行的 js函数时，把标签的对象当成实参传入函数内,关键字是this，在js中调用对象的属性获取到标签的文本信息
this默认是一个windows，
只有在标签内使用，才实例化成当前标签对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--// 绑定事件 标签绑定 js函数 -->

<div class="c1" onclick="foo(this)" >ABC</div> 
<!--标签绑定函数，要把this作为参数传入到函数内部去，把标签本身作为document对象传入到函数内。-->

<script>

function foo(self) {

    console.log(self.innerHTML);
}
</script>


</body>
</html>

2、document对象绑定事件

1  js代码中 绑定标签的两种方式，
通过js document查找标签，cs语法查找标签，找到固定的标签的名字，使用innerHTML属性获取到标签的文本信息，此方法麻烦


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div class="c1" id = 'd1'>ABC</div>

<script>
var  ele = document.getElementById('d1')
ele.onclick = function () {
        console.log(this.innerHTML)
    	// 以点击触发的标签作为使用关键字 this 替代
    }

</script>
</body>
</html>

3、数组绑定对象

3 1，2两种都是对单个或者少量标签绑定事件，对某个父级标签下全部标签绑定时间，在js代码中查找标签获取数组，使用for 循环出数组索引，变量名加索引值相当于函数名等于匿名函数代码，

在代码内  标签对象不使用变量名加索引的替代，而是使用this代表当前标签的对象，当for循环开始i索引所代表的标签名直接赋值给this，
并存储起来，标签被触发，直接运行该标签的js代码事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul>

    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>


<script>

    var aa = document.querySelectorAll('ul li')

    for (var  i = 0; i < aa.length; i++) {
         aa[i].onclick =function () {
             console.log(this.innerHTML)
			// 循环的值，不等于触发的值， 
            // i 等于被点击的标签的索引时，才会被触发，标签对象传入到函数内。

         }
    }
</script>

</body>
</html>

image-20230314121913003

posted @ 2023-03-14 12:25  mmszxc  阅读(100)  评论(0)    收藏  举报