js事件Js中的for循环和事件的关系this

Posted 2021-01-16 web会子

一、js事件 

1、事件

　　用户在网页中所触发的行为

　　鼠标滑动种类很多，键盘、表单特列；

　　点击：onclick

　　鼠标进入：onmouseenter　　　　　　　　鼠标离开：onmouseleave

　　鼠标悬浮：onmouseover　　　　　　　　 鼠标移除：onmouseout

　　鼠标按下：onmousedown　　　　　　　　鼠标抬起：onmouseup

　　鼠标移动：onmousemove

　　表单聚焦：onfocus　　　　　　　　　　　表单失去焦点：onblur

　　浏览器加载完成：onload

　　js事件是一直存在的，可以绑定方法，也可以不绑定，如果没有绑定，事件都会发生，只是这个事件什么都没有，可以给相应的元素绑定事件和方法

　　div . onclick=fiunction（）{ }　点击div时就触发了函数中的代码块

2、事件对象

　　一个事件触发获得的所有信息都在事件对象中保存着

3、事件源　　event . target

　　鼠标点在谁的身上，谁就是事件源

4、事件的使用方法

　　（1）、事件 将事件当做标签属性使用

　　　　　eg：<img src="img/01.jpg"     alt="  "     onclick=alert(456)>

　　（2）、通过事件绑定 将事件当成一个元素的属性

　　　　　eg：pic [0] . onclick=function() {

　　　　　　　　　　　　alert(456)

　　　　　　　　　　　　 }

二、Js中的for循环和事件的关系

　　　　事件的执行和for循环没有关系，都是相互独立的。

　　1、解决事件中的i和for匹配

　　　　方法一：给事件套一个自调用函数

　　　　　　　　for （var i=0；i<arr.length;i++）{

　　　　　　　　　　(finction (i) {

　　　　　　　　　　　　　　lis [ i ] .onlick=function ( ) {

　　　　　　　　　　　　　　　　　　tupian.src=arr [ i ]  

　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　})

　　　　　　　　　　　　}

　　　　方法二：人为定义属性，将索引在属性里需要的时候，调用属性（用this）

　　　　　　　　　for （var i=0；i<arr.length; i++）{

　　　　　　　　　　　　lis[ i ].index=i;

　　　　　　　　　　　　lis [ i ].onclick=function () {

　　　　　　　　　　　　　　　　tupian.src=arr [ this.index ]

　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　}

三、this

　　　　This 是js的一个关键字，他是一个对象，一般用在函数里用于指向函数内部的关系。

　　　　Div.onclick=function(){this}

　　　　如果函数在定义的时候前面有.，那么this就指向点前面的对象。

　　　　fn()

　　　　如果函数定义时没有. 那么this就是window