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))