最近练习了关于事件的代码,所以就说说js的事件吧。
一、什么是事件?
JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来理的。
比如页面载入完成时, 会触发一个事件。再比如用户点击按钮时,点击也是一个事件。
常用的事件有:
PC端上常用的事件:
click 鼠标点击
mousedown 鼠标按下
mouseup 鼠标弹起
mousemove 鼠标移动
mouseout 鼠标离开
change文本域的内容被改变
dblclick 鼠标双击
focus 获得焦点
load 加载完成
二、怎样将事情处理程序绑定到特定的事件中?
方法1: 使用HTML标记创建事件处理程序
例:给图片添加点击事件 <img src=“01.jpg” onclick="alert(this.src);"/>
方法2:addEventListener() 方法用于向指定元素添加事件句柄
语法: object.addEventListener(EventName,eventHandler);
例:给document对象添加点击事件 document.addEventListener("click",function(){ alert("你干嘛点我!"); })
方法3:在js代码中获取对象,然后设置对应对象事件的匿名函数
例:var a=document.getElementById(‘a‘);
a.onclick=function() {
alert(‘hello world‘);
}
此外,利用for循环可以把事件都附加上一组元素当中
例:var lis=document.getElementsByTagName(‘li‘);
for(var i = 0; i < lis.length; i++){
lis[i].onclick= function() {
alert(lis[i]);
}
}
等等,怎么弹出来的结果跟想象中的不一样?
这是因为当你点击li,触发事件中的for已经循环完毕了,i==lis.length,所以lis[i]的结果不正确。
应当改为:var lis=document.getElementsByTagName(‘li‘);
for(var i = 0; i < lis.length; i++){
lis[i].onclick= function() {
alert(this);
}
}
this的意思是使用这个函数的对象。