Web API 第二天

事件监听

const btn = document.querySelector('button')
btn.addEventListener('click', function (){
    alert('你早呀~')
})

版本

• DOM L0

  事件源.on事件 = function() {}

• DOM L2

  事件源.addEventListener(事件, 事件处理函数)推荐

• 区别：

  on方式会被覆盖，addEventListener方式可以绑定多次事件,而且也有事件更多特性，推荐使用

  btn.onclick = function() {
      alert(11)
  }
  btn.onclick = function() {
      alert(22)
  }
  // 只弹出22
  
  
  btn.addEventListener('click',function() {
      alert(11)
  })
  btn.addEventListener('click',function() {
      alert(22)
  })
  // 在弹出11后又会弹出22
  

发展史:
DOM L0：是DOM的发展的第一个版本
DOM L1：1998.10.1 DOM级别成为W3C推荐标准
DOM L2：使用addEventListener注册事件
DOM L3：DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

事件类型

事件参考

• 鼠标事件

  click

  mouseenter

  mouseleave

• 焦点事件

  focus

  blur

• 键盘事件

  keydown

  keyup

• 文本事件

  input

案例：B站轮播图

• 可以使用js调用点击事件

prev.addEventListener('click', function () {
    
})
let timerId = setInterval(function () {
    // 利用js自动调用点击事件  click()
    next.click() // 一定加小括号调用函数
}, 1000)

• let timerId = setInterval(function () {}, 1000)

  clearInterval(timerId)

• const 在函数内部使用 声明临时变量 所以没关系 "one time thing"

  全局变量 会改变 用let

案例：小米搜索框（焦点事件）

// 1. 获取元素
const input = document.querySelector('[type=search]')
const ul = document.querySelector('.result-list')
// console.log(input)
// 2. 监听事件 获得焦点
input.addEventListener('focus', function () {
    // ul显示
    ul.style.display = 'block'
    // 添加一个带有颜色边框的类名
    input.classList.add('search')
})
// 3. 监听事件 失去焦点
input.addEventListener('blur', function () {
    ul.style.display = 'none'
    input.classList.remove('search')
})

案例：评论字数统计

• css的伪类:hover 或 :focus 也可以通过触发事件来修改文本框的样式

  但是想要统计字数，只能使用js

// 用户输入文本事件  input
input.addEventListener('input', function () {
  console.log(input.value)
})

事件对象

事件对象也是个对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

• 使用场景
  可以判断用户按下哪个键，比如按下回车键可以发布新闻
  可以判断鼠标点击了哪个元素，从而做相应的操作

案例：按下回车发布评论

• 按下键盘事件可以是keydown也可以是keyup
• 小bug 去除内容两侧的空格 string.trim()
• ''为假

input.addEventListener('keyup', function (e) {
    // console.log(e.key)
    if (e.key === 'Enter') {
        // if (tx.value.trim() !== '') {
        if (tx.value.trim()) {
            // console.log('我按下了回车键')
        	item.style.display = 'block'
        	text.innerHTML = tx.value.trim()
        }
    }
    
    // 当键盘弹起，事件结束，清空文本域
    tx.value = ''
})

环境对象 目前仅粗略了解

目标：能够分析判断函数运行在不同环境中 this 所指代的对象
环境对象：指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁

• 函数的调用方式不同，this 指代的对象也不同
• 直接调用函数（普通函数），其实相当于是 window.函数，所以 this 指代 window

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

回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数（回头调用）

function fn() {
    console.log('我是回调函数')
}
setInterval(fn,1000)