【基础篇】JavaScript的DOM(网页元素操控)事件汇总

已于 2022-08-30 01:15:32 修改
阅读量670 收藏 5
点赞数 12
分类专栏： JavaScript从入门到精通 文章标签： javascript html vue
于 2022-06-09 08:15:00 首次发布
本文为博主原创文章，未经博主允许不得转载
本文链接：https://blog.csdn.net/m0_61243965/article/details/125195002
版权
本文详细介绍了JavaScript中的DOM事件，包括HTML事件、常见事件类型、DOM事件手册，讲解了如何利用事件处理用户行为和浏览器动作，如页面加载、按钮点击、表单验证等，并探讨了事件对象和事件处理程序的使用。
摘要由CSDN通过智能技术生成

前言

        上一篇文章咱们讲到JavaScript的对象，今天让我们来一起学习一下javaScript的事件有哪些？

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

1、HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

单引号:

<some-HTML-element some-event='JavaScript 代码'>

双引号:

<some-HTML-element some-event="JavaScript 代码">
了解本专栏 订阅专栏 解锁全文 超级会员免费看
言程序plus
关注
  • 12
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论
专栏目录
订阅专栏
javascript 基础篇4 window对象，DOM
10-28
在讲解JavaScript的基础知识中，我们经常提到window对象。window对象在浏览器中用于表示浏览器窗口。它是JavaScript中最大的全局对象，几乎所有的JavaScript对象、属性和方法都是它的成员。通过window对象，我们可以...
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
10-16
在JavaScript事件处理函数中，`event`对象包含了关于事件的各种信息，其中`target`属性特别有用，它指的是触发事件的那个元素。这意味着，无论事件处理函数绑定在哪个元素上，`event.target`总是指向真正触发事件的...
addEventListener 的用法示例介绍
09-04
主要介绍了addEventListener 的用法,需要的朋友可以参考下
HTML DOM 事件
akuibpt23191的博客
07-13 586
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
为DOM添加事件的几种方式
最新发布
编程旅者
07-14 114
button onclick="displayDate()">点我</button>
addEventListener 和attachEvent用法
寂寞的时光
07-23 354
对于IE的attachEvent方法可能大家都比较熟，现在说说FireFox的addEventListener的用法。 addEventListener的参数一共有三个，语法为： element.addEventListener(type,listener,useCapture) 下面是详解 其中element是要绑定函数的对象。 type是事件名称，要注意的是"onclick"要...
addEventListener() 方法
qq_39355295的博客
10-11 280
1、定义 addEventListener() 方法用于向指定元素添加事件句柄。 提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 2、语法 element.addEventListener(event, function, useCapture) 3、参数值 (1) event 必须。字符串，指定事件名。 注意: ...
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
qq_52530691的博客
07-01 2284
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
JavaScript动态修改网页元素内容的方法
10-24
本篇文章将深入探讨如何使用JavaScript来动态修改网页元素内容的方法。 首先，JavaScript提供了多种方法来选择页面上的元素。最常用的方法包括通过元素的ID、类名、标签名或使用CSS选择器。一旦选择了元素，就可以...
李立超JavaScript基础篇笔记
02-02
JavaScript与网页的交互主要依赖于DOM（Document Object Model）和BOM（Browser Object Model）。DOM提供了对网页内容进行操作的对象，而BOM则允许开发者控制浏览器的某些特性，如窗口、历史记录和导航。 在HTML中...
Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)
10-20
这篇文章重点讲解了如何使用JavaScript操作DOM事件，特别是在监听鼠标相关事件上的技巧和实践。 ### 1. 鼠标点击（click）事件 在HTML元素上绑定点击事件是最常见的操作之一。通过onclick事件属性，当用户点击元素...
addEventListener事件
血色残阳的专栏
03-30 1044
addEventListener(type:String ,listener:Function,useCapture:Boolean=false,priority:int=0,useWeakReference:Boolean=false)       useCapture  表示是否打开捕获事件，默认为false       priority    表示监听器的优先级，默认为0，优
js事件 -- addEventListener事件
banni6813的博客
05-08 424
百度上很多篇文章讲解addEventListener DOM0级事件的时候讲解的都是覆盖，概念如下： 同一个元素的同一种事件只能绑定一个函数，否则后面的函数会覆盖之前的函数 其实不然，官网讲解 添加的事件不会覆盖已存在的事件。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"...
关于JS中addEventListener的使用
小火车况且况且况且的博客
03-10 4076
关于JS中addEventListener的使用 MDN中addEventListener()说明 主要用来实现事件的绑定 存在三个参数 target.addEventListener(type, listener, useCapture); type: 表示监听事件类型的字符串。类似于click,mouseover... listener: 用来监听处理的函数方法 useCapture: 默认是false,事件冒泡,可以设置为true为事件捕获 这里需要了解一下基本的事件流(事件捕获->事件目标
addEventListener()使用方法
热门推荐
搏·梦的博客
04-10 2万+
document.addEventListener() 方法用于向文档添加事件句柄，即事件监听。先看下面代码，稍后进行讲解。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...
js addeventlistener
Charles1938229的博客
02-17 2878
JavaScript是一种广泛应用于网页开发的脚本语言，具有灵活的语法和强大的功能。在网页中，我们经常需要处理用户的交互操作，例如点击按钮、输入文本等，而addEventListener方法就是用来处理这些事件的。
addEventListener使用方法
qq_40712151的博客
04-19 352
target.addEventListener(type, listener, useCapture); 加油，别放弃。啊啊啊啊啊，太难了，aaaa https://www.cnblogs.com/laonanren/archive/2013/03/13/2958474.html
js事件-笔记
qq_43563512的博客
10-26 756
这里写目录标题js事件常见事件事件的注册方式事件处理分级1.DOM0级事件处理程序：2. DOM2级事件处理程序：3. DOM3级事件事件流三个阶段 js事件 常见事件 onload 加载完成事件 页面加载之后，常用于页面js代码初始化动作 onclick 单击事件 常用于按钮的点击响应操作 onblur 失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法 onchange 内容发生改变事件 常用于下拉列表和输入框发生改变后操作 insubmit 表单提交事件 常用于表单提交前
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

言程序plus

你的鼓励将是我最大的创作动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值