DOM事件总结（一）

hedge_hog 发布于2019-08-19 18:32 / 2289人阅读

摘要：三级事件处理程序级事件定义了两个方法，分别用于处理指定和删除事件处理程序的操作和，他们都接收三个参数要处理的事件名作为事件处理程序的函数一个布尔值。布尔值如果是表示在捕获阶段调用事件处理程序，如果是表示在冒泡阶段调用事件处理程序。

前言：撸完CSS－DOM紧接着来撸DOM事件，事件总结完成后我要开始总结动画，然后用纯JS实现一个轮播图，前路漫漫，还有各种框架等着我～～～
本篇主要内容有：事件流事件处理程序跨浏览器事件处理程序

－－－－－－－－－－－－－－－－－－－－? 分割线－－－－－－－－－－－－－－－－－－－－－

1.事件流

事件冒泡：事件开始时由最具体的元素（文档嵌套层次最深的节点）接收，然后逐级向上传播到较为不具体的节点。
事件捕获：不太具体的节点应该更早接收到事件，最具体的节点应该最后接收到事件。

2.DOM事件流

在W3C规范中：分三步（1、事件捕获；2、事件触发；3、事件冒泡）；
在IE中：分两步（1、事件冒泡；2、事件触发）
在网景（Netscape)：分两步（1、事件捕获；2、事件触发）

3.事件处理程序 （一）HTML事件处理程序

这个在《DOM编程艺术》中初步实现的图片库的总结（一）就有了运用，它的js代码嵌套在HTML中，如：想要实现在点击按钮时显示一个警告框，则可以这么写：

缺点：
1.代码例子中的alert可以换成自己定义的函数，假如用户在页面加载后还没开始解析这个函数时就单击了按钮，这个时候就会引发错误，这时可以将事件处理程序封装在try－catch块中，上面的代码可以改为：

2.HTML和js代码耦合性太强，如果要更换事件处理程序，就要改动两个地方。

（二）DOM 0级事件处理程序

每个元素（包括window和document）都有自己的事件处理程序属性，例如onclick，将这种属性值设置为一个函数，就可以指定事件处理程序，如下方代码：

    //假如有一个按钮，先获取这个按钮元素
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        alert("你点我干啥！！！");
    };

注意：以上代码在运行之前不会指定事件处理程序，换句话说就是如果这些代码插入在html文档中的最后，位于按钮之后，body标签之前，那么在文档解析这个函数之前，点击按钮时无效的。

优点：简单，具有跨浏览器的优势

特点：使用DOM 0级方法指定事件处理程序被认为是元素的方法，因此这个时候事件处理是在元素的作用域中进行运行，程序中的this指向当前元素。来看下面一段代码：

    var btn = document.getElementById("mybtn");
    btn.onclick = function(){
        alert(this.id);   //this代表当前执行操作的元素btn，也就是id为mybtn的按钮
    }

以上不仅仅可以访问元素的id属性，元素的任何属性和方法都可以通过this访问。以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

（三）DOM 2级事件处理程序

DOM 2级事件定义了两个方法，分别用于处理指定和删除事件处理程序的操作：
addEventListener()和removeEventListener()，
他们都接收三个参数：要处理的事件名、作为事件处理程序的函数、一个布尔值。
布尔值如果是true表示在捕获阶段调用事件处理程序，如果是false表示在冒泡阶段调用事件处理程序。

添加事件操作
如下代码：

    var btn = document.getElementById("myBtn");
    btn.addEventListener("click",function(){
        alert(this.id);
    },false);
    btn.addEventListener("click",function(){
        alert("你点我干啥！！！");
    },false);

以上代码为一个按钮添加了一个onclick事件处理程序，注意里面参数传递的是"click"，这个是跟DOM中的事件类型有关，后续再说。～～～
并且使用DOM 2级方法添加事件处理程序的好处是，可以添加多个事件处理程序，上面例子中首先会显示元素id，然后显示"你点我干啥！！！"。

删除事件操作
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加程序时使用的参数相同。这也就意味着通过addEventListener()添加的匿名函数将无法移除。如上面的例子，我增加以下代码将无法移除事件：

    btn.removeEventListener("click",function(){
        alert(this.id);
    },false);

解决办法是，将上面的匿名函数赋值给一个变量，然后affffdEventListener和 removeEventListener
传参数时传入这个变量就可以了。

重写这个函数如下：

    var btn = document.getElementById("myBtn");
    var handler = function(){
        alert(this.id);
    };
    btn.addEventListener("click",handler,false);
    btn.addEventListener("click",handler,false);

（4）跨浏览器的事件处理程序

－－－－－－－－－－－－－－－－－珍爱生命，远离IE －－－－－－－－－－－－－－－－－－

IE也实现了DOM中的类似的两个方法：attachEvent() 和detachEvent()，这两个方法接受相同的两个参数，事件处理程序名称与事件处理程序函数。

如下代码：

    var btn = document.getElementById("mybtn");
    btn.attachEvent("onclick",function(){       //你没看错，用的“onclick”！！！
        alert("你又点我了！！！");
    });

注意：
1.attachEvent()的第一个参数时“onclick”
2.使用attachEvent()，事件处理程序会在全局作用域中进行，因此this===window
3.添加多个事件时，事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。
4.使用detachEvent()来移除时，匿名函数同样不能移除，因此需要传递给函数相同的引用。

那么重点来了，可以封装一个对象解决跨浏览器进行事件处理，给这个对象起名叫：EventUtil，它有两个方法，分别进行事件添加和移除。

且看下面代码：

    var EventUtil = {
        //@handler是装载匿名函数的引用变量，里面装载的是具体要执行的函数逻辑
        //@element是目标元素
        //type代表的是DOM 2级的事件类型，因此在用IE或者DOM 0级前面要加“on”
    
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler);
            } else {
                elemet["on" + type] = handler;  //如果上面两种都不行，就使用DOM 0级方法处理，直接在元素上添加onclick事件
            }
        },
    
        removeHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler);
            } else {
                element["on" + type] = null;  ////如果上面两种都不行，就使用DOM 0级方法处理，直接赋值为null取消事件
            }
        }
    };

定义好了，怎么使用呢？看下面～～～

var btn = document.getElementById("myBtn");
var handler = function(){
    alert("你又点我了！！！");
};

//添加事件
EventUtil.addHandler(btn,"click",handler);

//移除事件
EventUtil.removeHandler(btn,"click",handler);

以上代码并没有考虑IE中的作用域问题，并且DOM 0级只支持一个事件处理程序，但也不是什么问题，如今只卖早餐的饭店不多了～～～

这次没有源代码，以上～

GPU云服务器云服务器 DOM事件 dom事件管理 dom事件冒泡 DOM元素事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79673.html

JavaScript学习总结（九）事件详解

摘要：布尔值表示捕获阶段调用事件处理程序，表示冒泡阶段通过对象的方法，也可以定义事件的回调函数。对象会被作为第一个参数传递给事件监听的回调函数。布尔默认值是，当设置成时用以取消事件的默认行为与中的相同。其实这篇文章挺早之前就写了，但是由于sf保存方面的bug，所以当时写了一大堆，结果没保存，觉得这个没写完是个不小的遗憾，今天正好有空，就给补充下了，也正好给我的javascript学习总结做...

LiveVideoStack 2019-08-21 10:21 评论0 收藏0
DOM事件全面总结

摘要：事件的定义事件就是用户或浏览器自身执行的某种动作。事件在页面中定义。用来添加和移除事件处理程序和。事件流包括三个阶段事件捕获阶段，处于目标事件和事件冒泡阶段。事件捕获比如单机元素会触发事件。事件捕获的过程是从上到下。事件的定义：事件就是用户或浏览器自身执行的某种动作。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比如说，我们可以在用户点击某按钮时产生一个 ...

chnmagnus 2019-08-23 15:24 评论0 收藏0
JavaScript学习总结（三）BOM和DOM详解

摘要：有级级级共个级别。事件类型事件类型鼠标事件键盘事件事件事件处理器执行代码的程序在事件发生时会对事件做出响应。在标签中使用事件处理器的语法是标签事件处理器代码事件处理程序事件就是用户或浏览器自身执行的某种动作。 DOM介绍 D（文档）可以理解为整个Web加载的网页文档，O（对象）可以理解为类似window对象只来的东西，可以调用属性和方法，这里我们说的是document对象，M（模型）可...

littlelightss 2019-08-21 12:27 评论0 收藏0
Dom中高big 事件总结（持续更新中）

摘要：三事件事件在即将离开当前页面刷新或关闭时触发。四事件事件在用户退出页面时发生。五事件该事件在存储更新时触发六事件该事件在窗口的浏览历史对象发生改变时触发七事件事件在用户中止加载或元素时触发。将前段时间自己用到的，比较少见，但是功能很强大的事件在这里总结下，一来自己重新梳理归档下，二来，没用过的同学也可以尝试用下。其实，这些都是基础知识，但是基础是最重要的。还记得老师说过：基础不牢，地...

mzlogin 2019-08-23 14:40 评论0 收藏0
DOM事件模型

摘要：事件模型历史标准没有对事件进行修订所以事件模型的标准就是制定的标准规定了事件捕获事件冒泡事件取消和知识点在的属性中使用时要加括号在的中给点击事件赋值不加括号写在里相当于字符串里的代码是执行意思是执行这个这个代码意思是执行在里为一个函数返回类 DOM事件模型 1.历史 showImg(https://segmentfault.com/img/remote/1460000015281650...

codergarden 2019-08-22 18:03 评论0 收藏0