事件

通过触发指定的行为的时候，执行代码

---

一、事件三要素

• 事件源：触发条件的元素本身
• 事件类型：触发条件的类型( 按钮、鼠标、键盘…… )
• 事件处理函数：触发条件后，执行的代码

1) 语法：事件源.on事件类型 = 事件处理函数

var  div  =  document.querySelector( 'div' )
div.onclick = function() {  // div为事件源，click为事件类型( 点击事件 )，function内为事件处理函数；
    console.log( ' Hello, world! ' )
}

2) 常见事件类型分类

a. 鼠标事件

• click =》 鼠标单击(只对左键有效)

• dblclick =》 鼠标双击

• contextmenu =》 鼠标右键(只对右键有效)

document.onclick =function() {
    console.log('点击事件触发')
}

document.ondblclick =function() {
    console.log('鼠标双击事件触发')
}

document.oncontextmenu =function() {
    console.log('鼠标右键事件触发')
} 

1. 鼠标双击事件触发时，点击事件也会触发两次；
2. 点击事件只对左键有效，而右击事件只对右键有效( 阻止右键默认事件 )

image.png

• mousedown =》 鼠标按下

• mouseup =》 鼠标抬起

document.onmousedown =function() {
    console.log('鼠标按下')
}

document.onmouseup =function() {
    console.log('鼠标抬起')
}   

执行顺序：先按下、再弹起、再执行点击事件

image.png

• mousemove =》 鼠标移动

document.onmousemove =function() {
    console.log('鼠标移动')
}

• mouseover =》 鼠标移入(包括子元素)

• mouseout =》 鼠标移出(包括子元素)

big.onmouseover =function() {
    console.log('鼠标移入(包括子元素)')
}

big.onmouseout =function() {
    console.log('鼠标移出(包括子元素)')
}

• mouseenter =》 鼠标移入(不包括子元素)

• mouseleave =》 鼠标移出(不包括子元素)

eg：示例

    big.onmouseenter =function() {
        console.log('鼠标移入(不包括子元素)')
    }
    big.onmouseleave =function() {
        console.log('鼠标移出(不包括子元素)')
    }

b. 键盘事件 (事件源建议设置为document)

• keydown -- 键盘按下

• keyup -- 键盘抬起

• keypress -- 键盘键入(只对字符键有效，对ctrl、shift等无效)

  document.onkeydown =function() {
      console.log('键盘按下')
  }
  
  document.onkeyup =function() {
      console.log('键盘抬起')
  }
  
  document.onkeypress =function() {
      console.log('键盘键入')
  }
  

  执行循序：键盘按下、键盘键入、键盘弹起

image.png

c. HTML事件(指系统事件 被动触发的)

• load 加载

• close 关闭

• change 输入框的value值发送表示

• select 只有输入框才能触发 （选择里面的内容）

• focus 获取焦点

• blur 失去焦点

• reset 重置

• submit 提交

• scorll 滚动条滚动

  // load 窗口的加载 图片的加载 等等
  window.onload = function(){
      console.log('窗口加载');
  }
  window.onunload = function(){ //清除对应的内存 销毁
      console.log('窗口卸载');
  }
  window.onclose = function(){
      console.log('窗口关闭');
  }
  var input = document.querySelector('input')
  input.onchange = function(){ //必须要失去焦点
      console.log('value值变化了');
  }
  input.onselect = function(){ //禁止复制粘贴
      console.log('当前内容被选择');
  }
  input.onfocus = function(){
      console.log('获取焦点');
  }
  input.onblur = function(){
      console.log('失去焦点');
  }
  // form表单的事件 onsubmit 提交的时候触发 onreset 重置的时候的触发
  document.querySelector('form').onsubmit = function(){
      console.log('表单提交');
  }
  document.querySelector('form').onreset = function(){
      console.log('表单重置');
  }
  window.onscroll = function(){ //每次滚动距离
      console.log('滚动条滚动');
  }
  

  Ps: 该代码来自小钢老师

---

二、事件对象（event）

在函数中，由于有时候无法确定传入参数数量，所以有arguments伪数组；而在事件处理函数中，arguments[0]作为一个对象，包含着很多的 事件对象 的 键值对。

//e是形参 相当于第一个形参 常见的写法 这个形参名字叫 e 或者 event
window.onkeydown = function(e) {
    e = e || window.event    // ie兼容写法
    console.log(e);     // 这个就是arguments[0] event类型对象
}

（一）属性

a. 坐标相关属性

1) 距离屏幕距离

screenX 得到鼠标在屏幕的上的x坐标

screenY 得到鼠标在屏幕上的y坐标

2) 距离浏览器页面距离

pageX 得到鼠标在页面上的x坐标 （包含不可视区域）

pageY 得到鼠标在页面上的y坐标 （包含不可视区域）

3) 距离文档区域距离

clientX 得到鼠标在可视区域内的x坐标 （不包含不可视区域）

clientY 得到鼠标在可视区域内的y坐标 （不包含不可视区域）

4) 距离事件元素距离

offsetX 得到鼠标在偏移元素内容的x坐标 （当前添加事件的元素里面的坐标 不包含border）

offsetY 得到鼠标在偏移元素内容的y坐标 （当前添加事件的元素里面的坐标 不包含border）

image.png

b. 按键的相关属性( Boolean值 )

altKey 是否长按alt键

ctrlKey 是否长按ctrl键

shiftKey 是否长按shift键

c. 鼠标相关的内容（只有鼠标触发的事件有）

button 返回的值为number类型（0 表示左键 1表示中间 2表示右键）

d. 事件触发的相关属性

type 事件类型 返回对应的事件名

target 目标元素 返回真实触发的事件元素

currentTarget 目标元素 返回当前添加事件的元素 (作用不大)

bubbles 事件是否冒泡

e. 键盘事件相关的内容（需要键盘来触发的事件）

key 属性 （当前按下的键）

keycode 属性 （获取当前按下键大写的ascii码）

charCode 属性 （字符键 press事件 ascii码）

---

三、事件流

概述：事件流就是事件执行流程，分为捕获阶段、执行阶段、冒泡阶段

（一）两种模式

a. 冒泡模式( 浏览器默认 )

事件从里向外，逐个执行

1) 阻止冒泡行为

e.stopPropagation() 函数 （*） （stop）

e.cancelBubble = true 属性设置 （IE 未来可能会废弃）

兼容写法：

e.stopPropagation?e.stopPropagation():e.cancelBubble = true

b. 捕获模式

从window向里面，层层捕获

---

四、默认行为

概述：默认行为就是浏览器一个标签等默认的行为(例如，鼠标右键默认菜单……)

（一） 阻止默认行为的js实现

a. e.preventDefault() 函数 （*） （prevent）

b. e.returnValue = false ie的兼容

c. return false 直接结束对应的操作（奇技淫巧）

兼容写法

e.preventDefault?e.preventDefault():e.returnValue = false   //兼容

---

五、样式获取

获取样式

a. getComputedStyle 方法属于window的方法

window.getComputedStyle(元素对象,null)      //返回给你的是一个样式对象

b. ie兼容

element.currentStyle //返回给你一个样式对象

兼容封装函数

//方法的封装
function getStyle(element,attr){
    var style = window.getComputedStyle?
        window.getComputedStyle(element):element.currentStyle
    return style[attr]
}
//调用
console.log(getStyle(box,'height'));