事件
含义
事件是在编程时系统内发生的动作或者发生的事(比如用户再网页上单击一下按钮)
事件监听
让浏览器检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应
也称为注册事件
语法:
元素.addEventListener('事件' , 要执行的函数)
事件监听三要素
- 事件源:哪个dom元素被事件触发了
- 事件:用什么方式触发
- 事件调用的函数 :要做什么事
例如:
// 给元素注册上事件
let btn = document.querySelector('button')
// 语法:元素.addEventListener('事件', 要执行的函数)
btn.addEventListener('click' , function () {
alert('啊~ 达咩呦~ 我被点啦')
})
注意:
- 事件类型要加引号
- 函数是点击之后再去执行,每次点击都会执行一次
事件监听版本
DOM L0: 事件源.on事件 = function(){}
例如:
// 绑定事件DOM L0
// 缺点:会出现覆盖现象 而addEventListener不会出现覆盖
let btn = document.querySelector('button')
btn.onclick = function() {
alert(`我是用DOM L0写的`)
}
btn.onclick = function() {
alert(`我是用DOM L0写的 +1`)
}
DOM L2: 事件源.addEventListener(事件 , 事件处理函数)
- DOM L0 :是 DOM 的发展的第一个版本; L:level
- DOM L1:DOM级别1 成为W3C推荐标准
- DOM L2:使用addEventListener注册事件
- DOM L3: DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件类型
事件类型
1. 鼠标事件
鼠标触发
- click:鼠标点击
- mouseenter:鼠标经过
- mouseleave:鼠标离开
- mousemove:鼠标移动
2. 焦点事件
表单获得光标
- focus:获得焦点
- blur:失去焦点
3. 键盘事件
键盘触发
- keydown:键盘按下触发
- keyup:键盘抬起触发
4. 文本事件
表单输入触发
input:用户输入事件
高阶函数
含义
把函数当作值来看待,
值:就是JavaScript中的数据,比如数值、字符串、布尔、对象等
包括
函数表达式
let counter = function(x , y) {
return x + y
}
let sum = counter(5 , 10)
console.log(sum)
回调函数
(回头再调用的函数)
如果将函数A作为参数传递给函数B时,我们称A为回调函数
即:当一个函数当作参数来传递给另外一个函数的时候,这个函数就是回调函数
// 回调函数:把一个函数当成参数传递给另外一个函数,就说该函数是个回调函数
// 例如 :定时器函数
setInterval(function(){} , 1000)
// 注册事件
document.body.addEventListener('click' , function() {})
环境对象
this
事件处理函数中的this指向事件源
例如:
let btn = document.querySelector('button')
btn.addEventListener('click', function () {
// 点击时改变按钮颜色
// this是内置的,可以直接来使用
// 使用this更加灵活
this.style.backgroundColor = 'lime' // 在此事件处理函数中,this 指向事件源(即被触发的事件 btn)
console.log(this)
})
排他思想
干掉所有人,复活我自己
事件发生时,只有我自己生效,其他所有都不生效
例如:
<!-- 此时有一半的按钮是粉色的 -->
<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>
// 需求:点击按钮,让当前点击的按钮高亮(添加pink类名),其他元素不能高亮(移除pink类名)
let btns = document.querySelectorAll('button')
// 给所有按钮注册点击事件
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')
})
}
补充:
当一开始只有一个生效时,可以只“干掉”这一个
例如:
<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')
btns[i].classList.add('pink')
})
}
</script>