Web APIs 第二弹 学习笔记

Dom事件基础

一、事件监听(绑定)

1.事件监听

①什么是事件?

事件是在编程时系统内发生的动作或者发生的事情,例如用户在网页上单击或双击一个按钮

②什么是事件监听

就是让程序检测是否有事件产生,一旦有事件触发,就会调用函数去做出响应,也称为绑定事件或者注册事件。 例如鼠标方在下拉菜单上,显示下拉列表。

事件监听的语法:元素对象.addEventListener('事件类型',要执行的函数)

事件监听三要素:

事件源:那个dom元素被事件触发了,要获取dom元素

事件类型:用什么方式触发,比如鼠标单击click、鼠标经过mouseover等

事件调用的函数:要做什么事儿

③事件监听版本

发展史:

二、事件类型

①鼠标事件②焦点事件③键盘事件④文本事件

三、事件对象

1.获取事件对象 

①事件对象是什么

是对象里面有事件触发时的相关信息

② 使用场景

可以判断用户按下那个键,(键盘上的任意一个键都可以指定事件,感觉类似于快捷键),可以判断鼠标点击了那个元素,从而做出相应的操作。

③获取时间对象

如何获取:在事件绑定的回调函数的第一个参数就是事件对象,一般命名为event、ev、e,元素.addEventListener('click',function(e){})      //e就是事件对象

部分常用属性:

type:获取当前的事件类型

clientX/clientY:获取光标相当于浏览器可见窗口左上角的位置

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

key:用户按下的键盘键的值;现在不提倡使用keyCode

四、环境对象

①环境对象:指的是函数内部特殊的变量 this,它代表着当前函数运行时所处的环境

②作用:弄清楚this的指向,this指代的对象也不同

this指向的出略规则:谁调用,this就是谁

直接调用函数,其实相当关于是window.函数,所以this指代window

五、回调函数

1.什么是回调函数?

如果将函数A作为参数传递给函数B时,我们称函数A为回调函数(就是当一个函数当做参数来传递给另外一个函数的时候,这个函数就是回调函数)

相关推荐

  1. 笔记第二

    2024-07-22 02:46:04       20 阅读
  2. 第一:HTML,学习记录

    2024-07-22 02:46:04       26 阅读
  3. 第二:走进CSS世界,学习记录

    2024-07-22 02:46:04       27 阅读
  4. Flutter第二:Widget

    2024-07-22 02:46:04       33 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-22 02:46:04       52 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-22 02:46:04       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-22 02:46:04       45 阅读
  4. Python语言-面向对象

    2024-07-22 02:46:04       55 阅读

热门阅读

  1. Xcode代码静态分析:构建无缺陷代码的秘诀

    2024-07-22 02:46:04       18 阅读
  2. 半监督学习 原理与代码实例讲解

    2024-07-22 02:46:04       20 阅读
  3. 初学Mybatis之 CRUD 增删改查

    2024-07-22 02:46:04       14 阅读
  4. TensorFlow 的基本概念和使用场景

    2024-07-22 02:46:04       16 阅读
  5. Windows图形界面(GUI)-DLG-C/C++ - 列表视图(ListView)

    2024-07-22 02:46:04       20 阅读
  6. 大规模语言模型从理论到实践 高效模型微调

    2024-07-22 02:46:04       17 阅读
  7. [11 Qt CMake开发]

    2024-07-22 02:46:04       21 阅读
  8. 显示隐式-》初始化 & 类型转换

    2024-07-22 02:46:04       17 阅读
  9. ReentrantLock源码

    2024-07-22 02:46:04       17 阅读
  10. 向量数据库Milvus

    2024-07-22 02:46:04       21 阅读
  11. 在 ASP.NET Core Web API 中实现审计跟踪

    2024-07-22 02:46:04       14 阅读
  12. leetcode-56. 合并区间

    2024-07-22 02:46:04       17 阅读