webAPI第二天-Dom事件基础

Dom事件基础

1.1 事件监听

目标:能够给 DOM元素添加事件监听
 什么是事件?
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
 什么是事件监听?
就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 绑定事件或者注册事件
比如鼠标经过显示下拉菜单,比如点击可以播放轮播图等等

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级事件的基础上重新定义了这些事件,也添加了一些新事件类型

 

事件类型

鼠标事件:click(点击事件),mouseenter(鼠标经过),mouseleave(鼠标离开)
焦点事件:focus(获得焦点),blur(失去焦点)
键盘事件:keydown(键盘按下),keyup(键盘抬起触发)
文本事件:input(用户输入事件),change(改变事件)

 

 

获取事件对象

目标:能说出什么是事件对象
 事件对象是什么
 也是个对象,这个对象里有事件触发时的相关信息
 例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息
 使用场景
可以判断用户按下哪个键,比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素,从而做相应的操作

事件对象常用属性

目标:能够使用常见事件对象属性

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

 

环境对象

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

回调函数

目标:能够说出什么是回调函数
如果将函数 A 做为参数传递给函数 B 时,我们称函数 A 为回调函数
简单理解: 当一个函数当做参数来传递给另外一个函数的时候,这个函数就是回调函数
 常见的使用场景:

回调函数
 把函数当做另外一个函数的参数传递,这个函数就叫回调函数
 回调函数本质还是函数,只不过把它当成参数使用
 使用匿名函数做为回调函数比较常见

版权声明:
作者:zhuim521
链接:https://zhuimwl.com/109.html
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
webAPI第二天-Dom事件基础
Dom事件基础 1.1 事件监听 目标:能够给 DOM元素添加事件监听  什么是事件? 事件是在编程时系统内发生的动作或者发生的事情 比如用户在网页上单击一个按钮 ……
<<上一篇
下一篇>>