事件流是什么

发布网友发布时间：2022-05-14 17:21

共5个回答

懂视网时间：2022-05-14 21:43

这篇文章给大家介绍的内容是关于浅析javascript中事件流的内容，有着一定的参考价值，有需要的朋友可以参考一下。

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行，事件是可以被 JavaScript 侦测到的行为

绑定事件

首先我们要先绑定事件绑定事件有三种

1）在DOM元素中直接绑定，我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等等

只可以执行一次 多次使用会跟随文档流所覆盖
 <p id="box1"></p>
 <script>
 var box1=document.getElementById("box1");
 box1.onclick=function(){
  alert("你瞅啥")
 }
 box1.onclick=function(){
  alert("瞅你咋地")
 }
 </script>
 只弹出一个 瞅你咋地 你瞅啥被覆盖

2）在JavaScript代码中绑定，在JavaScript代码中（即 script 标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发

<p id="box1"></p>
<script>
 var box1=document.getElementById("box1");
box1.onclick = function () {
  alert("不服就干");
 }
 </script>

3）使用事件监听绑定事件
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数

 <p id="box1"></p>
 <script>
 var box1=document.getElementById("box1");
 box1.addEventListener("click",function(){
  alert("再瞅个试试")
 },false)
 //默认值为false 可以省略不写

 box1.addEventListener("click",function(){
  alert("试试就试试")
 }) //默认值为false 可以省略不写
 </script>
 两个都可以正常弹出 跟随文档流执行

事件流过程

冒泡捕获

DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从外部到内部。

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从内部到外部

![图片描述

我们有以下代码 点击box3的时候 跟随图片描述 捕获 冒泡
<body>
 <p id="box1">box1
 <p id="box2">box2
  <p id="box3">box3</p>
 </p>
 </p>
</body>
<script>
 var box1=document.getElementById("box1");
 var box2=document.getElementById("box2");
 var box3=document.getElementById("box3");
 box1.addEventListener("click", function () {
 console.log("捕获box1")
 }, true)
 box2.addEventListener("click", function () {
 console.log("捕获box2")
 }, true)
 box3.addEventListener("click", function () {
 console.log("捕获box3")
 }, true)

 box1.addEventListener("click", function () {
 console.log("冒泡box1")
 }, false)
 box3.addEventListener("click", function () {
 console.log("冒泡box3")
 }, false)
 box2.addEventListener("click", function () {
 console.log("冒泡box2")
 }, false)

</script>

在处于目标阶段的时候就是在本文中点击box3的时候如果把冒泡写在捕获前面会跟随文档流所执行导致先冒泡再捕获这一点一定要注意如以下
图片描述

图片描述
如同图中所示输出时顺序和你写入时顺序有关

事件委托

什么是事件委托：
事件委托——给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件
事件委托三部曲：
第一步：给父元素绑定事件
给元素ul添加绑定事件，通过addEventListener为点击事件click添加绑定
第二步：监听子元素的冒泡事件
这里默认是冒泡，点击子元素li会向上冒泡
第三步：找到是哪个子元素的事件
通过匿名回调函数来接收事件对象，通过alert验证

 <p>
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
 </ul>
 </p>
 <script>
 var show=document.getElementsByTagName("ul")[0];
 show.addEventListener("click",function(){
  alert("hello")
 },false)
 </script>

图片描述

如图所示

阻止事件

阻止冒泡

我们在上文写了冒泡事件既然它能冒泡如果我们不想用这个效果了那么我们有办法阻止它吗？答案是肯定的。我们直接看代码，能够更加明了

<body>
 <p id="box1">
 <p id="box2"></p>
 </p>
</body>
<script>
 var box1 = document.getElementById("box1");
 var box2 = document.getElementById("box2");
 box1.addEventListener("click", function () {
 alert("我是第box1")
 })
 box2.addEventListener("click", clickStop)
 //设置函数 阻止box2冒泡事件 当点击第二次时 阻止冒泡事件
 var num = 0;
 function clickStop() {
 if (num >= 1) {
  box2.addEventListener(clickStop)
 } else {
  alert("我是box2");
  num++;
 }
 }
</script>

第一次点击
图片描述

当我们第二次点击的时候只会弹出一个box1 ，阻止了box2的第二次冒泡
图片描述

阻止默认事件

在我们网页中如果我们点击右键是不是会弹出一个框，这里我不会截图就不给大家展示了，里面会有刷新、粘贴、复制、剪切等等按钮这个就是浏览器的右键默认事件，我们来尝试下看能不能把它给阻止了。

<script>
 var box = document.getElementsByClassName("box")[0];
 window.oncontextmenu = function (event) {
  //关闭右键浏览器默认样式
  event.preventDefault();
 }
 </script>

有兴趣的话我们还可以把它变成自己的

<style>

 {
 margin: 0;
 padding: 0;
 }
 .box {
 width: 100px;
 display: none;
 position: relative;
 }
 ul {
 list-style: none;
 border: 1px solid rgb(85, 74, 74);
 }
 ul li {
 line-height: 30px;
 }
 .box ul li:hover {
 background: rgb(224, 208, 208);
 }
</style

 <ul>
 <li>重新加载</li>
 <li>返回上一页</li>
 <li>另存为</li>
 <li>翻成中文</li>
 <li>投射页面</li>
 </ul>
</p>
<script>
 var box = document.getElementsByClassName("box")[0];
 window.oncontextmenu = function (event) {
 //关闭右键浏览器默认样式
 event.preventDefault();
 //设置自己的样式
 var x = event.clientX;
 var y = event.clientY;
 box.style.left = x + "px";
 box.style.top = y + "px";
 box.style.display = "block";
 }
 window.onclick = function () {
 box.style.display = "none"
 }
</script>

在页面中点击右键就变成了下面这个效果图片描述

鼠标事件

DOM3级事件中定义了9个鼠标事件。
click：点击触发鼠标左键或者回车键
mousedown:鼠标按钮被按下时触发。不能通过键盘触发。
mouseup:鼠标按钮弹起时触发，同样不能被键盘触发
dblclick:双击鼠标左键时触发。
mouseover:鼠标移入目标范围中。鼠标移到其后代元素上时会触发。
mouseout:鼠标移出目标元素上方。
mouseenter:鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。
mouseleave:鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发。
mousemove:鼠标在元素内部移到时不断触发。

下面给大家列举几个

<p id="box"></p>
 <script>
 var box=document.getElementById("box");
 //鼠标点击事件
 box.onclick=function(){
 alert("hello")
 }
 </script>

mouseup:鼠标按钮弹起时触发，同样不能被键盘触发

 <style>
 #box{
 width: 200px;
 height: 200px;
 background: gray;
 margin: 100px auto;
 }
 </style>
</head>
<body>
 <p id="box"></p>
 <script>
 var box=document.getElementById("box");
 // 鼠标抬起时触发
 box.onmouseup=function(){
 alert("鼠标抬起")
 }
 </script>

mouseover:鼠标移入目标范围中。鼠标移到其后代元素上时会触发
//当鼠标进入box区域弹出显示框

 box.onmouseover=function(){
 alert("我进来了")
 }

mousemove:鼠标在元素内部移到时不断触发。

 box.onmousemove=function(){
 console.log("自由的行走")
 }
 会不断的被触发，移动一次触发一次![图片描述][9]

键盘事件

keydown():
按键按下时，会触发该事件；

<body>

<input type="text" id="btn">
<script>
 //onkeyup 鼠标抬起 触发
var btn=document.getElementById("btn");
btn.onkeydown=function(){
// console.log(222);
}
</script>

2. keyup();

 按键松开时，会触发该事件；

<body>

<input type="text" id="btn">
<script>
 //onkeyup 鼠标抬起 触发
var btn=document.getElementById("btn");
btn.onkeyup=function(event){
 console.log(111);
}
</script>

3. keypress();

 敲击按键时触发，和keyup()大致相同 我找了很多资料 却还是没有明确的区别 希望有大佬指点下

<body>
<input type="text" id="btn">
<script>
 //onkeyup 鼠标抬起 触发
var btn=document.getElementById("btn");
btn.onkeypress=function(event){
 console.log(111);
}
</script>

HTML事件

1.onload 文档加载完成后执行函数

<script>
 window.onload = function (event) {
  console.log(event)
 }
 </script>

2.select 被选中的时候使用我的理解是在input中选中的时候

 <input type="text" id="one">
 <script>
 var one = document.getElementById("one");
  one.onselect=function(){
 console.log("你瞅啥")// 在文本框中输入文本 选中时显示
 }
 </script>

3.onchange 当内容失去焦点的时候或者改变的时候触发

 <input type="text" id="one">
 <script>
 var one = document.getElementById("one");
  one.onchange=function(){
 console.log("hello") //当把焦点从文本框中挪移出 比如回车或者点击空白区域
 }
 </script>

focus 得到光标的时候使用

 <input type="text" id="one">
 <script>
 var one = document.getElementById("one");
  one.onfocus=function(){
 console.log("hello") //把鼠标点击到文本框中控制台

输出 } </script>

5.resize 窗口变化时

 <input type="text" id="one">
<script>
 window.onresize=function(){
 console.log("变化了") //变化窗口大小 控制台

输出 } </script>

热心网友时间：2022-05-14 18:51

事件流也叫数据流。数据流最初是通信领域使用的概念，代表传输中所使用的信息的数字编码信号序列。然而，我们所提到的数据流概念与此不同。这里提到的数据流具有以下两个特点能够持续产生大量的数据这类数据最早出现与传统的银行和股票交易领域，也在互联网监控、无线通信网等领域出现、需要以近实时的方式对更新数据流进行复杂分析如趋势分析、预测、监控等。事件流处理是数据流处理的一个子集，是一种特定的数据流处理。事件流处理与一般的数据流处理不同的是事件流处理通常是异步的，事件可能源自不同的地方，而且类型也可能各异，接收的顺序也可能差异很大。事件流处理需要使用事件属性、事件发生的时间以及事件中任何能推断的因果关系作为它的基础元素。事件流模型相对于传统静态数据处理模型主要有如下几方面的特征：
1、事件流中的事件元素在线到达；
2、系统无法控制将要处理的新到达的事件元素的顺序；
3、事件流模型中查询是相对静止不变的，而数据是时刻变化的；
4、从理论上说，事件流的潜在大小是无界的；系统能存储的数据相对事件流的大小则是非常有限的；
5、一旦事件流中的某个元素经过处理，要么被丢弃，要么被归档存储。但被丢弃的事件元素可能需要再次被访问。

热心网友时间：2022-05-14 20:09

事件流处理（Event Stream Processing，ESP）是指以近实时的方式计算、分析流事件将事件与事件查询语句相匹配并通知*。与之相关还有一个概念叫做复杂事件处理，指监控并分析事件之间的关系包括时间关系、逻辑关系等。与传统事件驱动结构相比，事件流处理和复杂事件处理是传统事件驱动的一个扩展，它们引入了新的技术理念，比如说许多事件复模式的检测，事件相关和抽象，事件继承，事件因果性、从属性、同步性、定时和事件驱动过程。在事件流处理模式下的系统，可以实时监测事件流，当特定事件发生时触发某些行动。可以认为事件流处理与数据库的管理类似，只是处理方式相反。在传统的数据库系统中，采用信息保持静态，在数据中执行查询的方式而在事件流处理系统中，采用的是查询保持静态，数据不断变化的方式。简单的说，事件流处理是把数据库反过来，语句是固定的，而数据流进流。
事件流处理（event stream processing）是一个软件设计的能力，支持实施事件驱动的架构。

热心网友时间：2022-05-14 21:43

一、事件流的定义
页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程为事件流
就我个人理解就是网页对点击事件的排序顺序就是事件流
二、事件流的分类
1、冒泡型的事件流（任何一款浏览器都支持）
从明确事件源到不明确的事件源依次向上响应。
2、捕获型的事件流（从IE8及以下版本支持）

热心网友时间：2022-05-14 23:35

什么是事件流
一、事件流的定义

页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程为事件流
就我个人理解就是网页对点击事件的排序顺序就是事件流

二、事件流的分类

1、冒泡型的事件流（任何一款浏览器都支持）

从明确事件源到不明确的事件源依次向上响应。

2、捕获型的事件流（从IE8及以下版本支持）

从不确定事件源到确定事件源依次向下响应。

对象。addEventListener（事件，事件处理程序，false）

false：冒泡型事件流

true：捕获型事件流

三、阻止事件流（适合用于冒泡型）

ie：事件对象.cancelBubble=true；

FF：事件对象.stopPropagation（）；

阻止浏览器的默认行为

IE：e.returnValue=false；

FF：e.preventDefault（）；

阻止事件的默认行为：

return false

四、事件委派（事件委托）

把子容器要绑定到事件，委托给共同的父容器，执行时再交给子容器。

FF：e.target 获取目标事件源

IE：e.srcElement

运用冒泡型的事件流实现了

子元素比较多，而且事件相同的情况下，使用

什么是事件周期(事件流)

事件周期(事件流)指的是从页面中接收事件的顺序。根据查询相关公开信息显示：事件流描述的是从页面中接收事件的顺序，多个事件按一定顺利触发，形成了一个事件流。

事件流量分为哪几类

也就是事件是从下向上传递的。2、捕获型事件流冒泡型事件流相反,事件总是从最不精确的对象开始触发,然后到最精确。3、标准事件流W3C定义的标准时间处理模型能同时支持捕获事件流和冒泡型事件流两种模型,但是捕获型事件流先发生然后才发生冒泡型事件流。两种事件流会初级DoM中的所有层级对象,从document对象...

前端面试题,js事件机制是什么?

事件流：指从页面中接收事件的顺序，有冒泡流和捕获流。当页面中发生某种事件（比如鼠标点击，鼠标滑过等）时，毫无疑问子元素和父元素都会接收到该事件，可具体顺序是怎样的呢？冒泡和捕获则描述了两种不同的顺序。

javascript的事件模型有哪些

是Netscape用于解决事件流的技术，就是从父节点向子节点去触发事件。DOM事件流：是FireFox用于解决事件流的技术，既有事件冒泡和事件捕获事件处理程序：传统事件：一个事件源只能绑定一个函数。它的兼容性比较强如果绑定多个那么后面的函数就会将前面的函数覆盖掉现代事件：一个事件源可以绑定多个函数，函...

什么是JavaScript事件流及事件处理程序详解

事件捕获：js会顺着文档流顺序由外往内，依次触发事件。即从DOM树的根到叶子，粉->蓝->绿事件冒泡：js会逆着文档流顺序由内至外，一次触发事件。即从DOM树的叶子到根，绿->蓝->粉补充一点：多数时候推荐事件冒泡，因为大多数主流浏览器都兼容两种事件，但一开始ie是不支持事件捕获的，后来ie...

在使用Fash制作动画的过程中,事件、目标、动作3者之间的关系是什么?

事件 (Event)：对象可以通知其它对象它所发生的情况。事件流 (Event flow)：如果显示列表中的对象（屏幕上显示的对象）发生事件，则会向包含该对象的所有对象通知此事件，并依次通知其事件侦听器。此过程从舞台开始，并在显示列表中一直进行到发生事件的实际对象，然后再返回到舞台。此过程称为事件流。事...

如何描述下述系统中重要用例的基本事件流(正常情况)和备选事件流(异常...

比较难理解，举个比较经典的例子：某人在ATM机提款，这个本身就可以看作一个用例，只是它的层次比较高，细分下去。粗略一想，就有几条：(1)查询余额。(2)提款。(3)转帐。(4)存款，这四点都可以独立成为一个用例，而且执行者都是人，简单来说，用例就是描述执行者和系统之间的交互的集合。

Javascript的事件流模型都有什么?

JavaScript中的事件流模型有冒泡事件流、捕获事件流和DOM事件流。其中dom同时支持两种事件模型，但捕获性事件先开始，从document开始也结束于document，dom模型的独特之处在于文本也可以触发事件

flash同步里“数据流、事件、开始、停止”这几个选项分别在什么情况下选...

与事件声音不同，音频流随着 SWF 文件的停止而停止。而且，音频流的播放时间绝对不会比帧的播放时间长。当发布 SWF 文件时，音频流混合在一起。音频流的一个示例就是动画中一个人物的声音在多个帧中播放。注：如果您使用 mp3 声音作为音频流，则必须重新压缩声音，以便能够导出。可以将声音导出...

暗涌是什么意思

暗涌，一般指的是一种隐藏起来、不易被察觉的强烈情感或事件的深层流动。这个词通常用来形容某种紧张局势或者激烈的情感状态，这种状态在表面上可能看起来十分平静，但实际上在其内部却充满了暗流涌动。二、情感的暗涌在情感方面，暗涌可以表现为人们内心深处的情感波动。这种情感可能由于某种原因被抑制，不...

事件流的三个阶段主事件流和异常事件流事件流分为哪两种 js事件流事件流转是什么意思什么是事件流阶段 417事件是什么关于事件流流4事件