HTML中的DOM事件——鼠标事件、键盘事件、框架对象事件、表单事件

最新推荐文章于 2023-10-18 10:32:00 发布
最新推荐文章于 2023-10-18 10:32:00 发布
阅读量4.9k 收藏 34
点赞数 3
分类专栏： html和css 文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867717/article/details/125632882
版权

HTML中的DOM事件——鼠标事件、键盘事件、框架/对象事件、表单事件

1. 什么是事件
  • 是通过用户进行触发的一些行为。比如：点击、双击、键盘按下抬起等等都称为事件。
  • 事件在触发的时候会产生一个事件对象。
2.事件的添加方式

在标签内添加事件名称，并调用对应的事件处理函数

<body>
    <button id="box" onclick="a()">按钮</button>
</body>
<script>
    function a() {
        console.log("点击了");
    }
</script>

通过获取 DOM 对象，然后添加事件，并赋值的事件的处理函数。

<body>
    <button id="box">按钮</button>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    // 给元素添加事件
    box.onclick = function (event) {
        console.log("点击了");
        console.log(event);
    };
</script>

通过监听的方式添加事件。

<body>
    <button id="btn">按钮</button>
</body>
<script>
    var btn = document.getElementById("btn");
    // 通过添加事件的监听
    // 第一个参数是事件的类型
    // 第二个参数是事件的处理函数
    btn.addEventListener("click", function (event) {
        console.log("点击了");
        console.log(event); 
    });
</script>
3. 鼠标事件
3.1 单机事件 onclick
3.2 双击事件 ondblclick
<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.ondblclick = function () {
        console.log("双击了");
    };
</script>
3.3 鼠标按下事件 onmousedown

鼠标在某一个元素中进行按下操作时会触发

<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.onmousedown = function () {
        console.log("鼠标按下");
    };
</script>
3.4 鼠标抬起事件 onmouseup
<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.onmouseup = function () {
        console.log("鼠标抬起");
    };
</script>
3.5 鼠标进入事件 onmouseenter
<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.onmouseenter = function () {
        console.log("鼠标进入");
    };
</script>
3.6 鼠标离开事件 onmouseleave
<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.onmouseleave = function () {
        console.log("鼠标离开");
    };
</script>
3.7 鼠标移动事件 onmousemove
<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.onmousemove = function () {
        console.log("鼠标移动");
    };
</script>
3.8 鼠标移入 onmouseover
<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.onmouseover = function () {
        console.log("鼠标移入");
    };
</script>
3.9 鼠标移除 onmouseout
<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    // 获取DOM对象
    var box = document.getElementById("box");
    box.onmouseout = function () {
        console.log("鼠标移出");
    };
</script>
4. 键盘事件
4.1 某个键盘按键被按下：onkeydown
<script>
    document.body.onkeydown = function (event) {
        console.log(event.keyCode); // 获取键盘按键的键码
        console.log("键盘按下");
    };
</script>
4.2 某个键盘按键被松开：onkeyup
<script>
    document.body.onkeyup = function (event) {
        console.log(event.keyCode); // 获取键盘按键的键码
        console.log("键盘抬起");
    };
</script>
4.3 某个键盘按键被按下并松开：onkeypress
<script>
    document.body.onkeypress = function (event) {
        console.log(event.keyCode); // 获取键盘按键的键码
        console.log("键盘按下并抬起");
    };
</script>
5. 框架/对象(Frame/Object) 事件
5.1 一张页面或一幅图像完成加载：onload
<head>
    <script>
        // 页面加载事件 这个事件通过情况下绑定在 window
        window.onload = function () {
            foo();
            var box = document.getElementById("box");
            console.log(box);
        };
        function foo() {
            console.log("foo");
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
5.2 当文档被滚动时发生的事件：onscroll
<head>
    <style>
        #box {
            height: 3000px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    window.document.onscroll = function () {
        console.log("滚动事件触发了");
        // 获取文档滚动的高度
        var top = document.documentElement.scrollTop;
        console.log(top);
    };
</script>
5.3 窗口或框架被重新调整大小：onscroll
<script>
    window.onresize = function () {
        console.log("窗口大小变化了");
    };
</script>
6. 表单事件
6.1 元素失去焦点时触发：onblur
<body>
    <form action="" method="get">
        <p>
            用户名：
            <input type="text" id="username" />
        </p>
        <input type="submit" value="提交" />
    </form>
</body>
<script>
    var username = document.getElementById("username");
    username.onblur = function () {
        console.log("失焦了");
    };
</script>
6.2 该事件在表单元素改变时触发：onchange
<body>
    <form action="" method="get">
        <p>
            用户名：
            <input type="text" id="username" />
        </p>
        <input type="submit" value="提交" />
    </form>
</body>
<script>
    var username = document.getElementById("username");
    username.onchange = function () {
        // 当你失焦了才能触发 或者 回车
        console.log("输入了");
    };
</script>
6.3 元素获取焦点时触发：onfocus
<body>
    <form action="" method="get">
        <p>
            用户名：
            <input type="text" id="username" />
        </p>
        <input type="submit" value="提交" />
    </form>
</body>
<script>
    var username = document.getElementById("username");
    username.onfocus = function () {
        console.log("获取焦点");
    };
</script>
6.4 元素获取用户输入时触发：oninput
<body>
    <form action="" method="get">
        <p>
            用户名：
            <input type="text" id="username" />
        </p>
        <input type="submit" value="提交" />
    </form>
</body>
<script>
    var username = document.getElementById("username");
    username.oninput = function () {
        // 当每输入一个值的时候就触发
        console.log("oninput事件触发了");
    };
</script>
6.5 表单提交时触发：onsubmit
<body>
    <form id="form" action="" method="get" onsubmit="login()">
        用户名：
        <input type="text" id="username" />
        </p>
    <input type="submit" value="提交" />
    </form>
</body>
<script>
    // 表单的处理函数
    function login() {
        alert("表单已经提交了");
    }

    var form = document.getElementById("form");
    form.onsubmit = function () {
        alert("登陆");
        // 组织表单的默认行为 阻止一直刷新
        // event.preventDefault();
        return false 
    };
</script>
viceen
关注
  • 3
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML 事件
lly202406的博客
06-18 715
HTML 事件是发生在 HTML 元素上的交互瞬间，它们可以由用户的行为（如点击、按键、鼠标移动等）或浏览器自身的行为（如页面加载完成、图片加载失败等）触发。在 HTML 和 JavaScript 的交互中，事件扮演着核心角色，允许开发者创建动态和响应式的网页。
2021-05-18
y4418的博客
05-18 128
HTML DOM Event 键盘事件 开发工具与关键技术： Dw、JS 作者： 撰写时间：2021/5/8 首先先了解一下JS JS的全称是 JavaScript JavaScript 是世界上最流行的编程语言。 这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件...
HTML DOM 事件 —— 鼠标事件 JS鼠标事件
Yxd0724的博客
08-30 7810
onclick、oncontextmenu、ondblclick、onmousedown、onmouseenter、onmouseleave、onmousemove、onmouseover、onmouseout、onmouseup
动态HTML事件(Event)小结
weixin_30622107的博客
03-25 155
动态HTML事件(Event)小结 事件 事件触发条件（下列句末省略“触发”二字） onabort 用户终止下载图像时 onafterprint 与对象相关的文档打印后立即在对象上 onafterupdate 在数据源对象中成功更新相关数据后在数据绑定对象上 onbeforecopy 选择内容复制到系统剪贴板上之前在原对象上 onbeforecut 从文档中删除选择内容之前...
vue-鼠标事件
Wickedstepmother的博客
08-07 1939
当为某一组件(如div)设置这两个事件时，当事件的target是该组件时，就会触发mouseover，但是当鼠标划到该组件的子组件上时，因为target改变了，所以就触发了 mouseout 事件，这往往就会造成页面元素的闪烁。不管组件中是否有子组件，只要鼠标进入到组件的范围内，就可以触发mouseenter事件，离开范围，则触发mouseleave事件。而实际开发过程中，更多的是针对范围的操作。如果鼠标在某个组件(如div)范围内就触发进入组件的操作，如果离开这个组件的页面范围，就触发离开的事件。
常见的鼠标事件
hongchen_lian的博客
01-09 2380
常见的鼠标事件 click：单击事件 dblclick：双击事件 mousedown：按下鼠标键时触发 mouseup：释放按下的鼠标键时触发 mousemove：鼠标移动事件 mouseover：移入事件 mouseout：移出事件 mouseenter：移入事件 mouseleave：移出事件 contextmenu：右键事件 mouseover事件和mouseenter事件，都是鼠标进入一个...
html使用鼠标事件对元素进行拖拽移动-mouse
weixin_41956327的博客
10-18 446
html的拖拽移动可以使用draggable属性去实现，遇到自己想要的拖拽移动的样式或者功能，可以使用鼠标事件去完成拖拽的移动。
2、DOM事件
hzg_hou的博客
05-12 93
onmouseleave | 鼠标离开 | DOM对象.onmouseleave = function() {} || onmousewheel | 鼠标滚轮 | DOM对象.onmousewheel = function() {} || onmousemove | 鼠标移动 | DOM对象.onmousemove = function() {} || onmouseout | 鼠标移除 | DOM对象.onmouseout = function(){} |//a) 先判断当前函数有几个参数?
精通JS脚本之ExtJS框架.part2.rar
03-02
本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
[JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版.part1.rar
04-01
　4.3.3　在事件侦听器中访问事件对象　 　4.3.4　跨浏览器的事件属性和方法　 　4.4　小结　 　第5章　动态修改样式和层叠样式表　 　5.1　W3CDOM2样式规范　 　5.1.1　CSSStyleSheet对象　 　5.1.2　CSSStyleRule...
[JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版.part3.rar
04-01
　4.3.3　在事件侦听器中访问事件对象　 　4.3.4　跨浏览器的事件属性和方法　 　4.4　小结　 　第5章　动态修改样式和层叠样式表　 　5.1　W3CDOM2样式规范　 　5.1.1　CSSStyleSheet对象　 　5.1.2　CSSStyleRule...
[JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版.part2.rar
04-01
　4.3.3　在事件侦听器中访问事件对象　 　4.3.4　跨浏览器的事件属性和方法　 　4.4　小结　 　第5章　动态修改样式和层叠样式表　 　5.1　W3CDOM2样式规范　 　5.1.1　CSSStyleSheet对象　 　5.1.2　CSSStyleRule...
精通JS脚本之ExtJS框架.part1.rar
03-02
本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
html经过事件,HTML事件大全
weixin_39743064的博客
06-07 182
一般事件:onClick HTML: 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击onDblClick HTML: 鼠标双击事件onMouseDown HTML: 鼠标上的按钮被按下了onMouseUp HTML: 鼠标按下后，松开时激发的事件onMouseOver HTML: 当鼠标移动到某对象范围的上方时触发的事件onMouseMove HTML: 鼠标移动时触发的事件onMouseOu...
html鼠标点击事件代码,HTML onmousedown事件用法及代码示例
weixin_42522626的博客
06-04 2854
按下元素上方的鼠标按钮时，将发生HTML DOM onmousedown事件。左键单击的相关事件：onmousedownonmouseuponclick右键单击的相关事件：onmousedownonmouseuponcontextmenu用法:在HTML中：在JavaScript中：object.onmousedown = function(){myScript};在JavaScript中，使用a...
Js之鼠标事件-鼠标事件
cx1361855155的博客
08-04 9324
鼠标点击事件包括 click（点击），dbclick（双击），mousedown（按下）和 mouseup（松开）四个。其中 click 事件比较常用，而mousedown 和 mouseup事件类型多用于鼠标施放，拉伸操作中。如果从父元素中移动到子元素中，也会触发元素的mouseover事件类型。mousemove 事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针的移动速度块慢以及浏览器跟踪更新的速度。...
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件
热门推荐
xuehyunyu的博客
07-25 1万+
示例代码： HTML文件： HTML文件 window.onload=function () { var d=document.getElementById('d'); //内容发生改变，并焦点发生改变，才可以监听到 d.onchange=function () {
HTML之鼠标移动事件
一岁一枯荣的博客
09-27 8072
鼠标事件： <meta charset="utf-8" /> div{ width: 200px; height: 200px; border: 1px solid #000000; f
Web——鼠标事件
qq_40139513的博客
09-27 1152
鼠标事件 关于手机移动偏移的
html网页鼠标事件
最新发布
11-17
HTML网页中常用的鼠标事件有以下几种： 1. onclick：鼠标单击事件 2. ondblclick：鼠标双击事件 3. onmousedown：鼠标按下事件 4. onmouseup：鼠标松开事件 5. onmousemove：鼠标移动事件 6. onmouseover：鼠标移动到元素上方事件 7. onmouseout：鼠标移出元素事件 这些事件可以通过在HTML标签中添加相应的属性来触发，例如： ```html <button onclick="alert('Hello World!')">点击我</button> ``` 当用户单击该按钮时，会弹出一个对话框显示“Hello World!”。 需要注意的是，并非所有HTML元素都支持所有的鼠标事件，具体可以参考引用中的说明。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值