浅谈JavaScript事件

IamDLY 发布于2019-08-21 11:27 / 1167人阅读

摘要：浅谈事件事件流的事件流有提出的捕获流的冒泡流以及级事件流。真实的过程取决于事件的目标元素以及各目标元素的祖先元素是否有事件处理函数。事件处理函数需要注意的指的是或后面讨论。两种方法都会给事件处理函数传一个事件对象作为参数。

浅谈JavaScript事件 事件流

JavaScript的事件流有：Netscape提出的捕获流、IE的冒泡流以及DOM2级事件流。这里只讨论DOM2级事件流。

DOM2级事件流有三个阶段：捕获阶段——>处于目标阶段——>冒泡阶段。如图所示：

其实这些阶段都是相对的。真实的过程取决于事件的目标元素以及各目标元素的祖先元素是否有事件处理函数。

添加事件处理程序

三种方法：

在html标签中直接指定，如

;

DOM0级方法，如element.onclick = function(e) { alert(e.type); };

DOM2级方法，如element.addEventListener("click", fn, false);

三种方法各有什么优缺点呢？

html方法，用户可能在元素刚一出现就触发了事件，但此时js代码可能还未加载。其次，HTML代码和JavaScript代码紧密耦合，不利于开发和维护，所以不推荐使用这种方法。

DOM0级方法，简单且兼容性好，但是在需要对一个元素设置多个事件处理程序时便显得孱弱。

DOM2级方法，可以轻易的设置多个事件处理程序，但是在删除事件处理程序时，传给removeEventListener()的参数必须与之前一致，且IE9以下不支持。

事件处理函数需要注意的：

this指的是target或currentTarget(后面讨论)。

两种DOM方法都会给事件处理函数传一个事件对象作为参数。html方法直接引用event

事件对象

上面有提到事件对象event，event对象有很多属性和方法，这里不一一列出只讨论其中常用的几个：

target: event真正的目标元素;

currentTarget: 设置了事件处理函数的元素;

stopPropagation(): 阻止event继续冒泡;

preventDefault(): 阻止事件的默认行为。

事件类型

太多，无法一一列举，提几个自己容易忽略的点。

blur、focus是不会冒泡的

键盘事件keydown触发条件是按任意键，keypress是按字符键，这两者按住不放都会持续触发，是在文本框变化之前就触发了的。keyup即松开按键触发

GPU云服务器云服务器浅谈javascript javascript事件 javascript键盘事件 javascript焦点事件

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

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

JavaScript-浅谈DOM事件流

摘要：事件流指的是从页面接收事件的顺序。级事件规定方法的第三个参数设为，表示事件在捕获阶段触发。目前支持事件捕获流的浏览器有，，，，。事件流根据级事件规定，事件流应该包括三个阶段，事件捕获阶段，处于目标阶段和事件冒泡阶段。什么是事件？（敲黑板）事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。（by 《JavaScript高级程序设计》）比如鼠标点击，双击，滚动条滑动... 什么是事件...

haitiancoder 2019-08-20 10:49 评论0 收藏0
浅谈Javascript事件委托（代理）

摘要：开玩笑啦，提供一种方法叫做事件委托。途中经过各个层次的，并在各上触发捕获事件，直到到达时间的目标。懂得了事件冒泡的过程，就很容易明白事件委托的运作原理。首先祝大家七夕快乐。。假如现在有一个的列表，里面可能会有若干个列表项。现在要为每一个列表项绑定相同的点击事件，现在你可能会有这几种做法：手动为每一个列表项绑定事件；在onload的时候，找到该列表，对其每一个子元素进行遍历，循环...

yunhao 2019-08-21 10:38 评论0 收藏0
浅谈React事件机制

摘要：事件简介事件是合成事件，所有事件都自动绑定到最外层上。支持事件的冒泡机制，我们可以使用和来中断它。这样做简化了事件处理和回收机制，效率也有很大提升。事件类型合成事件的事件类型是原生事件类型的一个子集。 React事件简介 React事件是合成事件，所有事件都自动绑定到最外层上。因为Virtual DOM 在内存中是以对象的形式存在的，所以React 基于 Virtual DOM 实现了...

moven_j 2019-08-02 15:29 评论0 收藏0
浅谈React事件机制

摘要：事件简介事件是合成事件，所有事件都自动绑定到最外层上。支持事件的冒泡机制，我们可以使用和来中断它。这样做简化了事件处理和回收机制，效率也有很大提升。事件类型合成事件的事件类型是原生事件类型的一个子集。 React事件简介 React事件是合成事件，所有事件都自动绑定到最外层上。因为Virtual DOM 在内存中是以对象的形式存在的，所以React 基于 Virtual DOM 实现了...

MyFaith 2019-08-23 18:36 评论0 收藏0
浅谈JavaScript中的事件循环机制

摘要：事件循环背景是一门单线程非阻塞的脚本语言，单线程意味着，代码在执行的任何时候，都只有一个主线程来处理所有的任务。在意识到该问题之际，新特性中的可以让成为一门多线程语言，但实际开发中使用存在着诸多限制。这个地方被称为执行栈。事件循环（Event Loop）背景 JavaScript是一门单线程非阻塞的脚本语言，单线程意味着，JavaScript代码在执行的任何时候，都只有一个主线程来...

Pluser 2019-08-23 15:22 评论0 收藏0