javascript 事件处理机制

最新推荐文章于 2024-02-08 07:45:00 发布
最新推荐文章于 2024-02-08 07:45:00 发布
阅读量220 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36416878/article/details/108658391
版权

一直以为事件只有绑定了才会有，在一场面试被虐了，所以写文章好好记录下来。

<html>
<head>
  <title>test</title>
</head>
<body>

  <div>点我</div>

</body>
</html>

 这样一个结构，当点击div的时候，

  1. 捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
  2. 目标阶段：真正的目标节点正在处理事件的阶段；
  3. 冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。

事件捕获，点击了div，执行顺序是document>html>body>div

事件捕获指的是「从启动事件的元素节点开始，逐层往下传递」，直到最下层节点，也就是div。

事件冒泡

 

 

 

先从html事件捕获到目标元素，再冒泡到html元素。

qq_36416878
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML DOM 事件
akuibpt23191的博客
07-13 540
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
addEventListener的第三个参数
九天翔龙的技术博客
09-14 2382
大家都知道 addEventListener 可以给对象添加事件监听。百度，w3school 对它的解释，有三个参数，语法格式如下： el.addEventListener(type, listener[, useCapture]) el：事件对象。比如，某个标签，window，document 对象等等。 type：事件类型，click、mouseenter 等 listener：事件处...
vue 自定义指令中：addEventlistener监听事件函数传参，使用removeEventListener解绑
qq_38416502的博客
04-25 3103
上面我们在自定义指令的时候在mounted中对dom添加事件监听，在beforeUnmount中进行事件解绑，但是第二个参数是匿名函数，所以add和remove的函数不是同一个所以参数不一致，remove是无效的。一般在组件中使用addeventlistener添加事件监听的时候，在组件销毁的时候都要使用removeEventListener进行销毁，不然会造成内存泄漏。上面这样写确实可以消除掉绑定的事件，但是无法进行参数的传递无法再函数中使用el，biinding等参数。
element.addEventListener DOM事件模型
梦想狂奔的专栏
12-18 1721
https://developer.mozilla.org/zh-CN/docs/DOM/element.addEventListener 概述 addEventListener() registers a single event listener on a single target. The event target may be a single element in
前端JavaScript篇之addEventListener()方法的参数和使用
最新发布
星辰迷上大海的博客
02-08 2661
addEventListener() 是 JavaScript 中用于向指定元素添加事件监听器的方法。这个方法通常用于处理用户交互，比如点击、鼠标悬停等操作。
Javascript的事件处理机制
03-01
事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水。当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些...
浅谈 javascript 事件处理
10-24
本文向大家简单介绍了javascript的事件处理机制，从事件源，事件操作到事件处理程序都做了简单介绍，并给出了部分示例，这里推荐给大家。
JavaScript的事件机制详解
10-20
事件是将JavaScript脚本与网页联系在一起的主要方式，是JavaScript中最重要的主题之一...本文将详细探讨JavaScript的事件机制，并对比分析了浏览器之间的不同，具体内容包括事件流、事件处理程序绑定方式、事件对象等。
简介JavaScript错误处理机制
10-15
主要介绍了JavaScript错误处理机制的相关资料，文中讲解非常细致，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
dom常用事件介绍
qq_2511276124的博客
12-13 331
dom常用事件介绍。
关于浏览器事件addEventListener()处理小记
RexingLeung的博客
03-27 788
前言 当浏览器与对象 , 元素发生互动时 , 浏览器会产生对应的事件 , 例如 : 浏览器加载完文档 , 用户把鼠标指针移动超链接上或者敲击键盘等 , 浏览器都会产生事件 , 而且JavaScript还可以对一些特定类型的事件进行函数绑定以做一些自定义的事件 EventTarget.addEventListener() EventTarget.addEventListener() 方法将指定...
EventBus3.0源码简析
养生阿华田
08-28 277
本文主要通过源码讲解EventBus的内部实现，如果还没有使用过该框架的朋友，可以先参考这篇文章 Android事件总线（一）EventBus3.0用法全解析
事件addEventListener（）参数及事件汇总
qq_46344419的博客
04-23 3231
addEventListener（）参数及事件汇总
JS自定义事件
qq_41536505的博客
04-25 1947
js的自定义事件可以用CustomEvent这个构造函数来创建，它的方法有dispatchEvent、addEventListener、removeEventListener等
自定义事件的注册与触发（$on $emit addEventListener dispatchEvent）
路漫漫其修远兮
07-14 551
vue自定义事件的注册与触发
antd4里table的滚动是如何实现的？
caicsama的博客
02-27 1704
rc-table里水平滚动如何实现？
android dom click事件,EventTarget事件：click
weixin_33228769的博客
05-29 351
EventTarget事件 - click当在单个元素上按下并释放指示设备按钮(例如，鼠标的主按钮)时，click事件触发。如果按下一个元素上的按钮并在另一个元素上释放，则会在包含这两个元素的最具体的祖先元素上触发该事件。按顺序单击mousedown和mouseup事件后触发click。接口MouseEvent同步/异步同步是否冒泡是是否可取消是目标Element组成的是默认操作不定属性属性类型描...
js使用自定义监听事件
songJunFeng1的博客
10-19 155
【代码】js使用自定义监听事件。
【JS】自定义JS工具函数库-封装DOM事件监听addEventListener-自定义事件总线eventBus-自定义消息订阅与发布PubSub
YK菌的博客
04-25 635
文章目录1. 封装DOM事件监听addEventListener1.1 复习DOM事件流1.2 事件冒泡1.3 事件委托1.4 自定义DOM事件监听2. 自定义事件总线eventBus定义使用3. 自定义消息订阅与发布PubSub定义使用 1. 封装DOM事件监听addEventListener 1.1 复习DOM事件流 基础知识可以参考这篇博文 【DOM】JavaScript-事件高级-注册事件-事件流-事件对象-事件冒泡-委派-鼠标键盘事件 简单复习一下DOM事件流 捕获阶段 当前目标阶段 冒泡阶段
jQuery事件处理机制
05-24
jQuery事件处理机制是通过绑定事件处理程序来实现的。jQuery提供了一些方法来绑定事件处理程序，例如`on()`、`click()`、`keydown()`等等。 当事件被触发时，jQuery会将事件对象作为第一个参数传递给事件处理程序。事件对象包含有关事件的信息，例如事件类型、目标元素、鼠标位置等等。 jQuery事件处理机制也支持事件委托。通过事件委托，可以将事件处理程序绑定到父元素上，而不是直接绑定到子元素上。当事件被触发时，jQuery会检查事件目标是否匹配选择器，如果匹配，则执行事件处理程序。 以下是一个使用`on()`方法绑定事件处理程序的例子： ```javascript $(document).on('click', '#myButton', function(event) { // 处理点击事件 }); ``` 这个例子将事件处理程序绑定到`document`元素上，并且只有当点击`id`为`myButton`的元素时才会执行事件处理程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值