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

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

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

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

用本身的理解, 简单又全面归纳基础知识点, 大部份内容为白话文内容, 基础中的基础方便加深理解!浏览器

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

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

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

内置对象：
- 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"dom
    - 改内容 : innerHTML innerText value函数
    - 改属性 post
obj.属性 obj.getAttribute() obj.setAttribute()
- 查：
getElementBy....
克隆：cloneNode(true)

二、event 事件对象

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

var e = evt || event
复制代码

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

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

四、鼠标事件对象的 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!