【JS】Chapter7-Dom 事件基础

2023-11-03 02:12
文章标签 基础 js 事件 dom chapter7

本文主要是介绍【JS】Chapter7-Dom 事件基础,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

站在巨人的肩膀上

黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

(七)Dom 事件基础

1. 事件监听(绑定)

1.1 事件监听

  • 什么是事件?
    • 事件是在编程时系统内发生的动作或者发生的事情
    • 比如用户在网页上单击一个按钮
  • 什么是事件监听?
    • 就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为绑定事件或者注册事件
    • 比如鼠标经过显示下拉菜单,比如点击可以播放轮播图等等
  • 语法:
    元素对象.addEventListener('事件类型', 要执行的函数)
    
  • 事件监听三要素:
    • 事件源:那个dom元素被事件触发了,要获取dom元素
    • 事件类型:用什么方式触发,比如鼠标单击 click、鼠标经过 mouseover 等
    • 事件调用的函数:要做什么事
  • 例子:
    <button>按钮</button>
    <script>const btn = document.querySelector('.btn')// 修改元素样式btn.addEventListener('click', function() {alert('点击了~')})
    </script>
    
  • 注意:
    • 事件类型要加引号
    • 函数是点击之后再去执行,每次点击都会执行一次

1.2 拓展阅读——事件监听版本

  • DOM L0
    • 事件源.on事件 = function() { }
  • DOM L2
    • 事件源.addEventListener(事件,事件处理函数)
  • 区别:
    • on方式会被覆盖,addEventListener方式可绑定多次,拥有事件更多特性,推荐使用
  • 发展史:
    • DOM L0:是 DOM 的发展的第一个版本; L:level
    • DOM L1:DOM级别1 于1998年10月1日成为W3C推荐标准
    • DOM L2:使用addEventListener注册事件
    • DOM L3:DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件类型

2. 事件类型

  1. 鼠标事件(鼠标触发)
    • click 鼠标点击
    • mouseenter 鼠标经过
    • mouseleave 鼠标离开
  2. 焦点事件(表单获得光标)
    • focus 获得焦点
    • blur 失去焦点
  3. 键盘事件(键盘触发)
    • Keydown 键盘按下触发
    • Keyup 键盘抬起触发
  4. 文本事件(表单输入触发)
    • input 用户输入

3. 事件对象

3.1 获取事件对象

  • 事件对象是什么
    • 也是个对象,这个对象里有事件触发时的相关信息
    • 例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息
  • 使用场景
    • 可以判断用户按下哪个键,比如按下回车键可以发布新闻
    • 可以判断鼠标点击了哪个元素,从而做相应的操作
  • 语法:如何获取
    • 在事件绑定的回调函数的第一个参数就是事件对象
    • 一般命名为event、ev、e
  • 例子:
    元素.addEventListener('click', function(e) {    // e 即事件对象
    }
    

3.2 事件对象常用属性

部分常用属性:

  • type
    • 获取当前的事件类型
  • clientX/clientY
    • 获取光标相对于浏览器可见窗口左上角的位置
  • offsetX/offsetY
    • 获取光标相对于当前DOM元素左上角的位置
  • key
    • 用户按下的键盘键的值
    • 现在不提倡使用keyCode

4. 环境对象

  • 环境对象:指的是函数内部特殊的变量 this,它代表着当前函数运行时所处的环境
  • 作用:弄清楚this的指向,可以让我们代码更简洁
    • 函数的调用方式不同,this 指代的对象也不同
    • 【谁调用,this 就是谁】 是判断 this 指向的粗略规则
    • 直接调用函数,其实相当于是 window.函数,所以 this 指代 window

5. 回调函数

  • 如果将函数 A 做为参数传递给函数 B 时,我们称函数 A 为回调函数。
  • 简单理解: 当一个函数当做参数来传递给另外一个函数的时候,这个函数就是回调函数。
  • 常见的使用场景:
    function fn() {console.log('我是回调函数...')
    }
    // fn 传递给了 setInterval,fn就是回调函数
    setInterval(fn, 1000)box.addEventListener('click', function() {console.log('我也是回调函数...') 
    }
    
  • 回调函数本质还是函数,只不过把它当成参数使用。
  • 使用匿名函数做为回调函数比较常见。

这篇关于【JS】Chapter7-Dom 事件基础的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/334863

相关文章

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

C#如何动态创建Label,及动态label事件

《C#如何动态创建Label,及动态label事件》:本文主要介绍C#如何动态创建Label,及动态label事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#如何动态创建Label,及动态label事件第一点:switch中的生成我们的label事件接着,

C#基础之委托详解(Delegate)

《C#基础之委托详解(Delegate)》:本文主要介绍C#基础之委托(Delegate),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 委托定义2. 委托实例化3. 多播委托(Multicast Delegates)4. 委托的用途事件处理回调函数LINQ

spring @EventListener 事件与监听的示例详解

《spring@EventListener事件与监听的示例详解》本文介绍了自定义Spring事件和监听器的方法,包括如何发布事件、监听事件以及如何处理异步事件,通过示例代码和日志,展示了事件的顺序... 目录1、自定义Application Event2、自定义监听3、测试4、源代码5、其他5.1 顺序执行

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》:本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

《0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeekR1模型的操作流程》DeepSeekR1模型凭借其强大的自然语言处理能力,在未来具有广阔的应用前景,有望在多个领域发... 目录0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型,3步搞定一个应

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

MySQL中my.ini文件的基础配置和优化配置方式

《MySQL中my.ini文件的基础配置和优化配置方式》文章讨论了数据库异步同步的优化思路,包括三个主要方面:幂等性、时序和延迟,作者还分享了MySQL配置文件的优化经验,并鼓励读者提供支持... 目录mysql my.ini文件的配置和优化配置优化思路MySQL配置文件优化总结MySQL my.ini文件