HTML之JavaScript常见事件

HTML之JavaScript常见事件

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            事件:本质是行为,用户的行为或者浏览器的行为;事件发生指的是处罚js函数执行
            事件的三要素:事件源、事件、事件处理程序
            事件的绑定:
            1.通过元素的属性绑定 on***
            2.通过DOM编程动态绑定
            注:
                1.一个事件可以绑定多个函数;eg:onclick="show(),show1()
                2.一个元素可以绑定多个事件  eg:onclick="show()" ondblclick="show2()"

            常见的事件:
            1.鼠标事件
                onclick:单击事件
                ondblclick:双击事件
                onmouseover:鼠标移入事件
                onmouseout:鼠标移出事件
                onmousemove:鼠标移动事件
                onmousedown:鼠标按下事件
                onmouseup:鼠标抬起事件
            2.键盘事件
                onkeydown:键盘按下事件
                onkeyup:键盘抬起事件
                onkeypress:键盘按下并抬起事件
            3.表单事件
                onfocus:获得焦点事件
                onblur:失去焦点事件
                onchange:内容改变事件
                onsubmit:表单提交事件
                onreset:表单重置事件
            
        */
        function show() {
            console.log('hello,按下');
        };
        function show1() {
            console.log('hello1,抬起');
        };
        function show2() {
            console.log('双击');
        };
        function show3() {
            console.log('鼠标移入');
        };
        function show4() {
            console.log('鼠标移出');
        };
        function show5() {
            console.log('鼠标移动');
        };
    </script>
</head>

<body>
    <input type="button" value="按钮" onclick="show(),show1()" ondblclick="show2()">
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="" onmouseover="show3()" onmouseout="show4()" onmousemove="show5()">
    <input type="text" onkeydown="show()" onkeyup="show1()">
</body>

</html>
相关推荐
艾小码16 分钟前
AI时代,编程简化:前端开发的范式革命
前端
讨厌吃蛋黄酥16 分钟前
🔥 揭秘React魔法:从JSX到表单组件的性能与交互之争!
前端·javascript·react.js
沫小北17 分钟前
HarmonyOS Lottie动画库总结
前端·harmonyos
Oriel18 分钟前
在 Strapi v4 中生成专业 API 文档
前端·后端
WildBlue19 分钟前
解锁 Babel - JSX 编译:前端魔法背后的秘密🥳
前端·react.js
南方kenny19 分钟前
React 魔法揭秘:useRef 与 forwardRef 的奇妙之旅
前端·javascript·react.js
LaoZhangAI21 分钟前
Playwright MCP完整指南:AI驱动的浏览器自动化测试革命2025
前端·后端
前端Hardy22 分钟前
Python 打造 Excel 到 JSON 转换工具:从开发到打包全攻略
前端·后端·python
guiyanakaung23 分钟前
CMP 如何优雅的实现跨软件的拖拽功能
前端·github
海上生明月丿27 分钟前
Vue 工程化
前端·javascript·vue.js