【JavaScript - Web API】事件高级（注册删除事件 / DOM事件流 / 阻止事件冒泡 / 事件委托 / 常用鼠标键盘事件）

已于 2022-05-24 17:38:23 修改
阅读量429 收藏
点赞数 1
分类专栏： 前端 文章标签： 前端 javascript 开发语言 html
于 2022-05-19 20:40:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30148319/article/details/124865007
版权

学习视频以及笔记参考来源：

JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

一、注册事件

1、概述

2、addEventListener 事件监听方式

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对 象触发指定的事件时，就会执行事件处理函数。

 eventTarget.addEventListener(type, listener[, useCapture])
  • type： 事件类型字符串，比如 click 、mouseover ，注意这里不要带 on。
  • listener： 事件处理函数 [ function() {} ]，事件发生时，会调用该监听函数。
  • useCapture：可选参数，是一个布尔值，默认是 false。true 表示事件捕获阶段，false或者不写表示时间冒泡阶段（在事件冒泡知识点说明）。

二、删除事件

传统注册方式 eventTarget.onclick = null;
方法监听注册方式 eventTarget.removeEventListener(type, listener[, useCapture]);

三、DOM 事件流

1、概述

 2、代码验证（冒泡 / 捕获）

<body>
    <div class="father">
        <div class=&#
最低0.47元/天 解锁文章
咕啾啾
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript事件发布/订阅模式原理与用法分析
10-18
主要介绍了JavaScript事件发布/订阅模式,结合实例形式简单分析了javascript发布/订阅模式的概念、原理及简单使用方法,需要的朋友可以参考下
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
11-29
抽空学习了下javascript和jquery的事件设计，收获颇大，总结此贴，和大家分享。 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式：在html文档中绑定、在js代码中绑定。下面的方式1、方式2...
JS基础-18-addEventListener和冒泡
HZ~的博客
08-03 1173
绑定事件的两种方式/DOM事件的级别 方式一：onclick element.onclick = function () { } 举例： <body> <button>点我</button> <script> var btn = document.getElementsByTagName("button")[0]; //这种事件绑定的方法容易被层叠。 btn.onclick = function () {
事件高级(javascript-注册事件-删除事件-DOM事件流-事件对象-事件冒泡-事件委托-鼠标事件-键盘事件-模拟京东按键输入内容案例)
zinc1234596的博客
02-18 392
事件高级 ▲1.注册事件(绑定事件) 1.1注册事件概述 给元素添加事件，称为注册事件或者绑定事件。 注册事件有两种方式：传统方式和方法监听注册方式 传统注册方式 利用 on 开头的事件 onclick <button onclick=“alert('hi~')”></button> btn.onclick = function() {} 特点： 注册事件的唯一性 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 方法监听注册方式 w3c
Js-三大事件（鼠标事件、键盘事件、html事件）
热门推荐
qwer_df_b的博客
08-23 9万+
鼠标事件、键盘事件、html事件
js阻止冒泡事件发生(react)
秋叶原的黑猫的博客
11-29 689
其实就两个函数。
JS中键盘事件及keyCode对照表
汉堡请不要欺负面条
06-01 2万+
一.Keycode对照表二.键盘事件1.键盘事件：完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。keydown：按键按下keyup：按键抬起keypress：按键按下抬起2.使用时//jq的方式 $("input").keydown(function(){ $("input").css("background-color","#FFFFCC"); }); $(...
Javascript事件流（事件捕获、事件冒泡）,事件委托（代理）
01-08
Javascript事件流（事件捕获、事件冒泡）–>事件委托（代理） Javascript与HTML之间的交互是通过“事件”实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间，当我们与浏览器中的web页面进行特定的交互时...
javascript阻止事件冒泡和浏览器的默认行为
11-26
1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation()...
javascript 中事件冒泡和事件捕获机制的详解
01-19
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
JS——事件冒泡与阻止事件冒泡
Bonsoir777的博客
08-25 3374
本文主要介绍JS中有关事件流的相关知识点
JS学习762~780(注册事件+删除事件+DOM事件流+事件对象+阻止事件冒泡+事件委托鼠标事件+键盘事件)
m0_57809042的博客
09-26 634
给元素添加事件,称为或者。注册事件有两种方式:和传统注册方式方法监听注册方式eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。该方法接收三个参数: 1.3 attachEvent事件监听方式 eventTarget.attachEvent()方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,指定的回调函数就会被执行。该方法接收两个参数: 2 删除事
JS中不能冒泡的mouseenter，和mouseleave却冒泡了，而且一冒就停不下来
js中的递归问题
12-11 1875
今天练习用原生JS写物体运动的时候，发现一个事情，那就一直大家认为的不能冒泡的mouseenter，和mouseleave，冒泡了，而且一冒就停不下来。先上代码 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;am
事件冒泡以及onmouseenter 和 onmouseover 的不同
u012309349的博客
03-14 1万+
事件冒泡简介以及阻止事件冒泡的方法
html 点击事件阻止冒泡,js阻止事件冒泡的两种方法
weixin_36264801的博客
06-07 4187
本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ，有需要的朋友可以参考一下一、冒泡事件简介当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。方法一：event.stopPropagation( );例如：段落文本内容html代码：// 为所有p元素绑定click事件$("p").click( function(event){alert("p-click"...
阻止事件冒泡方法
weixin_57157220的博客
07-09 1万+
阻止事件冒泡方法 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不止事件向document上蔓延，但是默认事件任然会执行，当你调用这个方法的时候，如果点击一个连接，这个连接仍然会被打开 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法时，链接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素 3.return false; 这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件，不仅阻止了事件往上冒泡，而且阻止了事件本身
WebAPI之事件冒泡
qq_44899153的博客
06-19 225
//1.事件冒泡: 多个元素嵌套, 有层次关系, 这些元素都注册了相同的事件,如果里面的元素的事件触发了. 外面的元素也会自动地触发 由内到外触发 需要阻止事件冒泡 event.stopPropagation(); --------->谷歌和火狐支持的. ie8不支持 window.event.cancelBubble = true; // ------>ie8特有的, 谷歌支持. ...
【AngularJS学习】阻止事件冒泡
Wonder233的学习博客
12-18 1032
有时元素已经添加了click事件，但是它的子元素也添加了click事件。 由于事件是冒泡的，点击子元素事件后父元素事件也跟着出现点击行为。与原生JS一样，angularjs也有一个局部变量$event，即事件对象。 1、Angular支持的event： click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter
Antv/x6 - 鼠标事件
最新发布
08-17
Antv/x6 是一个基于 JavaScript 的图形绘制库，它提供了一些鼠标事件处理的方法和接口。以下是一些常用的鼠标事件及其对应的用法： 1. 'mouse:move' 事件：当鼠标移动时触发。 ```javascript const graph = new G6.Graph(...); graph.on('mouse:move', (evt) => { const { x, y } = evt; // 处理鼠标移动事件 }); ``` 2. 'node:mouseenter' 和 'node:mouseleave' 事件：当鼠标进入或离开节点时触发。 ```javascript const graph = new G6.Graph(...); graph.on('node:mouseenter', (evt) => { const { item } = evt; // 处理鼠标进入节点事件 }); graph.on('node:mouseleave', (evt) => { const { item } = evt; // 处理鼠标离开节点事件 }); ``` 3. 'edge:mouseenter' 和 'edge:mouseleave' 事件：当鼠标进入或离开边时触发。 ```javascript const graph = new G6.Graph(...); graph.on('edge:mouseenter', (evt) => { const { item } = evt; // 处理鼠标进入边事件 }); graph.on('edge:mouseleave', (evt) => { const { item } = evt; // 处理鼠标离开边事件 }); ``` 这只是一些常见的鼠标事件，Antv/x6 还提供了更多的鼠标事件和方法，你可以根据具体需求去查阅相关文档和示例。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值