js对象与事件DOM

已于 2023-09-06 14:02:12 修改
阅读量80 收藏 1
点赞数
文章标签： javascript 前端 html
于 2023-09-06 14:01:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haozhe6666/article/details/132713948
版权

前言

接着昨天讲讲js，学计算机的好像都避不开。

 知而不行，谓之不诚。 

行而不成，谓之不能。 

知而行，是赤诚之心，行而能，是贯彻到底，已经很难被其他人和事影响了。 

而知行合一的前提是，格物致知，将一件事研究到极致，变成自己的知识。 

比如做菜，将做菜这门手艺做到尽善尽美，色香味无可挑剔；比如建筑，将楼宇亭台建得坚固美观使用，美轮美奂，风雨不倒地震不塌；比如造船，将造船原理吃透，用料坚固，风浪不沉。 

这便是格物致知，将一件东西一件事情研究到极点，明白其中所有的道理。 

做到格物致知，方能知行合一。《剑来》

DOM介绍

通过 HTML DOM，JavaScript 能够访问和处理改变 HTML 文档的所有元素。

HTMLDOM（文档对象类型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

查找HTML元素

通过 id 找到 HTML 元素

通过标签名找到 HTML 元素

通过类名找到 HTML 元素

DOM文档

HTML DOM Document对象

访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

查找HTML元素

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id；

<p id="intro">你好世界!</p>

<script>

var x = document.getElementById("intro");

document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");

</script>如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

getElementById 是方法，而 innerHTML 是属性

getElementById 方法

访问 HTML 元素最常用的方法是使用元素的 id。

在上面的例子中，getElementById 方法使用 id="demo" 来查找元素。

innerHTML 属性

获取元素内容最简单的方法是使用 innerHTML 属性。

innerHTML 属性可用于获取或替换 HTML 元素的内容。

innerHTML 属性可用于获取或改变任何 HTML 元素，包括 和 。

document.write

document.write() 可用于直接向 HTML 输出流写内容

通过标签名查找 HTML 元素

<p>你好世界!</p>

<div id="main">

<p> DOM 是非常有用的。</p>

<p>该实例展示了 <b>getElementsByTagName</b> 方法</p>

</div>

<script>

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);

</script>

通过类名查找 HTML 元素

<p class="intro">你好世界!</p>

<script>

x=document.getElementsByClassName("intro");

document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");

</script>

改变HTML元素

element.innerHTML

修改 HTML 内容的最简单的方法是使用 innerHTML 属性

element.attribute

修改属性值

语法：document.getElementById(id).attribute=新属性值 注：(attribute就是要修改的属性

名)

//改变 <img> 元素的 src 属性

<body>

<img id="image" src="smiley.gif" width="160" height="120">

<script>

document.getElementById("image").src="landscape.jpg";

</script>

</body>

element.setAttribute

语法：document.getElementById(id).setAttribute(attribute, value) 注：(attribute不

需要引号引起来)

<body>

<img id="image" src="smiley.gif" width="160" height="120">

<script>

document.getElementById("image").setAttribute(src,"landscape.jpg");

</script>

</body>

element.style.property

语法：

第一种：document.getElementById(id).style="新元素样式"

第二种：document.getElementById(id).style.color = "blue"

<body>

<h1 id="header" style="color:red;">曹县，牛逼666我了宝贝</h1>

<script>

var element=document.getElementById("header").style="color:blue;";

</script>

</body>

使用事件改变

HTML DOM 允许你在事件发生时执行代码

当 "某些事情" 在 HTML 元素上发生时，浏览器会生成事件：

点击某个元素时

页面加载时

输入字段被更改时

<body>

<h1 id="id1">我的标题 1</h1>

<button type="button" οnclick="document.getElementById('id1').style.color =

'red'">点击我！</button>

</body>

DOM事件

对事件作出反应

JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。

为了在用户点击元素时执行代码，需要向 HTML 事件属性添加 JavaScript 代码：

HTML事件的例子：

当用户点击鼠标时

当网页加载后

当图像加载后

当鼠标移至元素上时

当输入字段被改变时

当 HTML 表单被提交时

当用户敲击按键时

事件处理程序调用函数

<body>

<h1 οnclick="changeText(this)">请点击此文本！</h1>

<script>

function changeText(id) {

id.innerHTML = "谢谢！";

}

</script>

</body>

//向 button 元素分配 onclick 事件：

<body>

<p>请点击按钮来显示日期。</p>

<button οnclick="displayDate()">时间是？</button>

<script>

function displayDate() {

document.getElementById("demo").innerHTML = Date();

}

</script>

<p id="demo"></p>

</body>

HTML 事件属性DOM 事件监听器
addEventListener() 方法

element.addEventListener(event, function, useCapture);

event参数是事件的类型（比如 "click" 或 "mousedown"）。

function参数是当事件发生时我们需要调用的函数。

useCapture参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的，默认是false。

注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。

addEventListener() 方法为指定元素指定事件处理程序。

addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。

您能够向一个元素添加多个事件处理程序。

您能够向一个元素添加多个相同类型的事件处理程序，例如两个 "click" 事件。

addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。

您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。

向元素添加事件处理程序

//第一种：直接使用函数

<body>

<p>此示例使用 addEventListener() 方法将 click 事件附加到按钮。</p>

<button id="myBtn">试一试</button>

<script>

document.getElementById("myBtn").addEventListener("click", function() {

alert("Hello World!");

});

</script>

</body>

向相同元素添加多个事件处理程序

<body>

<p>此示例使用 addEventListener() 方法将两个 click 事件添加到同一按钮。</p>

<button id="myBtn">试一试</button>

<script>

var x = document.getElementById("myBtn");

x.addEventListener("click", myFunction);

x.addEventListener("click", someOtherFunction);

function myFunction() {

alert ("Hello World!");

}

function someOtherFunction() {

alert ("此函数也被执行了！");

}

</script>

</body>

addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件：

传递参数

<body>

<p>单击按钮以执行计算。</p>

<button id="myBtn">试一试</button>

<p id="demo"></p>

<script>

var p1 = 5;

var p2 = 7;

document.getElementById("myBtn").addEventListener("click", function() {

myFunction(p1, p2);

});

function myFunction(a, b) {

var result = a * b;

document.getElementById("demo").innerHTML = result;

}

</script>

</body>

事件冒泡还是事件捕获？

在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。

事件传播是一种定义当发生事件时元素次序的方法。假如

，然后用户点击了这个

元素，应该首先处理哪个元素“click”事件？

在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 元素的点击事件。 元素的点击事件，然后是

在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理

元素的点击事件，然后是

元素的点击事件。

在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：

removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：

<!DOCTYPE html>

<html>

<head>

<style>

#myDIV {

background-color: coral;

border: 1px solid;

padding: 50px;

color: white;

font-size: 20px;

}

</style>

</head>

<body>

<h1>JavaScript removeEventListener()</h1>

<div id="myDIV">

<p>这个 div 元素有一个 onmousemove 事件处理程序，每次在这个橙色字段中移动鼠标时都会显示一

个随机数。</p>

<p>单击按钮以删除 div 的事件处理程序。</p>

<button οnclick="removeHandler()" id="myBtn">删除</button>

</div>

<p id="demo"></p>

<script>

document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {

document.getElementById("demo").innerHTML = Math.random();

}

function removeHandler() {

document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

}

</script>

</body>

</html>

事件拓展

禁止选中文字和禁止右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

selectstart 主要控制选中内容

<html>

<head>

<meta charset="utf-8">

<script type="text/javascript">

document.addEventListener('contextmenu', function(e)

{e.preventDefault();}) //preventDefault()取消事件的默认动作。

document.addEventListener('selectstart', function(e)

{e.preventDefault();})

</script>

</head>

<body>

<p>带到秋来九月八</p>

<p>我花开时百花杀</p>

</body>

</html>

JavaScript 事件

HTML 事件

常见的 HTML 事件

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

事件句柄

onblur 元素失去焦点。

onclick 当用户点击某个对象时调用的事件句柄。

ondblclick 当用户双击某个对象时调用的事件句柄。

onerror

在加载文档或图像时发生错误。

onfocus

元素获得焦点。

onmousedown

鼠标按钮被按下。

onmousemove

鼠标被移动。

onmouseout

鼠标从某元素移开。

onmouseover

鼠标移到某元素之上。

onmouseup

鼠标按键被松开。

onreset

重置按钮被点击。

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<form οnreset="alert('内容将被重置')">

Firstname: <input type="text" name="fname" value="" />

<br />

Lastname: <input type="text" name="lname" />

<br /><br />

<input type="reset" value="Reset">

</form>

</body>

</html>

景天学网安
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js中DOM事件绑定分析
11-27
js事件绑定 JavaScript 有三种事件模型： 内联模型 脚本模型 DOM2 模型 1、内联模型 //基本废除不用 <input type="button" value="按钮" onclick="alert('Lee');" /> <input type="button" ...
DOM事件类型、event对象，最详解析。
LeslieCheung_的博客
05-11 1万+
目录事件对象（一）DOM中的事件对象⑴ 示例⑵ 所有事件都有的event对象的属性和方法① currentTarget | this | targer 的区别 事件对象 在触发DOM上的某个事件时，会产生一个事件对象event，这个事件对象包含着所有与事件有关的信息，例如事件是冒泡还是捕获，事件的目标，鼠标坐标，键盘按下的键，等等信息，不要太好用 下面一起来看看event事件对象都有哪些内容吧。 （一）DOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论DOM0
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
js之DOM事件
m0_61547956的博客
04-22 3296
元素创建事件的两种方式 传统方式 on开头的事件，事件的唯一性，同一个元素同一个事件只能设置一个处理函数，后面的覆盖前面的，下列代码只弹出2。 var btns = document.querySelectorAll('button'); btns[0].onclick = function() { alert(1); } btns[0].onclick = function() { alert
JavaScript获取DOM对象常用方法
『愚』的博客
11-15 3967
获取DOM对象的常用方法有如下几种： getElementById() 通过元素的ID属性获取DOM对象，获取的是一个DOM对象。 getElementsByTagName() 通过元素的标签名获取DOM对象，获取的是一组DOM对象。 getElementsByClassName() 通过元素的class属性获取DOM对象，获取的是一组DOM对象。 getElementsByName() 通过元素的name属性获取DOM对象，获取的是一组DOM对象。 样例代码： <!DOCTYPE html&gt
JS的DOM操作——事件对象
m0_59345890的博客
07-18 302
运行结果可见，事件触发时，产生的数据会传入处理函数，这个数据正是我们需要的事件对象。其中是行内绑定时，行内无法获取事件对象；属性绑定和监听器绑定时，事件对象在参数中。事件触发时，handler函数内部会传入数据，这个数据就是事件对象。我们采用兼容写法，不管是那种方法触发的，我们都先判断判断一下参数e,事件的绑定方式有三种，行内绑定、属性绑定、监听器绑定。在监听器绑定中this指向的是dom元素本身。在属性绑定中this指向的是dom元素本身。在行内绑定中函数的调用者为window。...
javascript 删除dom对象的事件函数代码
01-19
JS添加/删除事件在IE和支持dom浏览器分别为：attachEvent（ie中的添加事件），detachEvent（ie中的删除事件），addEventListener（支持dom浏览器中的添加事件），removeEventListener（支持dom浏览器中的删除事件）...
jquery对象和javascript对象即DOM对象相互转换
12-09
DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法，但是不能使用 jQuery 里的方法。例如：document.getElementById(“img”).src = “test.jpg”；这里的document.getElemen
JavaScript常见事件对象与操作实例总结
10-17
主要介绍了JavaScript常见事件对象与操作,结合实例形式总结分析了javascript针对DOM、IE及跨浏览器事件对象的相关操作技巧,需要的朋友可以参考下
JavaScript Dom 绑定事件操作实例详解
12-13
本文实例讲述了JavaScript Dom 绑定事件操作JavaScript Dom 绑定事件操作。分享给大家供大家参考，具体如下： JavaScript Dom 绑定事件 // 先获取Dom对象，然后进行绑定 document.getElementById('xx').onclick ...
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 163
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
Vue3详细讲解
贫僧法号依平
05-15 852
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
vue2流星雨（可调角度）
m0_46961166的博客
05-17 271
新建StarBackground.vue组件。在需要使用的页面引用。
echarts的柱状图使用
qq_45331969的博客
05-15 187
【代码】echarts的柱状图使用。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 819
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
从零开始开发企业培训APP：在线教育系统源码剖析
meihusdk的博客
05-14 355
开发企业培训APP并非一朝一夕之功，需要全面的需求分析、合理的技术选型和系统的架构设计。在实际开发过程中，应不断根据用户反馈优化系统功能和用户体验。希望本文的剖析能够为有志于开发企业培训APP的开发者提供一些启示和帮助。
将js对象转换为dom对象
07-28
要将 JavaScript 对象转换为 DOM 对象，您可以使用以下方法之一： 1. 使用 document.createElement() 创建一个新的 DOM 元素，并为其设置属性和内容。 ```javascript const obj = { tagName: 'div', attributes:...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值