事件
浏览器自动触发的或用户手工触发的页面中内容或状态的改变
事件处理函数: 当事件发生时，希望浏览器自动调用的函数
绑定事件: 提前将事件的处理函数，保存到元素身上的事件属性中，暂存，暂不执行。
为什么绑定事件: 默认元素上所有on开头的事件属性默认值都为null，意为着即使元素上发生了事件，也不会执行任何操作
何时绑定事件: 只要希望当事件发生时，能自动执行一项提前准备好的任务时。
绑定事件
1.在HTML中绑定：<元素 on事件名="函数名"> JS定义事件处理函数：function 函数名(){ ... }
问题:因为要绑定事件的HTML元素,分布在网页的各个角落,如果在各个角落写满js函数调用语句,不便于统一维护
2.在JS中绑定：查找触发事件的元素;元素.on事件名=function(){ ... }
优点: 都在js中集中编写，便于统一维护。
问题: 希望给一个元素的一个事件属性添加多个事件处理函数 但是因为"元素.on事件名=function(){ ... }"是以赋值方式给事件属性添加事件处理函数。如果反复给一个元素的一个事件属性用=赋值不同的事件处理函数，结果两个事件处理函数无法并存。而是后赋值的事件处理函数会覆盖之前旧的事件处理函数。
(3). 在js中绑定，以添加事件监听对象的方式来绑定:元素.addEventListener("事件名", 事件处理函数)
强调:事件名不要加"on"，因为在DOM标准中，所有事件名本来也没有on前缀 只不过 在元素对象身上 为了和其它普通属性做区分才将所有事件属性以"on"开头！
原理:
1). addEventListener先创建一个事件监听对象，其中保存三样东西: 元素对象、事件名、事件处理函数
2). 将新创建的事件监听对象添加到浏览器的事件监听对象队列中
3). 当某个元素上发生某个事件时，浏览器先在元素身上的事件属性上查找有没有事件处理函数。如果在元素身上的事件属性上找到事件处理函数，则优先执行事件属性上的事件处理函数
4). 接下来浏览器会去遍历事件监听对象队列，用当前触发事件的元素对象和事件名作为查找条件去事件监听对象队列中查找符合条件的事件监听对象。自动执行事件监听对象中保存的事件处理函数。找到几个，就会执行几个！
移除事件监听对象:
1). 元素.removeEventListener("事件名", 原事件处理函数对象)
2). 原理: 用当前元素对象+事件名+原事件处理函数地址作为查找条件，去事件监听对象的队列中查找符合条件的监听对象。只要找到符合条件的监听对象，就移除。
3). 坑: 如果添加事件监听对象时，使用的是匿名函数，则移除事件监听时，就不可能获得原事件处理函数对象的原地址。只要无法获得原事件处理函数原地，都无法正常移除原来的事件处理函数
4). 解决: 将来如果一个事件监听对象有可能被移除，则在添加事件监听对象时就不能用匿名函数。必须用有名称的函数。因为函数名中保存住了事件处理函数的地址，所以，移除时，才可能使用函数名来移除原事件处理函数对象。
坑的总结：只要用函数名就没有办法加两个,但可以移除,但用函数名可以移除,但无法加多个
//示例：这个是有问题的 有名的函数不可能加多个
坑：如果使用有名称的函数添加事件监听对象 则只能添加一个
因为浏览器的事件监听对象队列规定 完全相同的事件监听对象只能添加一个
<body>
<button id="d1">shoot</button>
<button id="d2">add</button>
<button id="d3">remove</button>
<script>
var d1=document.getElementById("d1")
var d2=document.getElementById("d2")
var d3=document.getElementById("d3")
//给d1添加一个事件处理函数;
d1.addEventListener("click",()=>{
console.log("触发一个事件对象")
})
// 因为添加事件监听对象,都是匿名函数,无法获得地址,会导致无法正常移除原来的函数;
// 所以我们创建一个有名字的函数在监听中写入
var Add=function(){
alert("给d1添加第二个事件对象")
}
// 点击d2给第一添加一个新的事件
d2.onclick=function(){
d1.addEventListener("click",Add)
}
//点击d2移除事件
d3.onclick=function(){
d1.removeEventListener("click",Add)
}
</script>
</body>
既添加多个事件监听,同时还能移除,必须借助数组的力量
使用数组保存每次创建的新的事件处理函数对象。移除时，从数组中取出事件处理函数对象，再去事件队列中移除该事件梳理函数对象
<body>
<button id="d1">shoot</button>
<button id="d2">add</button>
<button id="d3">remove</button>
<script>
var d1=document.getElementById("d1")
var d2=document.getElementById("d2")
var d3=document.getElementById("d3")
//给d1添加一个事件处理函数;
d1.addEventListener("click",()=>{
console.log("触发一个事件对象")
})
// 定义一个空数组,保存d1的所有事件函数
var arr=[];
//点击d2给d1添加一个事件
d2.onclick=function(){
// 临时创建一个函数
var Add=function(){
console.log("给d1添加第二个事件")
}
arr.push(Add)
//将地址追加给数组中保存
d1.addEventListener("click",Add)
}
// 点击d3移除
d3.onclick=function(){
// 从数组中取出一个事件处理函数的地址
var fun=arr.pop();
d1.removeEventListener("click",fun)
}
</script>
事件模型
事件模型: 从触发事件开始，到所有事件处理函数执行完，所经历的过程
点在内层元素上，也会反复触发父元素上的事件处理函数
1.事件模型的阶段：
(1)捕获阶段：从最外层的html元素开始 到当前触发事件的元素结束 遍历当前触发事件的元素的各级父元素 并记录各级父元素上绑定的事件处理函数
(2)目标触发: 优先触发目标元素上的事件处理函数 目标元素(target): 鼠标直接点击的最初触发事件那个元素
(3)冒泡:从目标元素开始，由内向外，依次触发各级父元素上绑定的事件处理函数
事件对象
在事件发生时，浏览器自动创建的，保存事件信息的对象
何时使用：a.想获得事件相关信息是 b.改变事件模型的行为
1.获取事件对象
如何获取事件对象：事件对象总是作为事件处理函数的第一个实参值自动传入
元素.on事件名=function(event){
//形参变量event会自动获得浏览器创建的对象
}
元素.addEventListener("事件名",function(event){
//形参变量e也会自动获得浏览器创建的事件对象
})
2.取消冒泡:
(1)event.stopPropagation() //放前放后无所谓 因为他阻止的是父元素的代码;
//例：
<body>
<div id="d1">
<div id="d2">
<div id="d3"></div>
</div>
</div>
<script>
var d1=document.getElementById("d1")
var d2=document.getElementById("d2")
var d3=document.getElementById("d3")
//事件模型: 从触发事件开始，到所有事件处理函数执行完，所经历的过程
//事件对象总是作为事件处理函数的第一个实参值自动传入
d1.onclick=function(event){
event.stopPropagation();
alert("d1")
}
//点在内层元素上，也会反复触发父元素上的事件处理函数
d2.onclick=function(){
alert("d2")
}
d3.onclick=function(e){
alert("d3")
e.stopPropagation();
}
</script>
</body>
3.利用冒泡/事件委托
问题：浏览器触发事件处理函数时，是通过遍历事件监听对象队列的方式查找符合条件的事件监听对象，触发其中的事件处理函数。如果事件监听对象过多，遍历就会慢 查找速度就会慢 导致事件响应延迟
优化: 尽量减少页面中事件监听的个数！其实就可以加快遍历查找的速度，加快事件响应的速度。
利用冒泡/事件委托 3步：当多个平级子元素都需要绑定相同的事件时，只要在父元素上绑定一次事件处理函数，就可以让所有子元素通过冒泡机制共用父元素上的事件处理函数。
问题：无法再用this获得当前点击的目标元素本身了。因为事件绑定在父元素上，当事件处理函数执行时，已经冒泡到了父元素上，this->父元素了，不再指向子元素了！
今后只要利用冒泡，都要用e.target代替this获得实际点击的目标元素:
1). this，会随冒泡而改变:
i. 当事件绑定在子元素上时，this->子元素
ii. 当事件绑定在父元素上时，this->父元素
2). e.target，不随冒泡而改变，始终保存着最初触发事件的那个目标元素对象。
问题: 父元素下不是所有子元素都希望触发事件。
解决:只要利用冒泡，都要先验证点击的目标元素是不是想要的！只有点击的目标元素是想要的，我们才继续执行后续代码。如果点击的目标元素不是想要的，就什么都不做
总结：1.多个平级子元素都要绑定相同事件时,绑定在父元素
2.用e.target代替this
3.验证目标元素是不是想要的
///示例：
<body>
<div id="keys">
<button>1</button><span>*</span>
<button>2</button><span>*</span>
<button>3</button><span>*</span>
<button>4</button><span>*</span><br>
<button>C</button><span>*</span>
<button>+</button><span>*</span>
<button>-</button><span>*</span>
<button>=</button><span>*</span>
</div>
<textarea id="sc" style="resize:none;width:200px; height:50px;" readonly></textarea>
<script>
//1. 当多个平级子元素都要绑定单击事件处理函数时，其实只要在父元素上绑定一次事件处理函数即可
var keys=document.getElementById("keys")
keys.onclick=function(e){
// alert("疼!");
//点谁让谁变成❀
//错误:
//this.innerHTML="❀";
//正确:
//要求，只有点在button上才变小花
// 节点名称
// 标签名
// 全大写
if(e.target.nodeName=="BUTTON"){
//e.target.innerHTML="❀";
//作业: 看注释实现完整计算器效果。
//先判断点击的按钮的内容
switch(e.target.innerHTML){
//如果是C，就清空显示屏文本框
case "C":
sc.value="";
break;
//如果是=，就将文本框内容，交给eval计算结果，再将结果放回显示屏中
case "=":
//错误处理: 复习第一阶段
try{//尝试执行
//eval: 可计算字符串类型的js表达式的值.——复习第一阶段
sc.value=eval(sc.value);
}catch(err){//如果出错
sc.value=err;//就把错误信息显示在文本框中
}
break;
//点击其余所有数字按钮和+ -号按钮，都只将按钮内容追加到文本框中算式结尾即可，不做计算
default:
sc.value+=e.target.innerHTML;
}
}
}
</script>
</body>
4.阻止默认行为：
1). 问题: 有些元素上自带一些默认的行为使我们不想要的
2). 比如: <a href="#">xxx</a>自带两个默认行为:
i. 自动回到页面顶部
ii. 自动在地址栏里url结尾添加#
解决:
i. 通用的js的方式: e.preventDefault();
ii. html中仅针对a: <a href="javascript:;">
javascript: 是指不让a跳转，而是在内存中找一条js语句执行。比如: <a href="javascript:alert('疼')">
; 是一条什么也不干的空语句
5.获得鼠标位置：
1). 相对于屏幕左上角的距离
e.screenX e.screenY
2). 相对于文档显示区左上角的距离
e.clientX e.clientY
3). 相对于事件所在的元素左上角的距离
e.offsetX e.offsetY
//示例：
<style>
#pop{
width: 100px;height: 100px;
position: fixed;
top:200px;
left:300px;
background-color: paleturquoise;
}
</style>
</head>
<body>
<div id="pop"></div>
<script>
var pop=document.getElementById("pop");
pop.onclick=function(e){
console.log(`相对于屏幕左上角:${e.screenX},${e.screenY}`)
console.log(`相对于文档显示区左上角:${e.clientX},${e.clientY}`);
console.log(`相对于图片左上角:${e.offsetX},${e.offsetY}`);
}
</script>
6.页面滚动事件
(1). 使用事件监控窗口滚动过的距离
//当窗口滚动时，自动执行
window.onscroll=function(){
(2). 获得窗口滚动过的距离: 固定套路，没有为什么
var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
(3). 如果窗口滚动到了指定位置 就执行相应的操作 否则如果窗口没有滚动到指定的位置 就要回复原样
}
//示例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{height: 2000px;}
#top{
position: fixed;
bottom:100px;
right:0;
display: none;
}
</style>
</head>
<body>
<div id="top">
<a href="#">返回顶部</a>
</div>
<script>
window.onscroll=function(){
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop
console.log(scrollTop);
var top=document.getElementById("top");
if(scrollTop>=500){
top.style.display="block"
}else{
top.style.display="none"
}
}
</script>
1563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
