JS事件委派机制什么是事件？事件是用户与计算机交互的行为，比如：单击按钮，鼠标放上，鼠标移开等等。事件的例子：HT

1. 事件

1.1 什么是事件？

事件是用户与计算机交互的行为，比如：单击按钮，鼠标放上，鼠标移开等等。

事件的例子：HTML事件例子

当用户点击鼠标时
当网页已加载onload(文档加载完毕)
当网页被卸载时onbeforeload(文档即将从浏览器中卸载)
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当HTML表单被提交时
当用户触发按键时

1.2 事件的四要素

事件源：事件发生的源头，就是事件发生的那个标签

事件类型：发生的是什么事件，比如：点击click

事件处理函数：当事件发生时，去调用的函数

事件对象：事件发生时的相关信息都保存到事件对象中

2. 注册事件的三种方式

2.1 在标签上注册事件

2.2 DOM对象注册事件

2.3 W3C标准方法注册事件

W3C提供了标准方法，专用于添加事件，这种方式注册事件功能最强大，很多框架的底层都是使用这种方式注册事件的。

target.addEventListener(type,listener,useCapture);

参数介绍：

target：文档节点、document、Window或XMLHttpRequest
type：字符串、事件名称、不含有“on”，比如“click”、“keydown”、"mouseover"等
listener：实现了EventListener接口或者是JavaScript中的函数
useCapture：是否使用捕捉，true为捕捉，false为冒泡，一般用false

举例：

target.addEventListener('keydown',function(event){
	alert(event.keyCode);
 },false);

W3C标准删除事件

target.removeEventListener(event,function);
// 该方法用来兼容IE和非IE的情况
function addListener(obj,type,fn){
  if(obj.attachEvent){
          obj.attachEvent('on' + type,fn);
  }else{
          obj.addEventListener(type,fn);
   }
}

3. 常用事件

鼠标事件
click	点击事件	点击鼠标左键触发
dblclick	双击事件	双击鼠标左键触发
mouseover	移入事件	鼠标指针移到一个元素上触发
mouseout	移出事件	鼠标指针移出一个元素上触发
mousemove	移动事件	鼠标在一个元素上移动持续触发
mousedown	鼠标按下	单击鼠标任何一个按键触发
mouse	鼠标抬起	松开鼠标任何一个按键触发
键盘事件
keydown	键按下	用户按下一个键盘按键时触发
keyup	键弹起	用户在键盘按键被松开时触发
keypress	按键一次	按下且抬起一个键
表单事件
submit	表单提交	form表单提交时触发
input	输入事件	HTML5新增事件，输入内容时触发
blur	元素失去焦点	失去焦点时触发事件
focus	元素获取焦点
change	改变事件	用户改变表单元素的内容时触发
窗口事件
load	窗口加载	网页所有资源加载完毕时触发
scroll	窗口滚动事件	窗口滚动条滚动时触发

4. 事件机制

事件机制主要分为捕捉和冒泡两种，默认情况下是事件的冒泡机制。

向下是捕获1-2-3-4，向上是冒泡5-6-7-8

事件的捕获和冒泡只能够通过W3C标准方法注册事件的方式来完成

5. 事件委派

事件委派也称事件委托，或者事件代理。是把事件监听放在祖先元素（如父元素、爷爷元素）上。由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件委派，一般用于由用户交互产生的新元素。

<body>
    <ul>
        <li>事件委派</li>
        <li>事件委派</li>
    </ul>
    <script>

    var oUl = document.querySelector('ul');
            oUl = addEventListener('click',function(e){
                e.target.style.color = 'pink';
                // e.target 得到点击的那个对象
            });
    </script>
</body>

6. 事件处理函数返回值

某些事件发生时，浏览器会自动执行默认的动作。阻止浏览器的的默认行为一般用于 <a>标签和 <form>标签，只有这两个标签才会产生跳转行为，其它标签不会有什么行为，也就不需要阻止了。

在标签上注册事件和DOM对象注册事件都可以利用事件处理函数的返回值实现阻止浏览器的默认行为。

例如：当单击删除链接时。

/*
 需求:点击删除按钮，弹出一个提示框，
点击确定时，执行浏览器默认行为，否则就阻止浏览器默认行为
*/
<a href="del.html" onclick="return a()">删除商品</a>
//1. 定义函数
function a(){
    //弹出提示框
    var result = confirm("是否删除数据？");
     //如果选择“取消”，阻止浏览器默认行为
     return result;
}

JS事件委派机制