JS模块六（事件与节点）

最新推荐文章于 2024-04-03 11:38:14 发布
最新推荐文章于 2024-04-03 11:38:14 发布
阅读量176 收藏
点赞数
文章标签： js dom javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cx9977/article/details/108626543
版权

JS模块六（事件与节点）

键盘事件

	//onkeydown 按键按下时弹出
	//onkeyup 按键松开
	//onkeypress按下并松开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="" value="" onkeypress="show(event)">
	</body>
</html>
<script type="text/javascript">
	function show(e){
		alert(e.keyCode);
	}
</script>

鼠标事件

	//onmousedown 鼠标按下
	//onmouseup 鼠标松开
	//onmouseover 鼠标移上
	//onmouseout 鼠标移出
	//e.button e.which
	//0左键 1滑轮 2右键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				height: 33px;
				width: 77px;
				background: black;
			}
		</style>
	</head>
	<body>

		
		<div id="d1" onmousedown="show(this)" onmouseup="show1(this)" onmouseout="show2(this)" onmouseover="show3(this)"></div>
	</body>
</html>
<script type="text/jscript">
	function show(obj){
		obj.style.backgroud="gray"；
	}
	function show1(obj){
		obj.style.backgroud="brown"；
	}
	function show2(obj){
		obj.style.backgroud="blue"；
	}
	function show3(obj){
		obj.style.backgroud="green"；
	}
</script>

加载与卸载

//onload 一张页面或图片加载完成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var btn = document.getElementsByTagName('button')[0];
				alert(btn);
			}
		</script>
	</head>
	<body>
		<button type="button">一树梨花</button>
	</body>
</html>

切换事件

onchange  改变下拉选项时监听

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="" onchange="show()">
			<option>333</option>
			<option>777</option>
			<option>111</option>
		</select>
	</body>
</html>
<script type="text/jscript">
	function show(obj) {
		alert("已切换")
	}
</script>

选择事件

onselect 选中文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="" id="" value="这是默认值" onselect="show()"/>
	</body>
</html>
<script type="text/jscript">
	function show(obj) {
		alert("选中了")
	}
</script>

事件对象

	//事件对象中 有此属性 也能获取到绑定了该事件的元素对象
		//currentarget 获取的是绑定了该事件的那个元素对象
		//traget 获取的是触发了该事件的元素对象
		//type 获取事件类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wai {
				width: 333px;
				height: 177px;
				background: #000000;
			}
		</style>
	</head>
	<body>
		<div class="wai" onclick="show(event)">
			<button type="button">xx</button>
		</div>
	</body>
</html>
<script type="text/jscript">
	function show(e) {
		var m = e.target;
		var mm = e.currentarget;
		m.style.background = "blue";
		alert(e.type);
	}
</script>

事件冒泡

e.stopPropagation(); 阻止事件冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.o1 {
				width: 333px;
				height: 177px;
				background: #5eff45;
			}

			.o2 {
				width: 222px;
				height: 177px;
				background: #38beaf;
			}

			.o3 {
				width: 111px;
				height: 177px;
				background: #910838;
			}
		</style>
	</head>
	<body>
		<div class="o1" onclick="show1(event)">
			1
			<div class="o2" onclick="show2(event)">
				2
				<div class="o3" onclick="show3(event)">
					3
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/jscript">
	function show1(e){
		e.stopPropagation();
		alert(111111);
	}
	function show2(e){
		e.stopPropagation();
		alert(222222);
	}
	function show3(e){
		e.stopPropagation();
		alert(333333);
	}
</script>

阻止表单提交

e.preventDefault(); //阻止元素的默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="#" method="get" onsubmit="tijiao(event)">
			<input type="text" name="username" value="" />
			<br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>
<script type="text/jscript">
	function tijiao(e) {
		e.preventDefault(); //阻止元素的默认行为
		alert("异步提交");
	}
</script>

onmouseenter与mouseenter的区别

节点操作

  • 不会忽略空文本
document.body.firstChild; //注意空文本
document.body.firstChild.nextSibling;//下一个节点 兄节点
document.body.firstChild.nextSibling.previousSibling;//上一个节点 弟节点
  • 忽略空文本
document.body.firstElementChild; 第一个元素
document.body.lastElementChild; 最后一个元素
o1.nextElementSibling 下一个元素
o1.nextElementSibling.previousElementSibling 上一个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="o1" onclick="show1(event)">

			<div class="o2" onclick="show2(event)">

				<div class="o3" onclick="show3(event)">
					3xc3
				</div>
			</div>
		</div>
		<h1>33333</h1>
		<h2>33333</h2>
		<p>33333</p>
	</body>
</html>
<script type="text/jscript">
	var a = document.all;
	var obj = document.body.firstChild; //注意空文本
	alert(obj);
	var objc = document.body.firstChild.nextSibling;
	alert(objc);//下一个节点 兄节点
	var objcx = document.body.firstChild.nextSibling.previousSibling;
	alert(objcx);//上一个节点 弟节点
	var o1=document.body.firstElementChild;
	alert(o1);
	alert(o1.nextElementSibling);
	var o2=document.body.lastElementChild;
	alert(o2);
	alert(o1.nextElementSibling.previousElementSibling);
</script>

待续…

弎屲
关注
js鼠标事件与键盘事件
weixin_53125449的博客
01-17 394
节点操作 创建节点： 元素节点：document.createElement(“标签名”); 返回值：新的元素节点 创建完成后，需要插入到页面中才能看到 文本节点： document.createTextNode(内容); 插入节点 node.appendChild ,在父节点的最后添加一个新的子节点。 node.insertBefore(新节点，参考节点),在父节点的参考节点前添加一个新的子节点, 如果参考节点为null，则在父节点的最后添加新的子节点 ...
JS中的节点操作
woaikuangxuefen的博客
08-02 772
DOM的节点操作 create系列方法创建节点 方法 功能 document.createElement（） 创建一个元素节点 document.createTextNode（） 创建一个文本节点 document.createDocumentFragment（） 创建一个文档片段 document.createComment（） 创建一个注释节点 高效创建节点的方...
简单概括下浏览器事件模型，如何获得资源dom节点
weixin_34100227的博客
01-22 208
　　在各种浏览器中存在三种事件模型：原始事件模型，DOM2事件模型，IE事件模型。其中原始的事件模型被所有浏览器所支持，而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持。 　　浏览器事件模型分为三个阶段 　　1.捕获阶段 　　2.目标阶段 　　3.冒泡阶段 　　DOM节点获取方法： 　　1.通过id获取 document.getElementById() 　　2....
js05---节点、元素、事件、事件冒泡
m0_37756431的博客
03-08 246
目录 一、节点的概念（页面中所有的内容） 二、元素的创建 三、事件的绑定 1、为一个元素创建多个点击事件 2、绑定事件的区别 四、事件的解绑 五、事件冒泡 六、事件总结 一、节点的概念（页面中所有的内容） 1、父级节点/父级元素 obj.parentNode obj.parentElement 2、子节点/子元素 obj.childNodes 节点比元素多 obj.children 第一个子节点 obj.firstChild 第一个子元素 obj.fr...
JavaScript DOM 元素查找(1)，web应用开发平台
最新发布
【2023年电力EI会议】
04-03 718
/ 按元素关系查找// parentElement 父元素// children 子元素集合// firstElementChild 第一个子元素// lastElementChild 最后一个子元素// previousElementSibling 前一个兄弟元素// nextElementSilbing 下一个兄弟元素//查看body的父元素//查看HTML的直接子元素console.log(document.documentElement.children) // 类数组集合。
NodeModule.js:节点模块实用程序
07-11
节点模块.js 节点模块实用程序。 文档 （） 如何使用 节点.js 列出依赖模块。 var NodeModule = require ( "lib/NodeModule.js" ) ; console . log ( JSON . stringify ( NodeModule . files ( ) , null , 2 ) )...
netgear.js:节点js模块可通过SOAP与Netgear路由器进行通信
05-01
Nodejs程序包通过其SOAP接口与Netgear路由器进行通信。 可以做的比Netgear Nighthawk，Orbi或Genie应用程序能做的更多。 支持的路由器 通常，如果您可以使用Nighthawk Orbi或Nighthawk应用程序来管理路由器，则该...
esrijso-modules:用于创建模块列表以与ArcGIS JavaScript Optimizer一起使用的节点工具
05-08
简单节点应用程序，它将扫描目录并仅创建依赖项列表。 npm install -g esrijso-modules 选项 -h, --help output usage information -V, --version output the version number -s, --src <directory> Source ...
JS模块连线流程结构图代码
07-24
在JavaScript（JS）开发中，模块化是一种组织代码的有效方式，它可以帮助我们创建可重用、可维护的代码结构。本话题将详细讲解"JS模块连线流程结构图代码"的相关知识点，包括模块化原理、流程图与结构图的实现、以及...
redis-update-events:使用Redis PUBSUB广播所有事件的节点模块
06-10
使用Redis PUBSUB广播所有事件的节点模块 ！ 这是一个正在进行的工作 ！ 安装 目前没有发布任何内容。 安装 npm install --save rangermauve/redis-update-events 应用程序接口 var RUE = require ( "redis-...
ES6中javascript实现函数绑定及类的事件绑定功能详解
10-19
主要介绍了ES6中javascript实现函数绑定及类的事件绑定功能,结合实例形式分析了ES6中函数绑定及类的事件绑定原理、实现方法、相关操作技巧与注意事项,需要的朋友可以参考下
dom相关的api操作
weixin_54327001的博客
05-11 589
ul>li{$}*5。
获取DOM节点及节点关系、DOM操作
Albert_ChengXY的博客
08-12 370
DOM节点 获取DOM节点 document.getElementsByName();(主要用于表单)，通过Name，获取元素。最终获取的是NodeList。所以所有表单最好都加上name属性。 NodeList是通过forEach方法遍历的。 nodeList是有forEach方法遍历 var list=document.getElementsByName(“sex”); list.forEach(function(item){ console.log(item); }) document.getElem
关于DOM节点
weixin_52603337的博客
12-13 119
dom的简单介绍 作为bom下的分支，文档指的是当前文本框内部的窗口，在控制台写入的所有东西 例如 console.log(document); console.log(document.documentElement);//html标签 console.log(document.head); console.log(document.body); console.log(document.styleSheets);//CSS
JavaScript 的 firChile、firstElementChild与children
小陈爱写代码
05-17 327
Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null <div> <img src=""> </div> var img = document.body.children[0].firstChild; console.log(img); 在我们平时想获取父元素的第一个子元素的节点时候，通常使用 firstChild 这段代码的作用是，获取到 div 标签下 img 节点，但是发现控制台输出的是 #text，因
dom操作
weixin_34220963的博客
10-28 68
1、获取元素getElementById();                     返回类型为elementgetElementByTagName();        返回类型为集合getElementByClassName();      返回类型为集合querySelector();                        通过id或者类获取第一个符合条件的元素，返回值为elemen...
向body添加一个元素
热门推荐
weixin_45003282的博客
02-18 1万+
原生JS向body添加一个元素或字符串问题请教！ //新建一个div元素节点 var div=document.createElement(“div”); div.innerText = “helloworld”; //把div元素节点添加到body元素节点中成为其子节点，但是放在body的现有子节点的最后 document.body.appendChild(div); //插入到最前面 docu...
DOM扩展
越努力，越幸运！
03-24 1173
JS中DOM扩展的一些总结
巧用 firstElementChild
liuzijiang1123的专栏
04-24 2447
firstElementChild：是用于返回DOM对象的第一个子元素。 举个小例子了解一下： &lt;div&gt; &lt;p&gt;123&lt;/p&gt; &lt;p&gt;456&lt;/p&gt; &lt;/div&gt; var oDiv=document.getElementsByTagName("div")[0]; cons
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值