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

目录

一、注册事件

1、什么是注册事件呢

2、传统注册方式

3、方法监听注册方式

4、attachEvent 事件监听方式

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

二、删除事件

         1、传统注册事件

         2、方法监听注册方式

         3、detachEvent ie9之前

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

三、DOM事件流

四、事件对象

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

1. e.target

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

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

4、阻止事件冒泡

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

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

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

九、常用的键盘事件

---

一、注册事件

1、什么是注册事件呢

给元素添加事件，称为注册事件和绑定事件。

2、传统注册方式

        利用on开头的事件onclick

        特点：注册事件的唯一性

        同一个元素同一个时间只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

代码展示:

//  传统方式注册事件
             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')