事件的使用

文章目录

目录

文章目录

一、事件是什么？

二、事件的组成

三、事件对象event

(1)获取event对象的方式：

(2)event的作用

四、事件的分类

(1)鼠标事件 

(2)表单事件

(3)键盘事件 

---

一、事件是什么？

事件就是在文档中或者在浏览器窗口中通过某些动作触发。比如，单击，鼠标经过，键盘按下等。事件通常和函数结合使用使用

二、事件的组成

事件由事件源、事件类型、事件处理函数组成

三、事件对象event

event 任何事件的触发都会产生

(1)获取event对象的方式：

• 通过动态绑定的事件，通过形参获取，也可以是window.event

• 行内事件是通过window.event获取

(2)event的作用

• 获取坐标

  event.clientX/event.clientY  相对于可视区的坐标
     
  event.screenX/event.screenY  相对于屏幕的坐标
     
  event.offsetX/event.offsetY  相对于元素的坐标
     
  event.pageX/event.pageY  相对于文档的坐标

• 阻止事件冒泡

  事件冒泡：触发子元素身上的事件时也会触发父元素身上的事件
     
  阻止冒泡：event.stopPropagation()
  

  获取事件源,到底从哪个标签触发的事件：event.target()

  获取当前节点对象名称:event.target.nodeName

  获取当前节点对象类型event.type

四、事件的分类

(1)鼠标事件 

• onclick鼠标点击

• ondblclick   鼠标双击

• onmouseover 鼠标移入，即鼠标停留在元素上方

• onmouseout 鼠标移出

• onmousemove 鼠标鼠标移动时，即鼠标在元素上不断地移动时

• onmouseup  事件会在鼠标按键被松开时发生

• onmousedown 事件会在鼠标按键被按下时发生

(2)表单事件

• onblur 指定元素失去焦点(光标没了)

• onfocus 指定元素获取焦点(点击出现光标)

• onchange 改变内容时发生

• oninput 输入内容时发生

(3)键盘事件 

• onkeydown 键盘按下时触发

• onkeyup 键盘松开时触发

• onkeypress 键盘按下并抬起时触发

---

总结
以上就是今天要讲的内容，本文仅仅简单介绍了什么是事件，事件的组成，事件对象，键盘事件、鼠标事件、键盘事件。