Event事件

 

1.事件驱动的三要素：

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

*事件：被JavaScript 监测到的行为。

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

 

2.事件的分类：

click  标点击操作
dblclick  标双击操作
mousedown 按下标按键
mouseup 抬起  标按键
mousemove   标指针在元素上⽅移动
mouseover   标指针进⼊元素
mouseout   标指针移出元素
键盘事件
keydown 按下键盘按键
keyup 抬起键盘按键
keypress 按下或按住键盘按键
表单事件
focus input 获得焦点
blur input 失去焦点
change 更改 input 元素的内容

 

2.事件绑定：

HTML标签的事件属性：

HTML 标签的事件属性：这种样式 HTML 代码和 JavaScript 逻辑不能很好地分离。
DOM 标准的事件：这种样式只能为指定的一个标签绑定一个事件，并且只能具有一个事件处理函数

事件监听器：
即把事件作为 HTML 标签的属性直接绑定在 HTML 标签身上，属于 DOM 0 级事件。
事件绑定

HTML 标签的事件属性
eventName ：为元素指定具体的事件名称；
functionName ：绑定事件的处理函数；
boolean ：布尔值。设置事件是捕获阶段还是冒泡阶段。默认值为 false ，为冒泡阶段；

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

<input type="button" id="btn" value="点击"/>
btn.addEventListener('click', function(){
console.log( '' );
}, false);

 创建事件句柄
function handle(){
console.log( '' );
}
 绑定事件
btn.addEventListener('click', handle, false);
 删除事件
btn.removeEventListener('click', handle, false);

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