javascript 事件流捕获与冒泡

DC_er 发布于2019-08-22 18:49 / 1922人阅读

摘要：捕获型事件流事件的传播是从最不特定的事件目标到最特定的事件目标。鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。

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

绑定事件

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

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

只可以执行一次 多次使用会跟随文档流所覆盖
   
     
     只弹出一个 瞅你咋地 你瞅啥被覆盖

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

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

   
   
        两个都可以正常弹出 跟随文档流执行

事件流过程 冒泡捕获

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

我们有以下代码 点击box3的时候 跟随图片描述 捕获 冒泡

    box1
        box2
            box3

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

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

事件委托

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

如图所示

阻止事件

阻止冒泡

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

第一次点击

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

阻止默认事件

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

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

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

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

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

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

键盘事件

keydown():

按键按下时，会触发该事件；

2. keyup();

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

3. keypress();

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

HTML事件

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

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

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

focus 得到光标的时候使用

5.resize 窗口变化时

以上就是我对js事件的理解，首先谢谢您的观看，文中如果有些不周到的地方还请指点一下，码字不易，请各位多多支持。

GPU云服务器云服务器 javascript事件流冒泡事件事件冒泡事件冒泡机制

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

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

javascript 事件流捕获与冒泡

摘要：捕获型事件流事件的传播是从最不特定的事件目标到最特定的事件目标。鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行，事件是可以被 JavaScript 侦测到的行为绑定事件首先我们要先绑定事件绑定事件有三种 1）在DOM元素中直接绑定，我们可以在DOM元素上绑定onclick、onmouseov...

aboutU 2019-08-30 15:54 评论0 收藏0
javascript -- 事件--事件流-- 冒泡 --捕获

摘要：在内联模型中，事件处理函数是标签的一个属性，用于处理指定事件。事件捕获与冒泡原理图事件流同时支持两种事件模型捕获型事件和冒泡型事件，但是，捕获型事件先发生。 javascript -- 事件事件是js和用户操作交互的桥梁, JavaScript 有三种事件模型：内联模型、脚本模型和 DOM2 模型内联模型这种模型是最传统接单的一种处理事件的方法。在内联模型中，事件处理函数是 HT...

leeon 2019-08-26 11:38 评论0 收藏0
理解DOM事件流的三个阶段

摘要：本文主要解决两个问题什么是事件流事件流的三个阶段起因在学习前端的大半年来，对事件了解甚少。事件流所描述的就是从页面中接受事件的顺序。事件流事件流包括三个阶段。防止事件冒泡而带来不必要的错误和困扰。分有事件冒泡与事件捕获两种。本文主要解决两个问题：什么是事件流 DOM事件流的三个阶段起因在学习前端的大半年来，对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。...

xiangzhihong 2019-08-19 17:38 评论0 收藏0
理解DOM事件流的三个阶段

摘要：本文主要解决两个问题什么是事件流事件流的三个阶段起因在学习前端的大半年来，对事件了解甚少。事件流所描述的就是从页面中接受事件的顺序。事件流事件流包括三个阶段。防止事件冒泡而带来不必要的错误和困扰。分有事件冒泡与事件捕获两种。本文主要解决两个问题：什么是事件流 DOM事件流的三个阶段起因在学习前端的大半年来，对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。...

afishhhhh 2019-08-01 15:04 评论0 收藏0