1.事件监听

事件监听三要素：
事件源： 哪个dom元素被事件触发了
事件： click 、focus、input等
事件处理程序： 要做什么事

let btn=document.querySelector('button')
   btn.addEventListener('click',function(){
      alert('被点击了')
})

2.绑定事件DOM L0

L0 使用on方式注册存在的缺点：存有覆盖问题

btn.onclick = function () {
    alert('哈哈，也是可以的')
}
// 后面代码覆盖了前面
btn.onclick = function () {
    alert('xixi，也是可以的')
}

推荐注册事件使用L2 addEventListener 不存在覆盖问题

btn.addEventListener('click', function () {
    alert(1)
})
btn.addEventListener('click', function () {
    alert(2)
})

3.事件类型

click 鼠标点击 mouseenter 鼠标经过 mouseleave 鼠标离开
focus 表单获得焦点 blur 失去焦点
Keydown 键盘按下触发 Keyup 键盘抬起触发
input 用户输入文本事件

4.获得表单内容

通过表单value属性获得表单内容
获取到的value是字符串,避免直接进行加法操作

5.避免开启多个重复定时器

每次开始前清除上一个计时器

let timerId;
clearInterval(timerId);
timerId = setInterval(function () {}, 1000);

5.排他思想

排他思想:干掉所有人，复活我自己

value.addEventListener('click', function () {
    // 干掉所有人
    btns.forEach(function (value) {
        value.classList.remove('pink');
    });
    // 复活自己
    this.classList.add('pink');
});

升级排他:只适用于只要排除一个元素的场景

value.addEventListener('click', function () {
    //找到这个元素并干掉它
    document.querySelector('.pink').classList.remove('pink');
    //复活自己
    this.classList.add('pink');
});