（黑马程序员）JavaScript DOM和BOM第二天学习笔记

1. 事件

目标：能够给DOM元素添加事件监听

• 什么是事件?

事件是在编程时系统内发生的动作或者发生的事情

比如用户在网页上单击一个按钮

• 什么是事件监听？

  就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件

  语法：

  事件源.addEventListener('事件',要执行的函数);

  事件监听三要素:

  • 事件源:那个dom元素被事件触发了，要获取dom元素
  • 事件:用什么方式触发，比如鼠标单击click、鼠标经过mouseover 等
  • 事件调用的函数:要做什么事

目标：能够给DOM元素添加事件监听

• 事件监听

  举例说明：

// 1.获取元素
let btn = document.querySelector('button');
// 2.事件监听（注册事件）
 btn.addEventListener('click',() => {
      alert('被点击了')
})

注意:

1. 事件类型要加引号

2. 函数是点击之后再去执行，每次 点击都会执行一次

2.事件监听版本

• DOM LO 事件源.on事件= function() { }.

• DOM L2 事件源.addEventListener(事件，事件处理函数)

• 发展史:

DOM LO:是DOM的发展的第一个版本; L: level

DOM L1 :DOM级别1于1998年10月1日成为W3C推荐标准

DOM L2:使用addEventListener注册事件

DOM L3:DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

3.事件类型

1.高阶函数

目标:掌握高阶函数用法，实现函数更多使用形式

高阶函数可以被简单理解为函数的高级应用，JavaScript中函数可

以被当成【值】来对待，基于这个特性实现函数的高级应用。

【值】就是JavaScript中的数据，如数值、字符串、布尔、对象等。 学习路径: 1.函数表达式 2.回调函数

1.1函数表达式

函数表达式和普通函数并无本质上的区别：

// 函数表达式与普通函数本质上是一样的
let counter = function(x, y) {
       return x + y;
}
// 调用函数
let result = counter(3, 5);
console.log(result);

1.2 回调函数

目标:能够说出什么是回调函数

如果将函数A做为参数传递给函数B时，我们称函数A为回调函数

简单理解:当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

常见的使用场景:

function fn() {
     console.log('我是回调函数');
}
// fn传递给了setInterval，fn就是回调函数
setInterval(fn, 1000);
​
box.addEventListener('click', () => {
     console.log('我也是回调函数');
})

3.环境对象

目标：能够分析判断出函数在不同环境中this所代指的对象

环境对象指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境

作用：弄清楚this的指向，可以让我们代码更简洁

• 函数的调用方式不同，this指代的对象也不同

• 【谁调用， this就是谁】是判断this指向的粗略规则

• 直接调用函数，其实相当于是window.函数，所以this指代window

4.编程思想

排他思想

当前元素为A状态，其他元素为B状态

使用：

1.干掉所有人

使用for循环

2.复活他自己

通过this或者下标找到字即或者对应的元素

第一种方式：

// 1.获取元素
 let btn = document.querySelectorAll('button')
        for (let i = 0; i < btn.length; i++) {
        // 2.事件监听
          btn[i].addEventListener('click', () => {
                for (let j = 0; j < btn.length; j++) {
                    //干掉所有人
                btn[j].classList.remove('pink'); 
               }
                
            
            //留下我自己
            btn[i].classList.add('pink');
          })
            
        }

第二种方式：

// 1.获取元素
let btn = document.querySelectorAll('button')
        for (let i = 0; i < btn.length; i++) {
        // 2.事件监听
          btn[i].addEventListener('click', () => { 
            //找出唯一一个有pink类的
            document.querySelector('.pink').classList.remove('pink');
            //给自己再添加上pink类
            btn[i].classList.add('pink');
          })
            
        }