JS事件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44431280/article/details/126943600

JS基础—事件学习

思维导图文章整体框架 在这里插入图片描述

一：事件基础：

事件简介：JS使Web页面具有动态性，而事件是可以被JS侦测到的行为，可以简单理解事件就是触发–响应的一个机制，例如我们通过用户点击某按钮时产生一个事件，然后执行某些操作。
事件特点：网页中的每个元素都可以产生触发JS的事件
事件三要素：
1，事件源：事件被触发的对象，谁触发，例如按钮等
2，事件类型：触发事件的类型，如何触发，比如鼠标点击，鼠标经过，键盘按下
3，事件处理程序：通过函数赋值的方式完成

二：代码练习

说明：通过基本的JS代码练习事件的触发和效果，其他不同类型的事件替换代码中的onclick即可

代码练习：
<!--事件三要素，事件源,事件类型,事件处理程序-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML事件学习</title>
</head>
<body>
<input id="event" type="submit" name="name">     <!--事件源：submit提交框-->
<script>
  var kkk = document.getElementById('event');     <!--获取事件源，确定事件类型为onclick-->
  kkk.οnclick=function() {                       <!--事件处理程序-->
    alert('真不错');
  }
</script>
</body>
</html>

三：常见事件类型：

1，鼠标事件：

onclick:鼠标单击事件
ondblclick：鼠标双击事件
onmousedown：鼠标按钮被按下（和onclick不同的是，点击鼠标右键也会触发该事件） oncontextmenu:鼠标点击右键触发
onmouseover：鼠标经过触发
onmouseup：鼠标按下后，松开时触发的事件
onmousemove:鼠标移动到事件源触发的事件
onmouseout：鼠标离开某事件源对象范围时触发的事件

2，键盘事件：

onkeypress:当键盘上的某个键被按下并且释放触发的事件/页面内必须有被聚焦的对象(将type值通过button替换为text即可)
onkeydown:当键盘上的某个按钮被按下时触发的事件/页面内必须有被聚焦的对象(将type值通过button替换为text即可)
onkeyup：当键盘上的某个按钮被按放开时触发的事件/页面内必须有被聚焦的对象(将type值通过button替换为text即可)

3，表单事件：

onfocus:表单获得焦点触发
onblur：表单失去焦点触发
oninput：表单每次输入触发
onchange：表单内容发生改变时触发
onselect：表单文本被选取时触发
onreset:表单重置时触发
onsubmit：表单提交时触发