【重温JS】巩固基础-day12-事件对象(一)

这是我参与8月更文挑战的第 12天，活动详情查看：8 月更文挑战

☆☆☆ 今天的内容(event 事件对象) 重要!! ☆☆☆

可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新,

用自己的理解, 简单又全面概括基础知识点, 大部分内容为白话文内容, 基础中的基础方便加深理解!

巩固学习 JavaScript 基础知识, 加深理解记忆, 打牢地基才能筑高楼! 加油

开始今天的学习吧! 认真对待!!

1、整理昨天学习的相关知识点

内置对象：
- Array reverse pop push shift unshift splice() arr.length = 3 join
- String split substr(start,length) substring(start,end) indexOf() lastIndexOf() replace() trim()
- Math random() round ceil floor
- Date 获取日期设置日期 getMonth()
BOM 和 DOM
- BOM ： window---location history event document navigator screen
- document ：操作页面元素增删改查
  - 增： createElement appendChild insertBefore
  - 删 : remove() removeChild()
  - 改：
    - 改样式 : obj.style.样式 obj.className ----- 操作样式类 obj.style.cssText = "color:red"
    - 改内容 : innerHTML innerText value
    - 改属性 obj.属性 obj.getAttribute() obj.setAttribute()
  - 查： getElementBy....
克隆：cloneNode(true)

2、event 事件对象

事件 ：对页面元素的某种操作就是一个事件
事件对象 ：当对页面元素进行某个事件操作时， onclick onkeyup.... 会产生一个对象这样的对象叫做事件对象 event（前提：产生某个事件）
事件对象兼容 ：

var e = evt || event

3、鼠标事件对象的坐标属性

clientX/clientY 距离可视窗口的横向和纵向坐标
pageX/pageY 距离文档顶部和左侧的横向和纵向坐标
offsetX / offsetY 距离操作元素的内部偏移量

4、鼠标事件对象的 button 按钮属性

值有三种情况：

左键 0
滚轮 1
右键 2

ie 结果：

左键： 1
滚轮： 4
右键： 2

5. （扩展）写一个函数兼容 button 属性值

封装函数中 evt 参数指的是事件参数

function getButton(evt) {

  var e = evt || event // 判断浏览器
  if (evt) {
    // 高版本
    return e.button
  } else if (window.event) {
    // ie 浏览器
    switch (e.button) {
      case 1:
        return 0
      case 4:
        return 1
      case 2:
        return 2
    }
  }
}

预告: everybody go 加油追梦人!

【预告】: 继续复习事件对象的更多知识点.. 也不能一口吃撑胖子吖..-

学习就是一个不断进行的过程, 坚持下去, 定有收获!

日积月累, 巩固基础, 早进大厂!

坚持很不容易, 坚持下来更不容易, 你真棒!

Calm Down & Carry On!

【重温JS】巩固基础-day12-事件对象(一)

1、整理昨天学习的相关知识点

2、event 事件对象

3、鼠标事件对象的坐标属性

4、鼠标事件对象的 button 按钮属性

值有三种情况 ：

ie 结果：

5. （扩展）写一个函数 兼容 button 属性值

预告: everybody go 加油追梦人!

更多阅读:

值有三种情况：

5. （扩展）写一个函数兼容 button 属性值