冒泡监听、节点、cookie

最新推荐文章于 2023-03-26 10:32:13 发布

loey_ln

最新推荐文章于 2023-03-26 10:32:13 发布

阅读量170

点赞数 2

文章标签： javascript css html

本文链接：https://blog.csdn.net/loeyln/article/details/113852555

版权

一、事件的冒泡监听

1 事件的冒泡（Bubble）

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
e.cancelBubble=true;和 e.stopPropagation(); 都可取消冒泡。

<script type="text/javascript">
		window.onload=()=>{
			let d=document.getElementById('d');
			d.onclick=()=>console.log('I am pink')
			let p = document.getElementById('p')
			p.onclick=(e)=>{
			    console.log('I am blue')
				e.cancelBubble=true;
				// e.stopPropagation();
			}
		}
	</script>

	<body>
		<div id="d">
			<p id="p"></p>
		</div>
	</body>

在这里插入图片描述

2 事件的监听–addEventListener() 方法

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

一个元素可添加多个事件处理程序。
一个元素可添加多个相同类型的事件处理程序，例如两个 “click” 事件。
可向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。

addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。
当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。
使用removeEventListener() 方法轻松地删除事件监听器。

语法：
element.addEventListener(event, function, useCapture);

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数可选。

 window.onload=()=>{
        let btn=document.getElementById("btn");
        btn.addEventListener("click",function(){
            alert("Dont't click me")
        })
        btn.addEventListener("click",function(){
            alert("hhhhhhhhhhh")
        })
    }
</script>

<body>
    <button id="btn">点我呀</button>
</body>

在这里插入图片描述

3 阻止默认行为

语法:

e.preventDefault();

实例：

window.onload=()=>{
		    let a =document.getElementById('a')
			a.onclick=(e)=>{
				alert('点击了超链接');
				e.preventDefault();
			}
		}

<a href="01事件的冒泡.html" id="a">01事件的冒泡</a>

在这里插入图片描述

二、DOM元素（节点）

1 节点属性

nodeName 节点名字，返回字符串
nodeValue 节点当前值
nodeType 节点类型，返回的是一个整体：元素、文本、属性、注释、文档

2 添加和删除节点

创建新元素：appendChild() insertBefore()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

删除已有元素(从父删除子)：removeChild()

child.parentNode.removeChild(child);

替换元素：replaceChild()

parent.replaceChild(para, child);

3 遍历节点树的方法

Childnodes：返回一个数组，这个数组由給定元素节点的子节点构成。
Fristchcild：返回第一个子节点
Lastchild:它返回最后一个子节点
Parentnode:它返回一个给定节点的父节点
Nextsibling:它返回给定节点的下一个节点
Previousibling:它返回給节点的上一个节点

三、什么是cookie?

Cookie 是在您的计算机上存储在小的文本文件中的数据。
当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。
Cookie 是为了解决“如何记住用户信息”而发明的：

当用户访问网页时，他的名字可以存储在 cookie 中。
下次用户访问该页面时，cookie 会“记住”他的名字。

当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息

loey_ln

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
冒泡监听、节点、cookie

一、事件的冒泡监听1 事件的冒泡（Bubble）所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡e.cancelBubble=true;和 e.stopPropagation(); 都可取消冒泡。<script type="text/javascript"> window.onload=()=>{ let d=document.getElem
复制链接

扫一扫