Web APIs 第二天 - DOM-事件基础

bg.png

一.事件

1.什么是事件:

事件是在编程时系统内发生的动作或者发生的事情 比如用户在网页上单击一个按钮

2.什么是事件监听？

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

3.语法:

语法：元素.addEventListener('事件', 要执行的函数)

4.事件三要素:

• 事件源： 哪个dom元素被事件触发了 (谁被触发了)
• 事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseenter 等 事件要加引号
• 执行函数: 事件调用的函数 要做什么事

5.事件监听版本

• DOM L0
  事件源.on事件 = function() { }
• DOM L2 事件源
  .addEventListener(事件， 事件处理函数)
• 发展史：
  Ø DOM L0 ：是 DOM 的发展的第一个版本； L：level
  Ø DOM L1：DOM级别1 成为W3C推荐标准
  Ø DOM L2：使用addEventListener注册事件
  Ø DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

6.事件类型

• 鼠标事件: click : 鼠标点击 mouseenter : 鼠标经过 mouseleave : 鼠标离开
• 表单获得光标: focus 获得焦点 blur 失去焦点
• 键盘触发: keydown 键盘按下触发 keyup 键盘抬起触发

• 表单输入触发: input 用户输入事件

  
  
  1.png

二.高阶函数

1.函数表达式

函数也是数据,把函数赋值给变量

  let fn = function() {

        }

2.回调函数

把函数当做另外一个函数的参数传递，这个函数就叫回调函数

2.png

三.环境对象

函数内部，有一个特殊的变量this ，称之为 环境对象。
事件处理函数中的this指向事件源

四.排他思想

干掉所有人，复活我自己

    第1个
    第2个
    第3个
    第4个
    第5个
    第6个
    第7个

    

    第1个
    第2个
    第3个
    第4个
    第5个
    

考虑一千次，不如去做一次，犹豫一万次，不如实践一次，华丽的跌倒，胜过无谓的彷徨，将来的你，一定会感谢现在努力的自己。