前端JavaScript(六)---JS中的事件

什么是事件

可以被浏览器侦测到的人或者浏览器本身的行为,人对浏览器或者浏览器对网页做了什么事,JS可以根据不同行为.绑定一些不同的响应代码处理,让浏览器和人的行为之间有一个交互

事件的绑定和触发

给页面上的元素先绑定事件 然后通过行为去触发

鼠标事件

|----------------------------------------------------------------------------------------|---------------------|-------------|
| 属性 | 描述 | DOM |
| onclick | 当用户点击某个对象时调用的事件句柄。 | 2 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 | |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 | 2 |
| onmousedown | 鼠标按钮被按下。 | 2 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 | 2 |
| onmouseleave | 当鼠标指针移出元素时触发 | 2 |
| onmousemove | 鼠标被移动。 | 2 |
| onmouseover | 鼠标移到某元素之上。 | 2 |
| onmouseout | 鼠标从某元素移开。 | 2 |
| onmouseup | 鼠标按键被松开。 | 2 |

javascript 复制代码
<!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 |

javascript 复制代码
<!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 |

javascript 复制代码
<!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>

页面加载事件

javascript 复制代码
<!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可以根据不同的事件类型绑定相应的处理代码,实现页面与用户的互动。文章详细列出了几种常用事件,如鼠标事件(onclickonmousedownonmouseenter等)、键盘事件(onkeydownonkeyuponkeypress)以及表单事件(onbluronchangeonsubmit等)。通过HTML元素的属性,开发者可以为页面元素绑定这些事件,触发时执行相应的处理函数。此外,还介绍了页面加载时的事件(onload),如通过onload事件可以在页面加载完成后执行特定的JavaScript代码。展示了如何通过事件和事件处理函数实现动态交互,增强网页的用户体验。

相关推荐
liulilittle2 分钟前
深度剖析:OPENPPP2 libtcpip 实现原理与架构设计
开发语言·网络·c++·tcp/ip·智能路由器·tcp·通信
88号技师8 分钟前
2025年6月一区-田忌赛马优化算法Tianji’s horse racing optimization-附Matlab免费代码
开发语言·算法·matlab·优化算法
勤奋的知更鸟14 分钟前
Java 编程之模板方法模式
java·开发语言·模板方法模式
前端小巷子16 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志1 小时前
typescript结构化类型应用两例
javascript
杨进军1 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
-凌凌漆-2 小时前
【Qt】QStringLiteral 介绍
开发语言·qt