bg.png
一.事件
1.什么是事件:
事件是在编程时系统内发生的动作或者发生的事情 比如用户在网页上单击一个按钮
2.什么是事件监听？
就是让浏览器检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
3.语法:
语法：元素.addEventListener('事件', 要执行的函数)
4.事件三要素:
- 事件源： 哪个dom元素被事件触发了 (谁被触发了)
- 事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseenter 等 事件要加引号
- 执行函数: 事件调用的函数 要做什么事
5.事件监听版本
- DOM L0
事件源.on事件 = function() { } - DOM L2 事件源
.addEventListener(事件， 事件处理函数) - 发展史：
Ø DOM L0 ：是 DOM 的发展的第一个版本； L：level
Ø DOM L1：DOM级别1 成为W3C推荐标准
Ø DOM L2：使用addEventListener注册事件
Ø DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型
6.事件类型
- 鼠标事件: click : 鼠标点击 mouseenter : 鼠标经过 mouseleave : 鼠标离开
- 表单获得光标: focus 获得焦点 blur 失去焦点
- 键盘触发: keydown 键盘按下触发 keyup 键盘抬起触发
-
表单输入触发: input 用户输入事件
1.png
二.高阶函数
1.函数表达式
函数也是数据,把函数赋值给变量
let fn = function() {
}
2.回调函数
把函数当做另外一个函数的参数传递，这个函数就叫回调函数
2.png
三.环境对象
函数内部，有一个特殊的变量this ，称之为 环境对象。
事件处理函数中的this指向事件源
四.排他思想
干掉所有人，复活我自己
<body>
<button>第1个</button>
<button class="pink">第2个</button>
<button>第3个</button>
<button class="pink">第4个</button>
<button>第5个</button>
<button class="pink">第6个</button>
<button>第7个</button>
<script>
// 排他思想：干掉所有人，复活我自己
// 需求：点击按钮，让当前点击的按钮高亮（添加pink类名），其他元素不能高亮（移除pink类名）
let btns = document.querySelectorAll('button')
// 遍历伪数组 给每个btn 注册click
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function() {
for (let j = 0; j < btns.length; j++) {
// 干掉所有
btns[j].classList.remove('pink')
}
// 复活自己
this.classList.add('pink')
})
}
</script>
</body>
<body>
<button>第1个</button>
<button class="pink">第2个</button>
<button>第3个</button>
<button>第4个</button>
<button>第5个</button>
<script>
// 排他思想做法2-升级
// 局限: 只适合开始只有一个高亮元素
let btns = document.querySelectorAll('button')
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function() {
// 找到高亮元素 , 移除类名
document.querySelector('.pink').classList.remove('pink')
// 给点击的元素添加类名
this.classList.add('pink')
})
}
</script>
</body>
