首页 > 其他分享 >WebAPI_DAY4

WebAPI_DAY4

时间:2023-02-03 01:44:18浏览次数:38  
标签:WebAPI 事件处理 DAY4 元素 事件 注册 捕获 冒泡

事件对象(e)

常用属性

type:当前事件类型

clientX/clientY:光标相对于左上角的位置

offsetX/offsetY:光标相对于当前DOM元素左上角位置

key:用户按下的键盘键的值




事件流

事件捕获->事件冒泡:逐级向下寻找,再逐级向上冒泡触发




阻止事件流动

因为默认冒泡模式,所以很容易导致事件影响到父级元素

如果想把事件限制在当前元素内,就需要阻止事件流动

事件对象.stopPropagation()

鼠标经过事件

mouseover和mouseout会有冒泡效果

mouseenter和mouseleave没有冒泡效果(推荐)


阻止默认行为

比如链接点击不跳转

e.preventDefault()



两种注册事件的区别

传统on注册(L0)

  • 同一个对象,后面注册的事件会覆盖前面注册(同-一个事件)
  • 直接使用null覆盖偶就可以实现事件的解绑
  • 都是冒泡阶段执行的

事件监听注册(L2)

  • 语法: addEventListener(事件类型,事件处理函数,是否使用捕获)
  • 后面注册的事件不会覆盖前面注册的事件(同一个事件)
  • 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
  • 必须使用removeEventListener(事件类型,事件处理函数,获取捕获或者冒泡阶段)
  • 匿名函数无法被解绑



事件委托

将子元素的事件统一委托给父元素,而不是子元素各自创建事件

  • 优点:给父级元素加事件(可以提高性能)
  • 原理:事件委托其实是利用事件冒泡的特点,给父元素添加事件,子元素可以触发
  • 实现:事件对象.target可以获得真正触发事件的元素

标签:WebAPI,事件处理,DAY4,元素,事件,注册,捕获,冒泡
From: https://www.cnblogs.com/exungsh/p/17087881.html

相关文章

  • drf-day4——序列化类常用字段和字段参数、序列化类source用法、序列化类定制字段返回
    目录一、序列化类常用字段和字段参数(了解)1.1常用字段类1.2常用字段参数选项参数:通用参数:重点二、序列化高级用法之source(了解)2.1序列化定制字段名字三、序列化高级用......
  • 【YBT2023寒假Day4 A】网格染色(DP)(矩阵乘法)(DFT)
    网格染色题目链接:YBT2023寒假Day4A题目大意有一个n*3的网格,你可以选恰好m个格子染成黑色。然后对于一个黑点,我们对它周围的\(8\)个点中的一些有限制不能是黑点,......
  • WebAPI_DAY3
    DOM节点DOM树里每一个内容都称之为节点元素节点:如body、div属性节点:如href、src文本节点:所有的文本其他查找节点节点关系:父节点parentNode属性返回最近......
  • WebAPI_DAY2
    事件编程时系统发生的动作或发生的事情(如单击一个按钮)事件监听程序检测是否有事件产生,一旦事件触发,就立即调用一个函数作出响应,称为注册事件语法元素.addEventListene......
  • golang-day4函数
    斐波那契数列三种实现方式1、循环实现funcfib1(nint)int{ //完整逻辑 switch{ casen<0: panic("nisnegative") casen==0: return0 casen==1......
  • WebAPI_DAY1
    WebAPI作用:使用JS去操作html和浏览器分类:DOM(文档对象类型)、BOM(浏览器对象类型)DOM(DocumentObjectModel)浏览器提供的一套专门用来操作网页内容的功能开发网页特效、......
  • Dynamics CRM Online WebAPI
    创建应用1.登录https://portal.azure.com/#home2.选择AzureActiveDirectory3.在注册应用程序页面中输入应用程序的注册信息3.1添加应用程序3.2填写应用程序注册......
  • dev xaf MiddleTierWebApi 如何实现数据库自动更新或创建;.Net中Main函数传参
    .net7如何在程序启动时,向Main函数传参?在命令行中输入参数即可,可以参考下文内容中命令。.net6如何在程序启动时,向Main函数传参?在命令行中输入参数即可,可以参考下文内容......
  • 数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web
    文章目录​​高德地图开发系列文章目录​​​​前言​​​​一、项目说明​​​​二、核心代码开发​​​​1.引入库​​​​2.构建DOM容器​​​​3.高德地图开发​​​​(1......
  • Linux学习-DAY4
    一、系统状态检测命令1.ifconfig命令ifconfig命令用于获取网卡配置与网络状态等信息,英文全称为“interfaceconfig”,语法格式为“ifconfig[参数][网络设备]”。2.​uname......