2024/02/12
在js中，有很多种的事件监听
常见的鼠标事件监听
事件名 事件描述
onclick 当鼠标单机某个对象
ondblclick 当鼠标双击某个对象
onmousedown 当某个鼠标按键在某个对象上被按下
onmouseup 当某个鼠标按键在某个对象上被松开
onmousemove 当某个鼠标按键在某个对象上被移动
onmouseenter 当鼠标进入某个对象（相似事件onmouseover）
onmouseleave 当鼠标离开某个对象（相似事件onmouseout）
常见的键盘事件监听
事件名 事件描述
onkeypress 当某个键盘的键被按下（系统按钮，如箭头键和功能键无法得到识别）
onkeydown 当某个键盘的键被按下（系统按钮可以识别，并且会先于onkeypress发生）
onkeyup 当某个键盘的键被松开
常见的表单事件监听
事件名 事件描述
onchange
当用户改变某个表单域的内容时，会触发
onfocus 当某元素获得焦点（比如tab键或鼠标点击）
onblur 当某元素失去焦点
onsubmit 当表单被提交
onreset 当表单被重置
常见的页面事件监听
事件名 事件描述
onload 当页面或图像被完成加载
onunload 当用户退出页面
对于事件监听有两种方法，一种通过html标签中的事件属性进行绑定
还有就是通过dom元素属性进行绑定
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>JSP - Hello World</title>
</head>
<body id="whw">
<h1><%= "Hello World!" %></h1>
<button type="button" id="bt1" onclick="on()">按钮1</button>
<button type="button" id="id2" >按钮2</button>
<form action="" style="text-align: center" id="ddd">
<input type="text" name="username" onblur="onbr()" onfocus="onfus()" onkeydown="onkeydn()">
<input id="b1" type="submit" value="提交">
</form>
<table width="800px" border="1" cellspacing="0" align="center" onmouseover="onmousr()" onmouseout="onmousut()">
<tr>
<th>hhh</th>
<th>666</th>
</tr>
<tr>
<th>www</th>
<th>888</th>
</tr>
</table>
<div id="hhh"></div>
<script>
//两种监听按钮点击事件的的方式
function on(){
document.getElementById("hhh").innerHTML="<img src='img/image.png'></img>"
}
document.getElementById("id2").onclick=function ()
{
document.getElementById("hhh").innerHTML="<img src='img/image1.png'></img>"
}
function onld()
{
alert("页面加载完成");
}
document.getElementById("whw").onload=function ()
{
alert("页面加载完成");
}
function onsubt()
{
alert("提交完成");
}
document.getElementById("ddd").onsubmit=function ()
{
alert("提交完成");
}
// 获得焦点和失去焦点如果用alert会卡bug
function onbr()
{
console.log("失焦");
}
function onfus()
{
console.log("获得焦点")
}
function onkeydn()
{
alert("按下键盘");
}
function onmousr()
{
alert("鼠标放回");
}
function onmousut()
{
alert("鼠标移开");
}
</script>
</body>
</html>
