Event 事件 - 基础

事件驱动三要素

事件源：即触发事件的元素

事件：被JavaScript检测到的行为。例如：

　　　鼠标点击

　　　键盘按键

　　　选输入框

事件处理函数：事件发生时要进行的操作，又叫做“事件句柄”或“事件监听器”

 

事件分类：

鼠标事件：    click 　　　　鼠标点击操作

　　　　　 　dblclick　　   鼠标双击操作

　　　　　　mousedown    按下鼠标按键

　　　　　　mousemove　鼠标指针在元素上方移动

　　　　　　mouseover     鼠标指针进入元素

　　　　　　mouseout·　  鼠标指针移出元素

键盘事件：　keydown　　  按下键盘按键

　　　　　　keyup　　      抬起键盘按键

　　　　　　keypress        按下或按住键盘按键

表单事件：   focus              input获得焦点

　　　　　　blur 　　　　 input失去焦点

　　　　　　change 　　  更改input元素的内容

页面事件：   load　　　　  页面加载完成

 

事件绑定

HTML标签的事件属性

<input type = "button" id = "btn" value = "点击" ouclick = "test()"/>

 function(){ 2 //.... 3 } 

DOM标准的事件

通过on加事件类型的方式去绑定事件，也属于DOM 0 级事件，例：

<input type="button" id = "btn" value= "点击"/>
 
//方式一：
btn.onclick = function(){
       //...
}


//方式二：
function test(){
      //...  
}
btn.onclick = test;

事件监听器

DOM提供了事件监听器，可以同时绑定或删除多个事件，并且具有多个事件处理函数。属于DOM 2级事件

绑定：

 事件源.addEventListener(eventName, functionName, boolean); 

删除：

 事件源.removeEventListener(eventName, functionName, boolean); 

参数说明：

eventName:为元素指定具体的事件名称（例如单击事件是click等）；

functionName: 绑定事件的处理函数；

boolean:布尔值，默认为false。

绑定：

<input type ="button" id = "btn" value = "点击"/>

btn.addEventListener('click'.function(){
      console.log('xxxxx');
},false);

删除：

function handle(){
        console.log('xxx');
}
//绑定事件
btn.addEventListener("click",handle,false);
//删除事件
btn.removeEventListener("click",handle,false);    

addEventListener() 方法还可以为指定一个元素绑定一个事件同时具有多个处理函数。如下代码示例:

btn.addEventListener('click'.function(){
      console.log('第一次执行');
},false);
btn.addEventListener('click'.function(){
      console.log('第二次执行');
},false);