Javascript初学篇章_8（事件）

事件

HTML 事件是发生在 HTML 元素上的事情。例如用户点击按钮时，点击也是一个事件。事件可以用于处理表单验证，用户输入，用户行为及浏览器动作，如：

• 页面加载时触发事件
• 页面关闭时触发事件
• 用户点击按钮执行动作
• 验证用户输入内容的合法性

PC端上常用的事件：

事件	说明
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

怎样将事情处理程序绑定到特定的事件中？

方法一：

在标签中添加事件

<button onclick="alert（‘hello world’）">点我</button>

方法二：

在js代码中获取对象，然后设置对象事件的匿名函数

var btn=document.getElementById('btn');
btn.onclick=function() {
  alert('hello world');
}

方法三：

addEventListener() 方法用于向指定元素添加事件句柄

var btn=document.getElementById('btn');
btn.addEventListener("click",function(){
    alert("hello world");
})

给一个按钮添加一个点击事件，固然简单，但如果是N多个呢？这时我们可以使用 for 循环

//获取一系列按钮
var btn=document.getElementsByTagName('button');
for（var  i = 0; i < btn.length; i++）{
     btn[i].onclick= function() {
　　    //代码
　　}
}

以上面的例子，值得一说的是，在 for 循环中你可以用 i 来选择 btn ，但是 for 循环会把所有除事件外所有代码都执行一遍，等到用户进行特定的操作后才会触发事件，而 i 这时候已经变成了 btn.length ,无法调用相应的元素事件，所以要用到 this 或 给元素绑定一个值。例：

var btn=document.getElementsByTagName('button');
for（var  i = 0; i < btn.length; i++）{
     //给元素绑定一个值
    btn[i].index = i;
     btn[i].onclick= function() {
         //使用this 调用自身
　　      this.style.width="100px";
         //用绑定的值调用元素
         btn[this.index].style.width="100px";
　　}
}

this 是的使用时有局限性的，在不同的地方有不同的含义与功能，例如在上面例子的事件中加上一个定时器，这是定时器里的 this 就无法正确的指向我们想要元素与事件，这时，我们可以在定时器外把 this 赋值给一个变量，this有局限性，而这个变量却没有。例：

var btn=document.getElementsByTagName('button');
for（var  i = 0; i < btn.length; i++）{
     btn[i].onclick= function() {
       //将自身复制给一个变量
         var obj = this;
         setInterval(function() {
              obj.style.width = "100px";
        },1000)
　　}
}