事件（event）

一、事件：

事件是可以触发代码执行的动作。

二、鼠标经过和鼠标离开：

1、鼠标经过：onmouseover
2、鼠标离开：onmouseout
例3：在页面中有一个图片，当鼠标经过时图片的外边框发生颜色变化，当鼠标离开时图片
的外边框颜色恢复。

<div id="box" onmouseover="abc()" onmouseout="xyz()"></div>

当鼠标经过#box元素时，执行abc()函数。
当鼠标离开#box元素时，执行xyz()函数。

为元素绑定事件，可以在js代码中使用下列格式：

元素节点.onmouseover=function(){
      //事件代码
}

例：

box.onmouseover=function(){
    this.style.borderColor=”#ff5857”;
}

this的含义：指事件绑定的对象，也就是事件的受体。

三、获得焦点事件和释放焦点事件：

1、获得焦点：文本框获得鼠标在其中闪烁的光标。
释放焦点：闪烁的光标从文本框中消失。
2、获得焦点：onfocus
释放焦点：onblur

四、总结事件：

1、onclick，当单击时触发。
2、oninput，当表单元素的内容发生变化时触发。
3、onmouseover，当鼠标经过时触发。
4、onmouseout，当鼠标离开时触发。
5、onfocus，当获得鼠标焦点时触发。
6、onblur，当释放鼠标焦点时触发。

多对象统一绑定事件

1、从HTML文档中查找到的含有多个元素节点的对象不能绑定事件。
2、方法1：利用循环遍历含有多个元素节点的对象，在循环体中为单独的对象绑定事件。

 var nodes=document.getElementsByClassName(“tp”);
   for(var i=0;i<nodes.length;i++){
     nodes[i].onmouseover=function(){
        //事件代码
	}
}

3、方法2：将事件绑定在多对象的父元素上。
当事件绑定在父元素上时，真正触发事件的对象不一定是父元素。
真正触发事件的对象：event.target
真正触发事件的对象的标记名称（大写）：event.target.tagName
真正触发事件的对象的标记名称（小写）：event.target.tagName.toLowerCase()
真正触发事件的对象的类名：event.target.className

box.onmouseover=function(event){
     if(event.target.tagName.toLowerCase()==”li”){
        event.target.style.borderColor=”#ff5857”;
	}
}