当前位置：首页 > news >正文

JavaScript小记——事件

news 2025/9/10 14:47:18

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

Html事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

事件绑定的方式

方式1：直接把事件绑定在HTML元素上

<button onclick="show('hello')">一个按钮</button>function show(str) {alert("点击事件执行了"+str);}

方式2：使用代码来绑定事件

<body><ul><li class="aa">01</li><li class="aa">02</li><li class="aa">03</li><li class="aa">04</li><li class="aa">05</li></ul></body><script>let a = document.getElementsByClassName("aa");a[0].onclick = function() {alert("第一个执行了");}</script>

方式3：绑定事件

 <input type="button" value="我的按钮" id="btn">let btn = document.getElementById("btn");var fun=function() {alert("按钮被点击了");}btn.addEventListener('click', fun);

事件解绑

<button id="btn">一个按钮</button>var b=function() {alert("222222")
}
btn.addEventListener("click",b)btn.removeEventListener("click",b);

常见的Html事件

焦点事件

针对表单项

onfocus 获取焦点

onblur 失去焦点

oninput 表单中内容发生变化时就触发

<body><input type="text" name="username" value="请输入用户名" onfocus="show1()"  oninput="show3()"><span id="sp"></span></body><script>function show1() {document.getElementsByName("username")[0].value=""; //获取焦点时 输入框变为空}function show3() {console.log("边输入边校验");let input = document.getElementsByName("username")[0];let content = input.value;let regx=/^[a-z]{6,16}$/i;let flag = regx.test(content);let sp = document.getElementById("sp");if(flag){input.style.border = "2px solid green";sp.innerHTML = "<b style='color: green'>格式正确</b>";}else {input.style.border = "2px solid red";sp.innerHTML = "<b style='color: red'>格式错误</b>";}}</script>

键盘事件

* onkeydown 某个键盘按键被按下。不区分键码的大小写

* onkeypress 某个键盘按键被按下并松开。区分键码的大小写 a 97 A 65

* onkeyup 某个键盘按键被松开。

<body><input type="text" onkeypress="show()"></body><script>function show() {let code = event.keyCode;if(code===97||code===65){console.log("往前跑");}console.log("按键按下了："+code)}</script>

鼠标事件

onmousedown 鼠标按下

onmouseup 鼠标松开

onmouseover 鼠标移上

onmouseout 鼠标移开

onmousemove 鼠标移动

<body><button id="btn" onmousedown="down()" onmouseup="up()" onmouseover="over()" onmouseout="out()" onmousemove="move()">一个按钮</button><div id="a"></div></body><script>function down() {//which 也可以获取鼠标的按键编号 1 左键  2滚轮   3右键// button 也可以获取鼠标的按键编号 0 左键  1滚轮   2右键let code = event.which;alert("鼠标按下了"+code);}function over() {document.getElementById("btn").style.backgroundColor = "red";}function out(){document.getElementById("btn").style.backgroundColor = "green";}let div = document.getElementById("a");var w = div.getBoundingClientRect().width;var h = div.getBoundingClientRect().height;div.onmousemove=function() {div.style.width = (w++)+"px";div.style.height = (h++) + "px";}</script>

表单事件

<body><form action="123.html" method="get" id="form" onsubmit="set()">用户名:<input type="text" name="username" placeholder="请输入6-16位字母" onblur="checkUsername()"><span id="a"></span><br>密码:<input type="password" name="password" placeholder="请输入密码" onblur="checkPassword()"><span id="b"></span><br><br><input type="submit" value="注册"><input type="reset" value="重置"></form></body><script>let myForm = document.getElementById("form");myForm.onsubmit=function() {return checkUsername&&checkPassword();}function checkUsername(){let input = document.getElementsByName("username")[0];var content= input.value;var regx=/^[a-z]{6,16}$/i;var flag=regx.test(content);let sp = document.getElementById("a");if (flag){//alert("格式正确")input.style.border="2px solid green";sp.innerHTML="<b style='color:green'>格式正确</b>";}else{//alert("格式不正确")input.style.border="2px solid red";sp.innerHTML="<b style='color:red'>格式错误</b>";}return flag;}function checkPassword(){let input = document.getElementsByName("password")[0];var content= input.value;var regx=/^[0-9]{6,16}$/;var flag=regx.test(content);let sp = document.getElementById("b");if (flag){//alert("格式正确")input.style.border="2px solid green";sp.innerHTML="<b style='color:green'>格式正确</b>";}else{//alert("格式不正确")input.style.border="2px solid red";sp.innerHTML="<b style='color:red'>格式错误</b>";}return flag;}function rest(){alert("表单重置");}</script>

其他事件

<script>//onload 等页面中的所有元素，加载完毕之后，回去执行window.onload = function () {let div = document.getElementById("d1");alert(div);}</script></head><body><div id="d1"></div></body>

下拉框、单选框、多选框事件

<body><input type="text" placeholder="默认值文字" onselect="show()"><select name="" id="" onchange="show()"><option value="">请选择学历</option><option value="">小学</option><option value="">中学</option><option value="">大学</option></select><input type="radio" name="sex" id="" onchange="show()">男<input type="radio" name="sex" id="" onchange="show()">女<input type="checkbox" name="hobby" id="" onchange="show()">音乐<input type="checkbox" name="hobby" id="" onchange="show()">踢球</body><script>function show() {alert("选择了")}document.oncontextmenu=function() {return false;}document.body.oncopy=function() {return false;}</script>

事件对象

currentTarget: 获取的是绑定了该事件的元素对象

target : 获取的是触发了该事件的元素对象

type: 获取事件类型

keyCode 当绑定了键盘事件，可以从事件对象中获取按键的键码（ASCII码）

which/button 当绑定了鼠标事件，可以从事件对象中获取鼠标按键的键码 0 左键 1滚轮 2右键

事件冒泡

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#a{width: 300px;height: 300px;background: red;}#b{width: 200px;height: 200px;background: yellow;}#c{width: 100px;height: 100px;background: blue;}</style></head><body><div id="a" onclick="a()"><div id="b" onclick="b()"><div id="c" onclick="c()"></div></div></div></body><script>function a() {event.stopPropagation(); //阻止冒泡alert("a");}function b() {event.stopPropagation();//阻止冒泡alert("b");}function c() {event.stopPropagation();//阻止冒泡alert("c");}</script>
</html>