JavaScript—DOM 高级事件知识内容整理

//  传统方式注册事件
             btns[0].onclick = function() {
                 alert('今天星期一');
             }
             btns[0].onclick = function() {
                     alert('明天星期二');
                 }

结果展示：

3、方法监听注册方式

W3C标准推荐方式

addEventListener()它是一个方法

IE9之前的IE不支持此方法，可使用attachEvent()代替

特点：同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行

语法： EventTarget.addEventListener(type,listener[,useCapure])

type:事件类型字符串，比如click、mouseover，注意这里不要带on

listener:事件处理函数，事件繁盛是，会调用该监听函数

useCapture:可选参数，是一个布尔值，默认是false。

代码展示：

// 2. 事件侦听注册事件 addEventListener 
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
 //(2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener('click', function() {
                 alert(22);
             })
             btns[1].addEventListener('click', function() {
                     alert(33);
                 })

结果展示：

4、attachEvent 事件监听方式

        语法：eventTarget.attachEvent(evenNameWithOn,callback)

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

        ie9以前的版本支持

        evenNameWithOn：事件类型字符串，比如onclick、onmouseover，这里要带on

callback: 事件处理函数，当目标触发事件时回调函数被调用

代码段：

// attachEvent ie9以前的版本支持
     btns[2].attachEvent('onclick', function() {
     alert(11);

5、注册事件兼容性解决方案

 function addEventLi stener (element, eventName, fn) {
        //判断当前浏览器是否支持addEventListener方法
        if (element. addEventLi stener) {
        element . addEventListener (eventName, fn); // 第三个参数默认是false
        } else if (element . attachEvent) {
        element. attachEvent('on' + eventName, fn) ;
        } else
        //相当于element.onclick = fn;
        element['on' + eventName] = fn;
        }

兼容性处理的原则：首先照顾大多属于的浏览器，在处理特殊的浏览器

二、删除事件

1、传统注册事件

evenTarget.onclick = null;

divs[0].onclick = function() {
            alert('11')
            // 1.传统方式删除事件
            divs[0].onclick = 'none'
        }

2、方法监听注册方式

(1)eventTarget.removeEventListener(type,listener[,useCapture]);

divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
        function fn() {
            console.log(222);
            divs[1].removeEventListener('click', fn);
        }

3、detachEvent ie9之前

// 3. detachEvent ie9之前
        divs[2].attachEvent('onclick', fn1);
        function fn1() {
             console.log(333);
            divs[2].detachEvent('onclick', fn1);
        }

统一结果展示:

当我删除事件之后，这个事件就只能执行一次

4、删除事件兼容性解决方案

   function removeEventListener (element, eventName, fn) {
        //判断当前浏览器是否支持removeEventLi stener方法
        if (element. removeEventListener) {
        element . removeEventLi stener (eventName, fn); // 第三个参数默认是false
        } else if (element . detachEvent) {
        element. detachEvent''on' + eventName, fn) ;
        } else {
        element['on' + eventName] = null;
        }

三、DOM事件流

1、什么是DOM 事件流

事件流描述的是从页面汇总接收事件的顺序。

事件发生时在元素节点之间按照待定的顺序传播，这个传播过程即DOM事件流

比如我们给一个div注册了点击事件：

DOM事件流分为3个阶段

1、捕获阶段

2、当前目标阶段

3、冒泡阶段

事件冒泡： IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。

事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。

注意：

1.js代码中只能执行捕获或者冒泡其中的一个阶段

2.onclick和attachEvent只能得到冒泡阶段

3.addEventListener(type，listener[, useCapture])第三个参数如果是true，表示在事件捕获

阶段调用事件处理程序；如果是false(不写默认就是false)，表示在事件冒泡阶段调用事件处理程序。

4.实际开发中我们很少使用时间捕获，我们更关注事件冒泡。

5.有些事件是没有冒泡的，比如 onblur、onfocus、onmouseover、onmouseleave

6.事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件

四、事件对象

1、什么是事件对象

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

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

注意：

1.event就是一个事件对象，写到我们侦听函数小括号里面当形参来看

2.事件对象只有有了事件才会存在，它是系统给我们自动创建的不需要我们传递函数

3.事件对象是我们事件的一系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了哪个健。

4.这个事件对象我们可以自己命名比如 event、evt 、 e

5.事件对象也有兼容性问题 ie678通过Window.event

兼容性的写法 e = e ||window.event;

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

1. e.target

e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）

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

兼容性处理

代码展示：

div.onclick = function(e) {
                e = e || window.event;
                var target = e.target || e.srcElement;
                console.log(target);

2、返回事件类型 e.type 比如click mouseover 不带on

格式：e.type

代码展示：

 var div = document.querySelector('div')
        div.addEventListener('click',fn)
        div.addEventListener('mousover',fn)
        div.addEventListener('mouseout',fn)
        function fn(e){
            console.log(e.type);
        }

结果展示：

3、阻止默认行为（事件）e.preventDefault()

让链接不跳转或者让提交按钮不提交

代码展示：不让链接调转

 var a = document.querySelector('a')
        a.addEventListener('click',function(e){
            e.preventDefault() //dom推荐的标准写法
        })

传统的注册方式：

代码展示：

a.onclick = function(e) {
  普通浏览器: e.preventDefault() 方法
  e.preventDefault();
低版本浏览器 ie678 returnValue 属性
  e.returnValue
  我们可以利用return false 也能阻止默认行为没有兼容性问题
  特点就是 return后面的代码不执行了，而且只限于传统的注册方式
return false;
}

4、阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

阻止事件冒泡

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

         stop 停止 Propagation 传播低版本不支持

非标准写法:IE6-8利用事件对象cancelBubble属性

         e.cancelBubble = true;

        cancel 取消 bubble 泡泡

        兼容性方案

       if(e && e.stopPropagation){

            e.stopPropagation();

        }else{

            window.event.cancelBubble = true;

        }

六、事件委托(代理、委派)

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

2、事件委托的原理：不是给每个子节点单独设置事假监听器，而是事件监听器设置在父节点行，然后利用冒泡原理影响设置每个子节点。（非常重要）

3、事件委托的作用：我们只操作了一次DOM，提高了程序的性能

代码展示：

<body>
    <ul>
        <li>点我应有弹框在手！</li>
        <li>点我应有弹框在手！</li>
        <li>点我应有弹框在手！</li>
        <li>点我应有弹框在手！</li>
        <li>点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul= document.querySelector('ul')
        ul.addEventListener('click',function(e){
            alert('点我应有弹框在手！')
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink'
            
        })
    </script>
</body>

结果展示:

七、禁止中文字和禁止右菜单

1、禁止鼠标右键菜单

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

document.addEventListener('contextmenu',functionn(e){

e.preventDefault();

})

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

document.addEventListener('selectstart',function(e){

e.preventDefault();

})

八、获得鼠标在页面中的坐标

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象

MouseEvent 和键盘事件对象KeyboardEvent

1.client 鼠标在可视区的x坐标和 y坐标

2.pageX 鼠标在页面文档的x坐标和 y坐标

3.scerrn 鼠标相对于电脑屏幕的X 和 Y 坐标

代码展示：

<script>
    document.addEventListener('click',function(e){
        console.log(e);
        // 1.client 鼠标在可视区的x坐标 和 y坐标
        console.log(e.clientX);
        console.log(e.clientY);
        console.log('------------------------------');
        // 2.pageX 鼠标在页面文档的x坐标 和 y坐标
        console.log(e.pageX);
        console.log(e.pageY);
        // 兼容性 ie9
        console.log('------------------------------');
        // 3.scerrn 鼠标相对于电脑屏幕的X 和 Y 坐标
        console.log(e.screenX);
        console.log(e.screenY);
    })
</script>

九、常用的键盘事件

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

onkeyup 某个键盘按键松开时被触发

onkeydown 某个键盘按键被按下时触发

onkeypress 某个键盘按键被按下时触发但是他不识别功能键比如ctrl shift 箭头等等

键盘事件对象中的keyCode可以得到相应键的ASCII码值

（1）我们的keyup和keydown事件不区分字母大小写 a 和 A 得到的都是65

（2）我们的keypress事件区分字母大小写 a 和 A 得到的都是65

代码展示：

document.addEventListener('keyup',function(e){
            console.log('up:'+ e.keyCode);

（3）我们可以可利用keyCode返回的ASCII码值来判断用书输入了那个键

注意：

onkyedown 和 onkeyup 不区分大小写，onkeypress区分字母大小写

在我们实际开发中，我们更多的使用keydown和keyup，他能识别所有的键（包括功能键）

keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值