关于Javascipt基础7

标签：

最近练习了关于事件的代码，所以就说说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的意思是使用这个函数的对象。

关于Javascipt基础7

标签：

原文地址：http://www.cnblogs.com/zhiwudenengliang/p/5863224.html