HTML DOM事件

HTMLDOM事件详解与示例
最新推荐文章于 2024-12-16 09:00:00 发布
原创 最新推荐文章于 2024-12-16 09:00:00 发布 · 198 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html #前端

本文详细介绍了HTMLDOM事件，包括事件的基本概念、添加方式，如内联方式、DOM对象添加和监听方式。接着讲解了鼠标事件，如单击、双击、鼠标按下抬起等，以及键盘事件如按键按下、抬起和按住。还涵盖了框架/对象事件如页面加载、文档滚动和窗口大小调整，以及表单事件，如焦点变化、输入内容和表单提交。每个事件都有相应的代码示例和应用场景。

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.8 鼠标移除 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>
【004JavaScript HTML DOM 事件】JavaScript HTML DOM 事件：实现交互功能的关键步骤
燃正科技
06-07 858
JavaScript HTML DOM 事件允许我们对网页中的交互进行响应。通过 JavaScript，我们可以捕获和处理用户的操作和浏览器的事件。本文将详细介绍如何使用 JavaScript HTML DOM 事件来实现交互功能。
Javascript----HTML DOM 事件
iteye_6125的博客
06-18 588
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ [b]注：DOM： 指明使用的 DOM 属性级别。[/b] [b]1.鼠标事件[/b] 属性 描述 DOM [u]onclick ...
HTML DOM 事件
老狼的专栏
03-07 294
HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示：在 W3C 2 级 DOM 事件中规范了事件模型。 HTML DOM 事件 DOM：指明使用的 DOM 属性级别。 鼠标（Mouse）事件 属性 描述 DOM oncli...
HTML DOM - 事件
weixin_30246221的博客
03-16 113
当用户点击鼠标时 当网页已加载时 当图片已加载时 当鼠标移动到元素上时 当输入字段被改变时 当 HTML 表单被提交时 当用户触发按键时 向 button 元素分配一个 onclick 事件： onload 和 onunload 事件 当用户进入或离开页面时，会触发 onload 和 onunload 事件。 onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息...
JavaScript 学习-29.HTML DOM 事件
qq_27371025的博客
05-28 246
前言 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 常用的一些事件 事件名称 作用 onload 通常用于 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。 onunload 用户退出页面。 ( 和 ) onclick 当用户点击某个对象时调用的事件句柄。 onmouseover 鼠标移到某元素之上。 onmouseout 鼠标从某元素移开。 ondblclick 当用户双击某个对象时调用的事件句柄。
JavaScript HTML DOM 事件
01-21
JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。 实例 Mouse Over Me Click Me 对事件做出反应 我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。 如需...
以点击为例了解JavaScript中HTML DOM事件
m0_70117514的博客
05-13 899
文章目录 目录 文章目录 前言 事件 点击示例如下： 用调用函数的方法处理 HTML事件属性 示例 使用 HTML DOM 来分配事件 事件三要素 示例如下 示例2 HTML 事件的其他例子 前言 大家好，我是遇见ice。 个人主页：遇见ice的博客 本文主要是以点击事件为例，讲了一些关于事件的知识，其他事件例子下次再讲啦。 走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流。学一点，就会进步一点，大家一起加油呀！笔芯 事件 事件是用户与浏...
前端必知必会-JavaScript HTML DOM 事件
最新发布
qq_24018193的博客
12-16 1096
本文介绍了JavaScript HTML DOM 事件的使用，如有问题欢迎私信和评论。
simplehtmldom:这是简单HTML DOM解析器的镜像，网址为
05-07
simplehtmldom是用于PHP的快速可靠HTML DOM解析器。 主要特征 纯粹基于PHP的DOM解析器（无需XML扩展名）。 适用于格式正确且已损坏HTML文档。 加载网页，本地文件和文档字符串。 支持CSS选择器。 要求 simple...
html dom event 对象,HTML DOM Event对象
weixin_39714191的博客
06-19 201
我们通常把HTML DOM Event对象叫做Event事件事件驱动模型事件源：(触发事件的元素)事件源对象是指event对象其封装了与事件相关的详细信息.当事件发生时,只能在事件函数内部访问的对象处理函数结束后会自动销毁事件流：当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定的顺序响应该元素的触发事件事件传播的顺序叫做事件流.事件分类：鼠标事件，键盘事件，表单事件，页面事件我这里主...
Dom操作——操作元素，各种事件
yjp1240201821的博客
06-13 866
本节主要讲解Dom的操作，操作元素和各种事件，从而帮助更好地理解Dom
常用HTML DOM事件
wuyujin1997的博客
03-21 783
页面相关 window.onload 页面加载完成后触发。 AJAX相关 xhr.onreadystatechange XHR对象的readyState状态值改变。 表单相关 onclick 点击按钮触发。 onsubmit 提交表单触发。 按键 onkeydown 按下键帽。 onkeypress 一次按键。 onkeyup 松开键帽。 DOM 事件 HTML DOM 事件大全 ...
获取点击事件所在的DOM
weixin_44082001的博客
01-11 1444
获取点击事件所在的DOM 页面代码如下： <div class="dataMartTitleDivStyle" @click.stop="getDataMartData($event,item.id)"> <Icon type="md-close" size="20" style="float: right" @click.stop="deleteDataMart(item.id)"/> <img :src="img" class
html中自动触发事件
热门推荐
beidaol的专栏
01-03 2万+
问题       在编写前端代码的时候，进行某个操作后希望系统能自动触发一个动作，比如自动触发button的单击动作，此时可以使用jquery的trigger来实现，       如$('#button1').trigger("click"); 表示自动触发id为button1的单击动作 实例 在对表单进行完整性验证后单击提交，然后自动触发下面按钮的动作 运行开始的图 未输入信息便...
html 触发事件的方法
吴家健ken的博客
04-14 1296
正常情况下，页面样式加载完，就会加载页面的触发的事件，常规操作如下： jQuery('.btn-submit').on('click', function(){ window.location.href='https://www.baiduc.com'; }); 有种特殊情况，页面的内容是外部调用的，需要绑定事件，单单用以上的方法是行不通的，这时可以这样 $('body').on('click', '.btn-submit', function () { windo...
DOM事件机制
冰霜的博客
09-11 483
事件机制 HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。 为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码： <div id='div1'>我是一个div</div> <button id='btn'>点我啊</button> <!-- 还可以在HTML标签中进行事件的绑定 需要加()--> <.
掌握前端DOM事件：详解常用操作与实例
本文档是对前端开发者至关重要的DOM事件详解，涵盖了HTML DOM事件在网页交互中的核心作用。DOM事件模型是Web开发的基础组成部分，它允许JavaScript在HTML文档对象模型（DOM）中的元素上注册事件处理器，以便对用户的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值