JS事件篇

最新推荐文章于 2024-03-25 14:32:41 发布
VIP文章 最新推荐文章于 2024-03-25 14:32:41 发布
阅读量760 收藏 5
点赞数 2
分类专栏： 前端 html 文章标签： 正则表达式 python 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/drhrht/article/details/123255164
版权

事件篇

window.onload:事件

浏览器加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面上边，在代码执行的时候，页面还没有完全加载

window.onload事件会在整个页面加载完成之后，才会触发，将对应的script代码，写在里面，可以确保script代码可以在页面加载完成之后，才会执行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠</title>
	</head>
	<body>
<div id="div"><strong>嘿嘿</strong></div>
		<script type="text/javascript">
		window.onload=function()
		{
			//返回的是元素数组对象
			    var d1=document.getElementById("div");
			    alert(d1.innerHTML);
		}
		</script>
	</body>
</html>

Dom查询

在这里插入图片描述

innerhtml ----获取节点的html内容，或者设置对应节点html内容

innerHTML在JS是双向功能：获取对象的html内容 或 向对象插入html内容

我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容；

也可以对某对象插入内容，如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’;

在这里插入图片描述

读取或者设置节点的相关属性

			//返回的是元素数组对象
			    var d1=document.getElementById("div");
			    //读取或设置节点class属性
				d1.className
				//id属性
				d1.id
				//name属性
				d1.name
				//value属性
				d1.value

获取元素节点的子节点

在这里插入图片描述
childNodes属性会获取包括文本节点在内的所有节点，注意DOM标签与标签之间的空白也会被当成文本节点

在这里插入图片描述

在IE8一下的浏览器中，不会将空白文本当成子节点，所以该属性再IE8中会返回4个子元素，而其他浏览器都是9个

children属性可以获取到当前元素所有子元素，不包括文本节点

在这里插入图片描述

区分概念: 节点包括文本节点，而元素不包括文本节点

firstChild获取当前元素第一个子节点 VS firstElementChild获取当前元素第一个子元素

firstElementChild不支持IE8和一下的浏览器
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

抽离出按钮点击函数的小案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠</title>
	</head>
	<style>
	div
	{
		height: 50px;
		width: 100px;
	}
	</style>
	<body>
<div>
	<button id="btn1">按钮1</button>
</div>
<div>
	<button id="btn2">按钮2</button>
</div>
<div>
	<button id="btn3">按钮3</button>
</div>
		<script type="text/javascript"
最低0.47元/天 解锁文章
drhrht
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅析JavaScript事件和方法
10-24
本文通过示例向大家简单分析了javascript的事件和方法，文章简洁而不简单，是篇非常不错的基础文章，这里推荐给大家。
DOM事件探秘篇
01-19
2.JS事件探索 1.HTML事件处理程序 — 直接写在html标签里面的js触发语句。 2.DOM0级事件处理程序。 把一个函数赋值给一个事件的处理程序属性，用的比较多的方法，简单，跨浏览器的优势。 3.DOM2级事件处理程序。 （1...
JavaScript：文档加载事件和浏览器的重排、重绘
读心悦
10-25 995
很多时候需要在页面初始化阶段执行一些特定的操作，页面初始化的操作就是文档加载完成后的执行的操作。在DOM中，文档加载完成有两个事件，一个load事件，另一个是jQuery提供的ready事件。ready事件的触发表示文档结构已经加载完成，不包含图片、flash这些非文字媒体内容。onload事件的触发表示页面图片、flash这些所有元素已经加载完成。
深入理解js中的加载事件
ruby_xc的博客
09-26 1851
load load事件：当页面完全加载后（包括所有图片、javascript文件、css文件等外部资源），就会触发window上的load事件window.onload = function(e) { e = e || event; var target = e.target || e.srcElement; console.log(target); }IE中输
【前端学习——js篇】6.事件模型
最新发布
qq_44061175的博客
03-25 686
具体见：https://github.com/febobo/web-interview。
JS中页面加载事件window.onload、onload()、document.onclick
xiaokangmiclong的博客
11-20 8804
当我们刷新页面的时候，有时需要页面自动加载一些事件来达到预期效果，现介绍下面三种方法Onload()、addLoadEvent()、document.onclick。 onload() 事件会在页面或图像加载完成后立即发生。注意是在页面或图像加载后才发生，所以当页面有很大数据量没加载完时，onload()事件不会发生。而addLoadEvent()会在页面刷新的时候发生，document.o
JavaScript基础——滚动事件、加载事件、三大家族
NGUP_LEE的博客
04-05 3951
文章目录一、滚动事件和加载事件1.1 滚动事件1.2 加载事件二、元素的大小和位置2.1 scroll家族2.2 offset家族2.3 client家族 一、滚动事件和加载事件 1.1 滚动事件 当页面滚动时触发的事件 时间名：scroll 样例，监听整个页面滚动： window.addEventListener('scroll',funtion(){ //执行操作 }) 可以给window或者document添加scroll事件 1.2 加载事件 加载外部资源（如图片、外联CSS和JavaScr
JS 事件大全及详解
足各路
01-23 3007
一、事件详解： 事件不会自己执行，需要触发(即事件被触发之后才可执行) 事件三要素： - 事件对象 - 事件名称 - 事件处理函数 常见事件写法： - 嵌入式(传统事件绑定) 优点：简单易懂 缺点：将JavaScript代码与html代码混为一起，不利于多人协作开发 例如：(直接在HTML中写入JS代码) &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;button onclick=&amp;amp
js 事件详解(一)
RayShyy的博客
03-24 978
1. 什么是事件？ 事件： 指用户在某事务上由于某种行为所执行的操作；拿例子通俗的来说：比如点击一个按钮，让它在点击后实现某些效果；点击之后触发实现效果，即就是给这个按钮添加了点击事件。 2. 事件三要素 事件源：添加事件的对象； 事件类型：添加那种类型的事件； 事件处理函数：触发事件执行的函数。 3. 常用的事件 鼠标事件： 事件 事件名称 触发条件 onclick 点击事件 单击鼠标左键触发 ondblclick 双击事件 双击鼠标左键触发 onmouseover 移动到
JavaScript中事件及其详解
qq_46642326的博客
11-16 1127
JS的dom操作可以改变网页内容，结构和样式，我们就可以利用dom操作元素来改变元素里面的内容属性等。：回调函数的特点：自己把这个函数代码写出来了，但是这个函数不是自己负责调用，由其他程序负责调用该函数。onmouseover和onmouseenter的区别：前者会影响子元素的触发事件，后者不会影响。onmouseover：鼠标移入某个元素触发。【修改元素属性】：先获取元素，注册事件，处理程序，然后直接调用元素的属性赋值。onkeyup：某个键盘按键被松开。事件源：事件被触发的对象，就是谁触发了这个事件。
js中事件的应用
小屋博客
10-11 554
大家在页面上添加各种特效必不可少的运用到某些事件，比如点击onclick、经过onmouseover、离开onmouseout、移动onmousemove等，上面的为鼠标事件，还有键盘事件onkeydown，诸如此类的事件还有很多。这里我给大家介绍一点我了解的知识给大家，运用event对象和事件来处理一些事。 首先，对event对象进行兼容性处理 window.onload=function
js中的事件都有哪些和功能（2）
IKUNzhenin的博客
10-16 68
10. 自定义事件（CustomEvent）：通过自定义事件可以实现更高级的、自定义的交互功能，开发人员可以自行定义事件的名称、参数和触发条件等。8. 页面卸载事件（beforeunload、unload）：当用户关闭页面或离开页面时触发，可用于执行一些清理或提示操作。5. 改变事件（change）：当表单元素的值发生改变时触发，通常用于监听输入框、下拉列表等的变化。4. 加载事件（load）：当页面或资源加载完成时触发，可用于执行初始的页面设置或加载其他资源。
JavaScript常用事件介绍
10-17
今天小编就为大家分享一篇关于JavaScript常用事件介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
javaScript 页面自动加载事件详解
10-26
本篇文章主要是对javaScript页面自动加载事件进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
JavaScript 学习笔记（十六） js事件
10-29
事件对象里包含三个方面的信息····回看上一篇内容！事件对象里的属性和方法，主要是鼠标和键盘的信息。
JS事件
Ulrica_Amaris的博客
09-07 502
事件 1.事件就是交互事件，用户点击实现回馈，是交互体验的核心功能。 绑定事件 1.ele.onxxxx = function(event){} 兼容性很好，但是一个元素的同一事件上只能绑定一个 基本等同于写在HTML行间上。 2.obj.addEventListener(type, listener, options) IE9以上，可以为一个事件绑定多个处理程序。 3.obj.attachEvent(‘on’ + type, fn（事件处理函数）)； IE独有，一个事件同样可以绑定多个处理程序 解除事件
[js点滴]JavaScript事件详解
图解AI
11-13 9729
Event对象 目录 事件是一种异步编程的实现方式，本质上是程序各个组成部分之间的通信。DOM支持大量的事件，本节介绍DOM的事件编程。EventTarget接口DOM的事件操作（监听和触发），都定义在EventTarget接口。Element节点、document节点和window对象，都部署了这个接口。此外，XMLHttpRequest、AudioNode、AudioContext等浏览器内置对
dom的Event模型与js里面常用的事件演示
xiaozhuangyumaotao的博客
05-24 160
事件的总结 dom的事件模型可以用下图表示，左边表示的是事件源，事件都是发生在事件源上，发生事件之后，我们可以定义对该事件该做出什么响应，我们需要把响应的代码写在一个回调函数里面，在回调函数里面可以取到"事件"这个对象，这个对象包含了事件源触发的事件的各种信息，js把这些信息封装成了一个对象，就是"事件"对象。这就是事件源、事件、事件的响应三者之间的关系。可以用下图简单的表示： DOM事件句柄与事件：表示一个事件在什么时候发生的称为事件句柄，下面表格展示的是常用的事件句柄。 属性...
写一篇前端js的经验案例
06-08
好的，下面是一篇前端 JavaScript 的经验案例。 在开发一个电商网站的过程中，我遇到了一个问题：如何实现商品分类的联动效果。具体来说，就是当用户选择了某个大的商品分类后，下面的小分类会自动更新并显示只属于这个大分类的小分类。 我使用了以下的解决方案： 1. 首先，我在后端的商品数据中，为每个商品都添加了一个“分类”属性，其中大分类和小分类都在这个属性中进行了标记。比如，一个大分类为“服装”，小分类为“男装”的商品，就会被标记为“分类：服装->男装”。 2. 接着，我在前端的页面中，使用了 jQuery 库来实现分类的联动效果。具体来说，我先监听了大分类的选择事件，在选择发生变化时，向后端发送一个 AJAX 请求，请求只包含所选择的大分类的信息。后端收到请求后，会根据这个信息，查询数据库，找到所有属于这个大分类的小分类，并返回给前端。 3. 前端收到后端的响应后，就可以将所有属于这个大分类的小分类展示出来了。具体来说，我是通过 jQuery 来操作 DOM 元素，先清空了所有小分类的选项，然后再将后端返回的小分类信息一个一个地添加到小分类的选择框中。 这样，当用户选择了大分类时，小分类就会自动更新并显示只属于这个大分类的小分类了。这种联动效果可以有效地提升用户体验，让用户更加方便地找到所需要的商品。 总之，这是一个基于 jQuery 和 AJAX 的前端 JavaScript 经验案例，可以帮助开发者更好地理解如何实现分类的联动效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值