注册事件（绑定事件）、DOM事件流

注册事件有两种方式:传统方式和方法监听注册方式

传统方式：

特点:注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式：

特点:同一个元素同一个事件可以注册多个监听器
addEventListener()

删除事件

删除事件代码

 <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert(11);
                // 1. 传统方式删除事件
                divs[0].onclick = null;
            }
            // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>

DOM事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
DOM事件流分为3个阶段︰
1.捕获阶段
2.当前目标阶段
3.冒泡阶段

ps：

1.Js 代码中只能执行捕获或者冒泡其中的一个阶段。
2.onclick 和attachEvent只能得到冒泡阶段。
3.addEventListener(type，listener[,usecapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序;如果是false(不写默认就是false )，表示在事件冒泡阶段调用事件处理程序。
4．实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
5．有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
6．事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件。

事件对象

event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;
官方解释:event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解∶事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。
比如:
1.谁绑定了这个事件。
2.鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器(事件处理函数)。

区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁

事件委托的原理

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

常用的鼠标事件

禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

禁止鼠标选中( selectstart开始选中)

鼠标事件对象

常用键盘事件

事件除了使用鼠标触发，还可以使用键盘触发。

注意∶
1.如果使用addEventListener不需要加on
2. onkeypress和前面2个的区别是，它不识别功能键，比如左右箭头，shift等。
3．三个事件的执行顺序是:keydown -- keypress ---keyup

注意:
onkeydown和onkeyup 不区分字母大小写，onkeypress区分字母大小写。
在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键)
Keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCIl值