JavaScript进阶笔记——事件、事件监听注册删除事件、事件对象、事件委托、鼠标事件

事件

事件三要素：

1. 事件源，即事件被触发的对象，比如某button
2. 事件类型，如何触发 比如鼠标单击（onclick）
3. 事件处理程序，通过一个函数赋值的方式完成

 

 

事件监听注册事件：

eventTarget . addEventListener( type, listener , （useCapture）)

type：事件类型字符串，比如click，mouseover，不需要加on

listener：事件处理函数，事件发生时，会调用该监听函数

事件监听删除事件：

eventTarget . removeEventListener( type, listener , （useCapture）)

 

事件对象：

• 事件对象是我们事件的一系列相关数据的集合
• 事件对象只有有了事件才会存在，它是系统给我们自动创建的
• event就是一个事件对象，代表事件的状态，写到我们监听函数里的小括号里，作为形参

事件对象属性及方法（标准）	说明
e.target	返回触发事件的对象
e.type	返回触发事件的类型
e.stopPropagation()	阻止冒泡
e.preventDefault()	阻止默认事件

 

事件委托：

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

事件委托可以提高系统的性能，因为可以减少了操作DOM的次数

addEventListener可选type

contextmenu  禁用鼠标右键

selectstart  禁用鼠标选中

在方法中写preventDefault方法即可

 

 

鼠标事件对象

e.pageX和e.pageY能获取鼠标的x和y坐标

键盘事件

onkeypress  某个键盘按键被按下时触发，不识别功能键

onkeydown 某个键盘按键被按下时触发

onkeyup  某个键盘按键被松开时触发

利用DOM可以操作如下表单元素的属性：

type，value，checked，selected，disabled

• 表单里面的值（文字）是通过value来修改的
• 想要禁用按钮要用disabled

 

鼠标事件

 

得到焦点（鼠标点击元素之后）

element.onfocus

 

失去焦点(鼠标点击元素以外的地方)

element.onblur

 

鼠标经过

element.onmouseover

鼠标离开

element.onmouseout