JavaScript系列之事件详解

pakolagij 发布于2019-08-21 17:16 / 2103人阅读

摘要：响应某个事件的函数就叫事件处理程序或事件侦听器。为事件指定事件处理程序的方法主要有种。事件处理程序事件直接加在元素上。事件委托利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果，解决事件处理程序过多问题。事件委托优点提高性能。

JavaScript简单入门可以看看我丑丑的Github博客JavaScript简单入门

事件

JavaScript与HTML之间的交互是通过事件实现的。事件是文档或者浏览器窗口中发生的，特定的交互瞬间。

事件流

事件流描述的是从页面中接收事件的顺序。
事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。

事件捕获

事件开始时是由较为不具体的节点接收，然后逐级向下传播到最具体的节点。

事件冒泡

事件开始时是由最具体的节点接收，然后逐级向上传播到较为不具体的节点。

DOM事件流

“DOM2级事件”规定事件流包括三个阶段：

事件捕获阶段 -->  处于目标阶段 -->  事件冒泡阶段

● 事件捕获：事件发生时（onclick,onmouseover……）首先发生在document上，然后依次传递给body，最后到达目的节点（即事件目标）
● 事件冒泡：事件到达事件目标之后不会结束，会逐层向上冒泡，直至document对象，跟事件捕获相反

例如单击页面div

事件处理程序

事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。响应某个事件的函数就叫事件处理程序（或事件侦听器）。事件处理程序的名字以"on"开头。
为事件指定事件处理程序的方法主要有3种。

html事件处理程序

事件直接加在DOM元素上。

//原生函数

//自定义函数

DOM0级事件处理程序

把一个函数赋值给一个事件处理程序属性。

DOM2级事件处理程序

DOM2级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序：addEventListener()和removeEventListener()。
优点:

可以绑定多个事件。

可以解除相应的绑定

addEventListener

elementObject.addEventListener(eventName,handle,useCapture); IE8及以下不支持，属于DOM2级的方法，可添加多个方法不被覆盖

removeEventListener

通过addEventListener添加的事件处理程序必须通过removeEventListener删除，且参数一致。

IE特有

attachEvent
elemObject.attachEvent("eventName", functionReference); IE特有，兼容IE8及以下，可添加多个事件处理程序，只支持冒泡阶段

useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。

detachEvent

通过attachEvent添加的事件处理程序必须通过detachEvent方法删除，且参数一致。

兼容写法示例

function addEvent(obj,type,handle){
    try{  
    // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        obj.addEventListener(type,handle,false);
    }catch(e){
        try{  
        // IE8.0及其以下版本
            obj.attachEvent("on" + type,handle);
        }catch(e){  
        // 早期浏览器
            obj["on" + type] = handle;
        }
    }
}

取消事件

给对象的事件属性赋值为null，可取消此事件的所有注册过的处理事件程序。

document.body.onclick=null;     //onclick属性赋值为null，相当于注销了onclick事件

阻止通过on这种方式绑定的事件的默认事件

ele.onclick = function() {
    return false;              //通过返回false值阻止默认事件行为
};

阻止事件

阻止事件冒泡

标准事件对象是e.stopPropagation()，IE则使用e.cancelBubble = true/false

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    event.stopPropagation();   
});
//IE
btn.attachEvent("onclick", function(event) {
    event.cancelBubble = true;  
});

阻止默认事件

标准事件对象使用preventDefault()，IE则使用returnValue = true/false

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    event.preventDefault(); 
});
//IE
btn.attachEvent("onclick", function(event) {
    event.returnValue = false;
});

事件对象

事件在浏览器中是以对象的形式存在的，即event。触发一个事件，就会产生一个事件对象event，该对象包含着所有与事件有关的信息。
部分属性如下：

type属性，被触发的事件的类型

target属性，直接事件目标，真正触发事件的目标

currentTarget属性，其事件处理程序当前正在处理事件的那个元素

在事件处理程序内部，对象this始终等于currentTarget的值，而target则是包含事件的实际目标。

DOM中的事件对象

通过attachEvent()添加的事件处理程序，event对象作为参数传入

部分属性如下：

srcElement属性，事件的目标（与DOM中的target属性相同）

兼容性处理

function showMsg(event){
    event = event || window.event;  
    var ele = event.target || event.srcElement; 
    ......
 }

事件处理程序中this

IE事件处理程序中this的值等于 window 对象，而在标准事件绑定当中，this的值等于被绑定的元素。

var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function(event) {
    alert(this === window);              // true
});
btn.addEventListener("click", function(event) {
    alert(this === btn);                  // true
});

事件委托

利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果，解决事件处理程序过多问题。
事件委托优点：

提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用

动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。


    red
    orange
    yellow
    green

GPU云服务器云服务器系列之系列之二架构之坑系列 javascript专题系列

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

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

前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

muddyway 2019-08-29 13:21 评论0 收藏0
JS系列之目录

摘要：设计模式资源整理操作符小知识点实现发邮件功能数据结构与算法资源整理跨域函数的合成与柯里化系列之防抖节流系列之正则系列之系列之系列之编码系列之系列之操作符对象中的坐标检测对象或数组系列之机制系列之构造对象系列之总结系列之浅复制与深复制系列之对 Javascript设计模式资源整理JS操作符JS小知识点JS实现发邮件功能数据结构与算法资源整理跨域函数的合成与柯里化JS系列之防抖节流JS系列...

AaronYuan 2019-08-23 14:39 评论0 收藏0
第五天 JavaScript单线程详解

摘要：若以多线程的方式操作这些，则可能出现操作的冲突。另外，因为是单线程的，在某一时刻内只能执行特定的一个任务，并且会阻塞其它任务执行。浏览器事件触发线程事件触发线程，当一个事件被触发时该线程会把事件添加到任务队列的队尾，等待引擎的处理。首先，说下为什么 JavaScript 是单线程？总所周知，JavaScript是以单线程的方式运行的。说到线程就自然联想到进程。那它们有什么联系呢？ ...

caiyongji 2019-08-20 12:28 评论0 收藏0