那些常用的作用在HTML标签上的事件是不是这些，有没有遗漏？

最新推荐文章于 2021-06-10 11:26:58 发布

代码哒搬运工

最新推荐文章于 2021-06-10 11:26:58 发布

阅读量287

点赞数 1

分类专栏：前端 html javascript 文章标签： javascript html5 html 前端

本文链接：https://blog.csdn.net/weixin_45788388/article/details/105993169

版权

前端同时被 3 个专栏收录

45 篇文章 0 订阅

订阅专栏

html

43 篇文章 0 订阅

订阅专栏

javascript

33 篇文章 0 订阅

订阅专栏

之前介绍了JS事件，今天主要来介绍常用的事件都有哪些，今天介绍的事件都是作用在HTML标签上的事件。

点击事件
onclick：单击
ondblclick：双击
鼠标事件
onmouseover：鼠标移动到元素上
onmouseout：鼠标从元素上离开
onmousedown：鼠标按下
onmouseup：鼠标释放
onmousemove：鼠标移动
输入事件
onblur：元素失去焦点
onchange：域的内容被修改，域一般是输入框/下拉框/多行输入框/文件上传控件
onfocus：元素获得焦点
onselect：输入框文本被选取时
onsubmit：点击提交按钮
onreset：点击重置按钮
onkeydown：按下某个键
onkeyup：释放按键
onkeypress：按下某个键，不识别功能键，在onkeydown之后
加载事件
onload：页面/图片加载后
onabort：图片加载被中断
onerror：当图片加载时发生错误
onunload：当浏览器关闭文档时
onresize：当窗口或框架大小被调整时
获取按键码/鼠标光标的坐标
按键的事件可以传一个event参数，我们可以从event参数里获取到按键码的信息，写个小例子：

<!DOCTYPE html>
<html>
<head>
<script>

function myFunction(e) {

document.getElementById("keycode").innerHTML = e.keyCode;
}

</script>
</head>
<body>

<p id="keycode"></p>
<input type="text" onkeydown="myFunction(event)">

</body>
</html>

获取鼠标光标坐标和获取按键码类似，只是换成从鼠标事件里取相应的属性。写个小例子：

<!DOCTYPE html>
<html>
<head>
<script>

function getxy(event) {
  document.getElementById("demo").innerHTML = "X= " + event.clientX + "<br>Y= " + event.clientY;
}

</script>
</head>

<body>

<div style="width:100px;height:100px;background:red;" onmousedown="getxy(event)"></div>

<p id="demo"></p>

</body>
</html>