事件是在编程时系统内发生的动作或者发生的事(比如用户再网页上单击一下按钮)
让浏览器检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应 也称为注册事件
元素.addEventListener('事件' , 要执行的函数)
// 给元素注册上事件
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(事件 , 事件处理函数)
鼠标触发
表单获得光标
键盘触发
表单输入触发 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>