事件

事件三要素

• 事件源（谁）：触发事件的元素
• 事件类型（什么事件）： 例如 click 点击事件
• 事件处理程序（做什么）：事件触发后要执行的代码(函数形式)，事件处理函数

执行事件的步骤

• 获取事件源
• 注册事件
• 添加事件处理程序

注册事件

传统注册方式

button.onclick = function(){}

同一个元素同一个事件只能设置一个处理函数，后注册的会覆盖先注册的

监听注册方式

button.addEventListener('click',function(e){})

addEventListener 还有第三个参数，提供了更多选项：

• once：只执行一次。
• passive：承诺此事件监听不会调用preventDefault，这有助于性能。
• useCapture：是否捕获（否则冒泡）。

同一个元素可以注册多个处理函数，按注册顺序依次执行

删除事件

// 传统方式button.onclick = null;button.removeEventListener('click',fn);

DOM事件流

• 事件冒泡：事件开始时有最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
• 事件捕获：由DOM最顶层节点开始，然后主机向下传播到最具体的元素接收的过程

DOM 事件流会经历3个阶段：

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

addEventListener的第三个参数如果是true表示在事件捕获阶段调用事件处理函数，反之则是在事件冒泡阶段调用

事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象

在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找

常见属性和方法

t通常情况下terget 和 this是一致的

但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），

这时候this指向的是父元素，因为它是绑定事件的元素对象，而target指向的是子元素，因为他是触发事件的那个具体元素对象。

阻止默认行为

a.onclick = function(e) {    // 普通浏览器 e.preventDefault();  方法    e.preventDefault();    // 低版本浏览器 ie678  returnValue  属性    e.returnValue = false;    // 我们可以利用return false 也能阻止默认行为 没有兼容性问题    return false;}

阻止冒泡

// 阻止事件继续向上传递给父组件son.addEventListener('click', function(e) {    alert('son');    e.stopPropagation(); // stop 停止  Propagation 传播    window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡}, false);

事件委托

给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素

• 我们只操作了一次 DOM ，提高了程序的性能。
• 动态新创建的子元素，也拥有事件。

常见事件

鼠标事件

鼠标事件对象

键盘事件

键盘事件对象

• keyCode：返回该键的ASCII值

mouseenter 和mouseover的区别

当鼠标移动到元素上时就会触发mouseenter 事件，- mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发，之所以这样，就是因为mouseenter不会冒泡，跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

触屏事件

移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有

常见的触屏事件

触摸事件对象（TouchEvent）

click 延时解决方案

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面

1. 禁用缩放

<meta name="viewport" content="user-scalable=no">

2. 利用touch事件封装事件解决300ms 延迟

• 当我们手指触摸屏幕，记录当前触摸时间
• 当我们手指离开屏幕， 用离开的时间减去触摸的时间
• 如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击

3. fastclick 插件

if ('addEventListener' in document) {	document.addEventListener('DOMContentLoaded', function() {		FastClick.attach(document.body);	}, false);}

自定义事件

var evt = new Event("look", {"bubbles":true, "cancelable":false});document.dispatchEvent(evt);

当自己封装组件时，自定义事件可以帮助进行解耦