HTML DOM事件

最新推荐文章于 2023-08-23 10:01:26 发布
最新推荐文章于 2023-08-23 10:01:26 发布
阅读量128 收藏
点赞数
分类专栏： HTML DOM 事件 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HTML_Z/article/details/123555258
版权
本文详细介绍了HTMLDOM事件，包括事件的基本概念、添加方式，如内联方式、DOM对象添加和监听方式。接着讲解了鼠标事件，如单击、双击、鼠标按下抬起等，以及键盘事件如按键按下、抬起和按住。还涵盖了框架/对象事件如页面加载、文档滚动和窗口大小调整，以及表单事件，如焦点变化、输入内容和表单提交。每个事件都有相应的代码示例和应用场景。
摘要由CSDN通过智能技术生成

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>
BloggerM
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM事件机制
冰霜的博客
09-11 364
事件机制 HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。 为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码： <div id='div1'>我是一个div</div> <button id='btn'>点我啊</button> <!-- 还可以在HTML标签中进行事件的绑定 需要加()--> <.
HTML DOM 事件
最新发布
lsx202406的博客
06-13 511
HTML DOM（文档对象模型）事件是当网页中的某些操作发生时，浏览器会自动触发或通过脚本代码手动触发的动作。这些事件可以是对用户操作的响应，如点击按钮，也可以是浏览器自身的动作，如页面加载完成。理解和掌握DOM事件对于前端开发至关重要，因为它们是实现动态交互和响应用户行为的核心。
Javascript----HTML DOM 事件
iteye_6125的博客
06-18 492
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ [b]注：DOM： 指明使用的 DOM 属性级别。[/b] [b]1.鼠标事件[/b] 属性 描述 DOM [u]onclick ...
HTML中的DOM事件——鼠标事件、键盘事件、框架对象事件、表单事件
weixin_44867717的博客
07-06 4973
dom元素
HTML中的DOM事件
gyutdcu的博客
08-23 299
事件绑定、事件类型、事件解绑
JavaScript HTML DOM 事件
01-21
JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。 实例 Mouse Over Me Click Me 对事件做出反应 我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。 如需...
DOM事件探秘篇
01-19
1.HTML事件处理程序 — 直接写在html标签里面的js触发语句。 2.DOM0级事件处理程序。 把一个函数赋值给一个事件的处理程序属性，用的比较多的方法，简单，跨浏览器的优势。 3.DOM2级事件处理程序。 （1）用于处理...
WEB开发 之 JavaScript HTML DOM 事件.docx
09-26
3. **HTML DOM事件分配**：除了通过HTML属性设置事件，还可以使用JavaScript动态地为元素添加事件监听器。例如，通过`getElementById`方法获取元素并设置`onclick`事件： ```javascript document.getElementById('...
深入理解JS DOM事件机制
10-21
JavaScript DOM事件机制是JavaScript与网页交互的核心部分，它定义了如何以及何时响应用户或脚本对HTML元素的交互。深入理解这一机制对于高效地编写网页动态效果和交互至关重要。 1. **事件流** - 事件流描述了...
HTML DOM中添加事件方法（详解）
qq_59463562的博客
06-14 3676
简单必学的HTML事件方法
JavaScript 学习-29.HTML DOM 事件
qq_27371025的博客
05-28 159
前言 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 常用的一些事件 事件名称 作用 onload 通常用于 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。 onunload 用户退出页面。 ( 和 ) onclick 当用户点击某个对象时调用的事件句柄。 onmouseover 鼠标移到某元素之上。 onmouseout 鼠标从某元素移开。 ondblclick 当用户双击某个对象时调用的事件句柄。
常用HTML DOM事件
wuyujin1997的博客
03-21 663
页面相关 window.onload 页面加载完成后触发。 AJAX相关 xhr.onreadystatechange XHR对象的readyState状态值改变。 表单相关 onclick 点击按钮触发。 onsubmit 提交表单触发。 按键 onkeydown 按下键帽。 onkeypress 一次按键。 onkeyup 松开键帽。 DOM 事件 HTML DOM 事件大全 ...
HTML DOM - 事件
weixin_30246221的博客
03-16 75
当用户点击鼠标时 当网页已加载时 当图片已加载时 当鼠标移动到元素上时 当输入字段被改变时 当 HTML 表单被提交时 当用户触发按键时 向 button 元素分配一个 onclick 事件： onload 和 onunload 事件 当用户进入或离开页面时，会触发 onload 和 onunload 事件。 onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息...
html dom事件是click 还是onclick
06-08
HTML DOM中的事件名称通常是不带“on”前缀的，例如`click`、`load`、`submit`等。而在JavaScript中，事件通常是作为对象的属性来定义的，名称前面带有“on”前缀，例如`onclick`、`onload`、`onsubmit`等。 因此...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值