javascript事件当中的删除节点插入节点

最新推荐文章于 2022-11-26 10:32:35 发布

cdcdhj

最新推荐文章于 2022-11-26 10:32:35 发布

阅读量87

点赞数

分类专栏： javascript学习日记文章标签： javascript

本文链接：https://blog.csdn.net/cdcdhj/article/details/117339623

版权

javascript学习日记专栏收录该内容

123 篇文章 0 订阅

订阅专栏

删除节点的事件，在第三版13.4.6事件变动那里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script language="javascript" src="shijian.js"></script>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul id="mylist">
			<li>item 1</li>
			<li>item 2</li>
			<li>item 3</li>
			<li>item 4</li>
			
		</ul>
		<script language="javascript">
			window.onload=function(event){
				var list=document.getElementById("mylist");
				document.addEventListener("DOMSubtreeModified",function(event){
					alert(event.type);
					alert(event.target.tagName);
				});
				document.addEventListener("DOMNodeRemoved",function(event){
					alert(event.type);
					alert(event.target.tagName);
					alert(event.relatedNode.tagName);　　//这里的event.relateNode属性是父节点boby的引用，加tagName后就显示父节点标签名
				});
				list.firstChild.addEventListener("DOMNodeRemovedFromDocument",function(event){
					alert(event.type);
					alert(event.target);
				});
				list.parentNode.removeChild(list); //这里是删除，触发事件第２个DOMNodeRemoved事件，然后触发第３个DOMNodeRemovedFromDocument文本事件，然后触发第１个变动事件
			};
		</script>
	</body>
</html>

插入节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script language="javascript" src="shijian.js"></script>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul id="mylist">
			<li>item 1</li>
			<li>item 2</li>
			<li>item 3</li>
			<li>item 4</li>
			
		</ul>
		<script language="javascript">
			window.onload=function(event){
				var list=document.getElementById("mylist");
				var item=document.createElement("li");  //创建li元素
				item.appendChild(document.createTextNode('item 5'));　//添加文本节点到li节点中
				document.addEventListener("DOMSubtreeModified",function(event){
					alert(event.type);
					alert(event.target.tagName);  //显示父节点ul
				});
				document.addEventListener("DOMNodeInserted",function(event){
					alert(event.type);
					alert(event.target);		//显示插入的节点li
					alert(event.relatedNode.tagName);　　//显示父节点ul
				});
				item.addEventListener("DOMNodeInsertedIntoDocument",function(event){
					alert(event.type);
					alert(event.target.tagName);  //显示插入的节点li
				});
				list.appendChild(item);　//添加li节点到父节点ul当中去，然后触发第２个插入事件，再触发第３个，再第１个事件
			};
		</script>
	</body>
</html>

cdcdhj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript事件当中的删除节点插入节点

删除节点的事件，在第三版13.4.6事件变动那里<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script language="javascript" src="shijian.js"></script> <style type="text/css"> </style&g
复制链接

扫一扫