什么是事件
可以被浏览器侦测到的人或者浏览器本身的行为,人对浏览器或者浏览器对网页做了什么事,JS可以根据不同行为.绑定一些不同的响应代码处理,让浏览器和人的行为之间有一个交互
事件的绑定和触发
给页面上的元素先绑定事件 然后通过行为去触发
鼠标事件
| 属性 | 描述 | DOM |
| onclick | 当用户点击某个对象时调用的事件句柄。 | 2 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
|
| ondblclick | 当用户双击某个对象时调用的事件句柄。 | 2 |
| onmousedown | 鼠标按钮被按下。 | 2 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 | 2 |
| onmouseleave | 当鼠标指针移出元素时触发 | 2 |
| onmousemove | 鼠标被移动。 | 2 |
| onmouseover | 鼠标移到某元素之上。 | 2 |
| onmouseout | 鼠标从某元素移开。 | 2 |
| onmouseup | 鼠标按键被松开。 | 2 |
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.d1{width: 100px;height: 100px;background-color: greenyellow;}</style><script>function fun1(){console.log("双击666")}function fun2(){console.log("鼠标按下")}function fun3(){console.log("鼠标抬起")}function fun4(){console.log("鼠标进入")}function fun5(){console.log("鼠标离开")}function fun6(){console.log("鼠标移动")}</script></head><body><div class="d1" ondblclick="fun1()" onmousedown="fun2()" onmouseup="fun3()" onmouseenter="fun4()" onmouseleave="fun5()" onmousemove="fun6()"></div></body>
</html>
键盘事件
| 属性 | 描述 | DOM |
| onkeydown | 某个键盘按键被按下。 | 2 |
| onkeypress | 某个键盘按键被按下并松开。 | 2 |
| onkeyup | 某个键盘按键被松开。 | 2 |
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>function fun1(){console.info("按钮按下")}function fun2(){console.info("按钮抬起")}function fun3(){console.info("按钮按下并抬起")}</script></head><body><input type="text" onkeydown="fun1()" onkeyup="fun2()" onkeypress="fun3()" /></body>
</html>
表单事件
| 属性 | 描述 | DOM |
| onblur | 元素失去焦点时触发 | 2 |
| onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) | 2 |
| onfocus | 元素获取焦点时触发 | 2 |
| onfocusin | 元素即将获取焦点时触发 | 2 |
| onfocusout | 元素即将失去焦点时触发 | 2 |
| oninput | 元素获取用户输入时触发 | 3 |
| onreset | 表单重置时触发 | 2 |
| onsearch | 用户向搜索域输入文本时触发 ( <input="search">) |
|
| onselect | 用户选取文本时触发 ( <input> 和 <textarea>) | 2 |
| onsubmit | 表单提交时触发 | 2 |
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>function fun1(){console.log("获得焦点");}function fun2(){console.log("失去焦点");}function fun3(){console.log("正在输入");}// 只要输入了,就会触发function fun4(){console.log("内容改变");}// 内部信息发生变化的同时,要失去焦点function fun5(sel){console.log("内容发生改变了"+sel.value)}function fun6(){alert("发生了提交事件");// 做了一些运算之后 动态决定表单能否提交return false ;}function fun7(){ console.log("发生了重置事件");return true;}</script></head><body><form method="get" action="https://www.baidu.com" onsubmit="return fun6()" onreset="return fun7()"><input name="" value="" type="text" onfocus="fun1()" onblur="fun2()" oninput="fun3()" onchange="fun4()"/><br /><select name="city" onchange="fun5(this)"><option selected>-请选择城市-</option><option value="1">北京</option><option value="2">天津</option><option value="3">上海</option><option value="4">重庆</option></select><br /><input type="submit" value="提交数据" /><input type="reset" value="重置数据" /></form></body>
</html>页面加载事件
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>function testFun(){var in1=document.getElementById("i1");var v1=in1.value;console.log(v1)}</script></head><body onload="testFun()"><input type="text" value="测试文字" id="i1" /></body>
</html>
总结
本篇文章介绍了常见的JavaScript事件及其绑定和触发机制。事件是指浏览器或用户与页面交互时触发的行为，JavaScript可以根据不同的事件类型绑定相应的处理代码，实现页面与用户的互动。文章详细列出了几种常用事件，如鼠标事件（onclick、onmousedown、onmouseenter等）、键盘事件（onkeydown、onkeyup、onkeypress）以及表单事件（onblur、onchange、onsubmit等）。通过HTML元素的属性，开发者可以为页面元素绑定这些事件，触发时执行相应的处理函数。此外，还介绍了页面加载时的事件（onload），如通过onload事件可以在页面加载完成后执行特定的JavaScript代码。展示了如何通过事件和事件处理函数实现动态交互，增强网页的用户体验。