事件高级 | maimaiのnote

注册事件（绑定事件）
删除事件（绑定事件）
DOM事件流
事件对象
阻止事件冒泡
事件委托（代理、委派）
常用的鼠标事件
常用的键盘事件

# 注册事件概述

给元素添加事件，称为注册事件或者绑定事件

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

# 传统注册方式

利用on开头的时间onclick
<button onclick =""alert("hello")>
btn.onclick = function(){}
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

# 方法监听注册方式

w3c标准推荐方式
addEventListener（）它是一个方法
IE9之前的IE不支持此方法，可使用attachEvent（）代替
特点：同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行

# addEventListener事件监听方式

eventTarget.addEventListener(type,listener[ , useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的时间时，就会执行事件处理函数

该方法接收三个参数：

type：事件类型字符串，比如click 、 mouseover 注意这里不要带on
listner：事件处理函数事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false

# attachEvent 事件监听方式

eventTarget.attachEvent(eventnameWithOn,callback)

eventTarget.attachEvent(）方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行

该方法接收两个参数：

eventNameWithOn：事件类型字符串，比如onclick， onmouseover 这里要带on
callback: 事件处理函数，当目标触发事件时回调函数被调用

# 删除事件方式

# 传统注册方式

eventTarget.onclick = null;

# 方法监听注册方式

eventTarget.removeEventListener(type,listener[,useCaputure]);

eventTarget.detachEvent(eventNameWithOn, callback);

# DOM事件流

事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

DOM事件流分为三个阶段

捕获阶段
当前目标阶段
冒泡阶段

# 注意

js代码中只能执行捕获或者冒泡中的一个阶段
onclick 和 attachEvent 只能得到冒泡阶段
addEventListener（type, listener[,useCapture]）第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认是false），表示在事件冒泡阶段调用事件处理程序
实际开发过程中我们很少用到事件捕获，更关注冒泡
有些事件是没有冒泡的，比如onblur 、onfocus、 cnmouseenter 、 onmouseleave
事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事

# 事件对象

# 什么是事件对象

eventTarget.onclick = function(event){}
eventTarget.addEventListener('click' , function(event){})
//这个event 就是事件对象 通常写成e or  evt

<body>
    <div>137489</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(e){
            e = e || window.event; //兼容性问题
            console.log(e);

            // 1.event就是一个事件对象得到我们监听函数的 小括号里面当形参来看
            // 2.事件对象只有有了事件才会存在，他是系统给我们自动创建的，不需要传递参数
            // 3.事件对象 是 我们事件的一系列相关数据的集合， 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标，如果是键盘事件里面就包含的键盘事件的信息 比如判断用户按下了哪个键
            // 4. 这个事件对象可以自定义 比如event 、evt、e
            // 5.事件对象有兼容性问题ie678 通过window.event 
        }
    </script>
</body>

官方解释： event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对选哪个就是事件对象event，它有很多属性和方法

比如：

谁绑定了这个事件
鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
键盘触发事件的话，会得到键盘的相关信息，如按了哪个键

# 事件对象的使用语法

eventTarget.onclick = function(event){
  //这个event 就是事件对象 通常写成e or  evt
}
eventTarget.addEventListener('click' , function(event){
  //这个event 就是事件对象 通常写成e or  evt
})

这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去
当我们注册事件时，event对象就会被系统自动创建，并依此传递给事件监听器（事件处理程序）

# 事件对象的常见属性和方法

事件对象属性方法	说明
e.target	返回`触发`事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie6-8使用
e.type	返回事件的类型比如click 、 mouseover 、不带on
e.cancelBubble	该属性阻止冒泡非标准 ie6-8使用
e.returnValue	该属性阻止默认事件（默认行为）非标准 ie6-8使用比如不让链接跳转
e.preventDefault()	该方法阻止默认事件（默认行为）标准比如不让链接跳转
e.stopPropagation()	阻止冒泡标准

# 阻止事件冒泡

# 阻止冒泡的2种方法

标准写法：利用事件对象里面的stopPropagation()方法

e.stopPropagation(); //标准 stop 停止  Propagation传播

非标准写法： ie6-8 利用事件对象cancelBubble

e.cancelBubble = true ; //非标准 cancel 取消 bubble  泡泡

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

# 事件委托

事件委托也称为事件代理，在jQuery里面称为事件委派

# 事件委托的原理

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

# 事件委托的作用

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

# 常用的鼠标事件

禁止鼠标右键菜单 contextmenu
禁止选中文字 selectstart

<body>
    <p>你复制不到</p>
    <script>
        // contextmenu 禁用右键菜单
        var p = document.querySelector('p');
        p.addEventListener('contextmenu' , function(e){
            e.preventDefault();
        })
        p.addEventListener('selectstart',function(e){
            e.preventDefault();
        })
    </script>
</body>

# 鼠标事件对象

event 对象代表事件的状态，跟事件相关的一xilie信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent 和键盘事件对象KeyboardEvent

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面X坐标
e.pageY	返回鼠标相对于文档页面Y坐标
e.screenX	返回鼠标相对电脑屏幕的X坐标
e.screenY	返回鼠标相对电脑屏幕的Y坐标

<body>
    <script>
        document.addEventListener('click',function(e){
            // 1. client 鼠标在可视区的x和y坐标 （相对坐标）
            console.log("-------client----------");
            console.log(e.clientX);
            console.log(e.clientY);
            console.log("-------page----------");
            // 2.paeg 鼠标在页面文档的x 和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            // 3.screen 鼠标在电脑屏幕的x和y坐标
            console.log("-------screen----------");
            console.log(e.screenX);
            console.log(e.screenY);          
        })
    </script>

# 常用键盘事件

键盘事件	触发事件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键按下时触发但是它不识别功能键如 ctrl shift 方向键

    <script>
        document.addEventListener('keyup',function(){
            console.log("keyup");
        })

        document.addEventListener('keydown',function(){
            console.log("keydown");
        })

        document.addEventListener('keypress',function(){
            console.log("keypress");
        })
    </script>

注意：

如果使用addEventListener 不需要加on
onkeypress 和前面2个的区别是它不识别功能键比如方向键 shift
三件事件的执行顺序是： keydown---》keypress---》keyup

# 键盘事件对象

键盘事件对象属性	说明
KeyCode	返回该键的ASCII值

注意：

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

    <script>
        // 键盘事件对象中keyCode属性可以得到相对键的ASCII码值
        // 1.我们的keyup 和keydown事件不区分字母大小写 a 和A 得到的都是65
        // 2.我们的keypress事件 区分字母大小写 a 97 和A 得到的是65
        document.addEventListener('keyup',function(e){
            console.log('up:' + e.keyCode);
            if(e.keyCode === 65 ){
                alert('a');
            }else{
                alert('no a')
            }
        })

        document.addEventListener('keypress',function(e){
            console.log('press:' + e.keyCode);
        })
    </script>

← webAPIs BOM →