js 事件流+事件委托+本地存储-CSDN博客

本文链接：https://blog.csdn.net/qq_57985616/article/details/130512430

本文介绍了JavaScript中的一些重要概念，包括如何使用组合键改变页面背景色，事件流的冒泡和捕获机制，以及如何阻止事件冒泡。此外，还展示了事件委托的实现，用于动态添加元素时保持事件监听。同时，文章讨论了如何利用localStorage进行本地数据存储，包括增删改查操作，并给出了使用JSON转换数据的例子。

摘要由CSDN通过智能技术生成

1.组合键

例：Ctrl+回车（keyCode=13）变化浏览页面背景色

function   function testCombinationKey(e){

         e=e||event

         if(e.ctrlKey && e.keyCode===13){

document.body.style.backgroundColor="yellowgreen"

}

         document.addEventListener("keydown",testCombinationKey)

2.事件流

//事件冒泡 :内到外

//事件捕获 :外到内

例子：(点击按钮事件发生冒泡外层事件也回执行) ---使用e.stopProgation() 阻止冒泡行为

<body>

<div class="box">

<button id="btn">hello world</button>

</div>

</body>

<script>

      var btn=document.querySelector("#btn")

var box=document.querySelector(".box")

        btn.addEventListener("click",function(e){

e=e||event

// 创建时间对象 ,阻止事件冒泡

e.stopPropagation()

console.log("button按钮点击事件");

})



        box.addEventListener("click",function(){

console.log("box点击事件触发!");

})

例子：自定义下拉框

<style>

.title{

cursor: pointer;

}

.list{

display: none;

}

</style>

<div class="container">

<h2 class="title">-----请选择你喜欢的游戏----</h2>

<ul class="list">

<li>英雄联盟</li>

<li>DOTA</li>

<li>CSGO</li>

<li>老头环</li>

<li>地平线</li>

<li>GTA5</li>

<li>王者荣耀</li>

</ul>

</div>

<script>

        var title = document.querySelector(".title")

        var list = document.querySelector(".list")

//点击出现 list

function showList(e){

e=e||event

e.stopPropagation();

// console.log(1);

list.style.display="block"

}

title.addEventListener("click",showList)

//点击浏览器 list隐藏

         function hideList(){

list.style.display="none"

}

document.addEventListener("click",hideList)

var lis=list.children

         //批量绑定事件

for (let i = 0; i < lis.length; i++) {

lis[i].addEventListener("click",titleChange)

}

          function titleChange(){

title.innerHTML=this.innerHTML

}

</script>

3..事件委托

<div class="container">

<button class="btn">这是一个按钮</button>

</div>

<button class="btn2">替换 container内容</button>

<script>

var btn1=document.querySelector(".btn")

var btn2=document.querySelector(".btn2")

        var container=document.querySelector(".container")

        btn2.addEventListener("click",function(){

//内容被更换后,dom也会变为新的

container.innerHTML+='<button class="btn">这是一个按钮</button>'

})

        //事件委托把button 的事件给不会替换的父元素(利用冒泡)

container.addEventListener("click",function(){

alert("按钮触发")

})

效果图：

点击“替换container内容”

点击 “这是一个按钮”

事件委托效果：把原来的事件给父元素，原来的点击效果回冒泡给父元素

例子：事件委托-标准版

<ul class="list">

<li>hello world</li>

<li class="li">hello world</li>

<li class="li">hello world</li>

<li>hello world</li>

<li>hello world</li>

<li>hello world</li>

</ul>

var list = document.querySelector(".list")

list.addEventListener("click", function (e) {

e = e || event

//事件源

var target = e.target || e.srcElement

// 判断是否符合事件源

if(target.nodeName==="LI"){ //注意 nodeName必须是大写的

console.log("li被点击了");

}

if(target.className==="li"){

list.style.backgroundColor="pink";

}

})

4.默认事件 ---阻止默认事件e.preventDefault()

.menu {

background-color: #ddd;

position: absolute;

display: none;

}

<div class="menu">

<ul>

<li>功能1</li>

<li>功能2</li>

<li>功能3</li>

<li>功能4</li>

</ul>

</div>

// 自定义右键菜单

var menu = document.querySelector(".menu")

document.addEventListener("contextmenu", function (e) {

e = e || event;

// 1.阻止默认事件

e.preventDefault();

// 2.让自定义菜单显示

menu.style.display = "block";

menu.style.left = e.pageX + "px";

menu.style.top = e.pageY + "px";

})

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

menu.style.display = "none";

})

5.本地存储 localStorage

增删改查

localStorage.setItem( key, value) 增/改

localStorage.getItem(key) 查

localStorage.removeItem(key) 删

查出的是key值

localStorage.key(index)

例子：使用 localStorage 记录当前页面打开了多少次

function recordCount(){

var count=localStorage.getItem("count");

if (count===null){

count=0

}

count++

// 赋值

document.body.innerHTML=count

// 把数据放回本地里面

localStorage.setItem("count",count)

}

recordCount();

6.json

JSON.parse （）json转化为对象

JSON.stringify（）对象转化为字符串

例子：存储升级存多个数据 ---存打开次数和打开页面的时间戳

// 取值

function recordCount(){

var count=localStorage.getItem("count");

// 有值直接计算

//无值创建初始

if(count===null){

count={

count:0,

time:Date.now()

}

}else{

count=JSON.parse(count)

}

// 计算

count.count++

var reduce=Date.now()-count.time

count.time=Date.now()

// 赋值

document.body.innerHTML="第"+count.count+"次刷新页面"+",距离上次刷新"+reduce+"ms"

// 把数据放回本地里面

localStorage.setItem("count",JSON.stringify(count))