【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

相关文章

Android Mainline基础简介

《AndroidMainline基础简介》AndroidMainline是通过模块化更新Android核心组件的框架,可能提高安全性,本文给大家介绍AndroidMainline基础简介,感兴趣的朋... 目录关键要点什么是 android Mainline?Android Mainline 的工作原理关键

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

mysql的基础语句和外键查询及其语句详解(推荐)

《mysql的基础语句和外键查询及其语句详解(推荐)》:本文主要介绍mysql的基础语句和外键查询及其语句详解(推荐),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋... 目录一、mysql 基础语句1. 数据库操作 创建数据库2. 表操作 创建表3. CRUD 操作二、外键

Python基础语法中defaultdict的使用小结

《Python基础语法中defaultdict的使用小结》Python的defaultdict是collections模块中提供的一种特殊的字典类型,它与普通的字典(dict)有着相似的功能,本文主要... 目录示例1示例2python的defaultdict是collections模块中提供的一种特殊的字

Python基础文件操作方法超详细讲解(详解版)

《Python基础文件操作方法超详细讲解(详解版)》文件就是操作系统为用户或应用程序提供的一个读写硬盘的虚拟单位,文件的核心操作就是读和写,:本文主要介绍Python基础文件操作方法超详细讲解的相... 目录一、文件操作1. 文件打开与关闭1.1 打开文件1.2 关闭文件2. 访问模式及说明二、文件读写1.

用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