事件高级导读

1、注册事件

onclick：传统注册事件方式 唯一性（同一个元素同一个事件只能处理一个函数）

addEventListener（）：方法监听注册方式。同一元素同一事件可以注册多个监听事件 ，按照顺序依次执行（推荐使用）

第一个参数是事件的类型（比如 "click" 或 "mousedown"）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

addEventListener((type,listener,[,usecapture]）；

eg:
btns[1].addEventListener('click',function() {
alert(11);
});

2、删除事件（解绑事件）

传统注册方式：evenTarget.οnclick=null;

方法监听注册方式：eventTarget.removeEvenListener(type,listener,[,usecapture]);

div[1].addEventListener("click",fn);//里面的fn不需要调用加小括号
function fn() {
alert(22);
divs[1].removeEventListener("click",fn);
}

3、DOM事件流

addEventListener((type,listener,[,usecapture]）； 第三个参数如果是true，表示事件捕获阶段调用事件处理程序，如果是false或不写，表示事件冒泡阶段调用事件处理程序。

 

 4、事件对象

注册事件里面函数的形参

 

事件常见对象和属性

 this和target区别：

 阻止默认行为：

5、 阻止事件冒泡：

6、事件委托（代理、委派）

原理：不是给每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，让后利用冒泡原理影响设置每个字节点。

作用：只操作一次DOM，提高了程序性能

eg：

 7、常用鼠标事件

禁止选中文字和禁止右键菜单：

 获取鼠标在页面上的坐标：

鼠标事件类型

事件类型	说明
click	单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件
dblclick	双击鼠标左键时发生，如果右键也按下则不会发生
mousedown	单击任意一个鼠标按钮时发生
mouseout	鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover	鼠标指针移出某个元素到另一个元素上时发生
mouseup	松开任意一个鼠标按钮时发生
mousemove	鼠标在某个元素上时持续发生

 eg：

 8、常用的键盘事件

 eg：