事件

什么是事件

事件就是用户或者浏览器本身的某种行为

一般是用户对页面的一些动作引起的,例如: 
        单击某个链接或按钮
        在文本框中输入文本
        按下键盘上的某个按键
        移动鼠标
        ...
当事件发生时可以使用JS中的事件处理程序(也叫事件监听器)来检测并执行某些特定的程序.

JS与HTML之间的交互是通过事件(event)实现的,或者说, 事件是JS和DOM之间进行交互的桥梁

事件的组成

触发谁的事件: 事件源
触发什么事件: 事件类型
触发后做什么: 事件处理函数

var oDiv = document.querySelector('div')

oDiv.onclick = function () {}
/**
 * 触发谁的事件 ---> oDiv ---> 事件源就是 oDiv
 * 触发什么事件 ---> onclick ---> 事件类型就是 click
 * 触发后做什么 ---> function () {} ---> 这个事件的处理函数
*/

var oDiv = document.querySelector('div')

oDiv.onclick = function () {
	console.log('你点击了 div')
}

当我们点击 div 的时候, 就会执行事件处理函数内部的代码
每点击一次, 就会执行一次事件处理函数

常见的事件(了解)

事件分类
- 浏览器事件
- 鼠标事件
- 键盘事件
- 表单事件
- 触摸事件

浏览器事件

load: 页面全部资源加载完毕
scroll: 浏览器滚动的时候触发
...

鼠标事件

click: 点击事件
dblclick: 双击事件
contextmenu: 右键事件
mousedown: 鼠标左键按下事件
mouseup: 鼠标左键抬起事件
mousemove: 鼠标移动
mouseover: 鼠标移入事件
mouseout: 鼠标移出事件
mouseenter: 鼠标移入事件
mouseleave: 鼠标移出事件
...

  <div>
    <div class="sBox"></div>
  </div>

    //0. 获取元素'
    var oDiv = document.querySelector('div')

    //1. 鼠标单击事件---左键单击
    oDiv.onclick = function(){
      console.log('单击元素时触发')
    }

    //2. 鼠标左键双击事件
    oDiv.ondblclick = function(){
      console.log('双击元素时触发');
    }

    //3. 右键事件
    oDiv.oncontextmenu = function(){
      console.log('鼠标右键单击时触发');
    }

    //4. 鼠标按下事件        鼠标左键按下是触发(哪怕鼠标没有抬起也会触发)
    oDiv.onmousedown = function(){
      console.log('鼠标按下时触发');
    }

    //5. 鼠标抬起事件        鼠标左键抬起时触发
    oDiv.onmouseup = function(){
      console.log('鼠标抬起时触发');
    }
        //6. 鼠标移入事件1          鼠标移入元素的时候触发      注意: 移入子盒子时,也会触发,从子盒子出来到父盒子也会触发
    oDiv.onmouseover = function(){
      console.log('onmouseover鼠标移入事件触发');
    }


    //7. 鼠标移出事件1        鼠标移出元素的时候触发      注意: 移出子盒子时,也会触发,从子盒子出来到父盒子也会触发
    oDiv.onmouseout = function(){
      console.log('onmouseout鼠标移出事件触发');
    }


    //8. 鼠标移入事件2       鼠标移入元素时触发       注意: 移入子盒子时, 并不会触发
    oDiv.onmouseenter = function(){
      console.log('onmouseenter 移入事件触发');
    }


    //9. 鼠标移出事件2       鼠标移出元素时触发       注意: 移出鼠标到子盒子时, 并不会触发
  oDiv.onmouseleave = function(){
    console.log('onmouseleave 移出事件触发')
  }
  
  //10. 鼠标移动事件    鼠标在oDiv 元素内部 移动的时候会触发,移出去就停止,再进去重新计数
  oDiv.onmousemove = function(){
    console.log('鼠标移动事件触发');
  }

键盘事件

keyup: 键盘抬起事件
keydown: 键盘按下事件
keypress: 键盘按下在抬起事件
...
键盘事件中最主要做两件事
- 判断点击的是那个按键
- 有没有组合按键, 比如 ctrl + c; ctrl + v
我们先要明确, 不是所有的元素都可以绑定键盘事件
- 事件有一个关键的东西, 就是由谁触发的
- 通常 div 这种标签是无法触发键盘事件的, 键盘事件一般都只能给页面上选中的元素(表单元素) 和 document 来绑定键盘事件

document.onkeyup = function () {}
oInpput.onkeyup = function () {}

    
   //1. 键盘抬起事件
   document.onkeyup = function(){
    console.log('键盘任意按下一个按键  然后抬起时会触发');
   }

   //2. 键盘按下事件        抬起停止,不抬起一直计数
   document.onkeydown = function(){
    console.log('键盘任意一个按键被按下')
   }

   //3. 键盘抬起按下事件
   document.onkeypress = function(){
    console.log('键盘任意按键按下抬起时触发');
   }

onkeyup 与 onkeypress的差异

press, 现在其实在按下的时候, 尤其是长按的时候, 会默认触发一次抬起,但是 up 事件, 必须是你手动抬起的时候才会触发,长按时也不会一直计数
一个抬起的时候触发, 一个按下然后抬起的时候触发

确定按键

键盘的每一个按键都有一个自己的编码
我们可以通过 事件对象.keyCode 或者 事件对象.which 来获取

document.onkeyup = function (e) {
	e = e || window.event

	var keyCode = e.keyCode || e.which

	console.log(keyCode)
}

组合按键

组合按键最主要的就是 alt / shift / ctrl
所以在点击某一按键的时候判断一下这三个键有没有按下, 有就是组合键, 没有就是没有组合
事件对象给我们提供三个属性
- altKey / shiftKey / ctrlKey
- 三个键按下时会得到 true, 否则为 false

document.onkeyup = function (e) {
	e = e || window.event
	keyCode = e.keyCode || e.which

	if (e.altKey && keyCode ===65) {
		console.log('按下组合键 alt 和 a')
	}
}

表单事件

onfocus: 输入框获取焦点
onblur: 输入框失去焦点
change: 表单内容改变事件
input: 表单内容输入事件
...

<input type="text">

//0. 获取元素
    var inp = document.querySelector('input')

    //常用事件
    //1. 获得焦点事件
    inp.onfocus = function(){
      console.log('当前文本框获得焦点');
    }

    //2. 失去焦点事件
    inp.onblur = function(){
      console.log('当前文本框失去焦点');
    }

    //3. 文本框内容发生改变时触发     内容发生改变,失去焦点时(比较常用)
    inp.onchange = function(){
      console.log('当前文本框内容发生改变');
    }

    //4. 文本框内输入内容时触发(比较常用)
    inp.oninput = function(){
      console.log('当前文本框正在输入内容');
    }

触摸事件

touchstart: 触摸开始事件
touchend: 触摸结束事件
touchmove: 触摸移动事件
...

事件对象

什么是事件对象
- 当触发一个事件以后, 对该事件的一些描述信息
- 比如: 点击的位置坐标是什么, 触发键盘事件时按的那个按钮
每一个事件都会有一个对象的对象来描述这些信息, 我们就把这个对象叫做 事件对象
浏览器给了我们一个 黑盒子, 叫做 window.event, 就是对事件信息的所有描述
- 比如点击事件, 我们可以通过 event 对象知道我们点击了那个位置

oDiv.onclick = function () {
	console.log(window.event.X轴坐标点信息)
	console.log(window.event.Y轴坐标点信息)
}

但这东西有兼容性问题, 在低版本IE里很好用, 但是在高版本IE和Chrome 里不好使了
所以我们需要换一个方式来获取, 就是在每一个事件处理函数的形参位置, 默认第一个就是 事件对象

oDiv.onclick = function (e) {
	console.log(e.X轴坐标点信息)
	console.log(e.Y轴坐标点信息)
}

综上所述, 我们以后在每一个事件里, 都采用兼容写法

oDiv.onclick = function (e) {
	e = e || window.event  //事件对象兼容写法
	console.log(e.X轴坐标点信息)
	console.log(e.Y轴坐标点信息)
}
//-   常用属性：

//    -   clientX/clientY：当前鼠标触发点距离当前窗口左上角的X/Y轴坐标
//    -   pageX/pageY：触发点距离当前页面左上角的X/Y轴坐标

点击事件的光标点获取

我们点击事件的坐标点都不是一堆, 所以要有一个相对的坐标系
例如:
- 相对于事件源(就是我们点击的那个元素)
- 相对于页面
- 相对于浏览器窗口
因为这些都不一样, 所以我们获取的方式也不一样

相对于事件源

offsetX 和 offsetY
相对于我们点击的元素的边框内测开始计算

* {
	margin: 0;
	padding: 0;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>

var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	// 事件对象兼容写法
	e = e || window.event

	console.log(e.offsetX)
	console.log(e.offsetY)
}

相对于页面你点击的坐标点

pageX 和 pageY
是相对于整个页面的坐标点, 不管有没有滚动, 都是相对于页面拿到的坐标点

* {
	margin: 0;
	padding: 0;
}
body {
	width: 2000px;
	height: 2000px;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>

var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	// 事件对象兼容写法
	e = e || window.event

	console.log(e.pageX)
	console.log(e.pageY)
}

相对于浏览器窗口你点击的坐标点

clientX 和 clientY
相对于浏览器窗口来计算的, 不管你页面滚动到什么情况, 都是根据窗口来计算坐标

* {
	margin: 0;
	padding: 0;
}
body {
	width: 2000px;
	height: 2000px;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>

var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	// 事件对象兼容写法
	e = e || window.event

	console.log(e.clientX)
	console.log(e.clientY)
}

事件的绑定方式

我们现在给一个注册事件都是使用 onXXX 的方式
弊端: 但是这种方式不是很好, 只能给一个元素注册一个事件, 如果写了第二个, 那么第一个会被覆盖

oDiv.onclick = function () {
	console.log('第一个事件')
}
oDiv.onclick = function () {
	console.log('第二个事件')
}

我们这种绑定方式, 只会执行第二个, 第一个就没了
解决方法如果想要两个都存在, 我们可以使用事件监听的方式去给元素绑定事件
使用 addEventListener 的方式添加
在 IE 中要使用 attachEvent

事件监听

addEventListener (非IE7 8 下使用)

语法: 元素.addEventListener('事件类型', 事件处理函数, 冒泡还是捕获)

  第一个参数是事件的类型 (如 "click" 或 "mousedown")

  第二个参数是事件触发后调用的函数。

  第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

oDiv.addEventListener('click', function () {
	console.log('我是第一个事件')
}, false)
oDiv.addEventListener('click', function () {
	console.log('我是第二个事件')
}, false)

点击 div 时, 两个函数都会执行, 并且会按照你注册的顺序执行
先打印 我是第一个事件, 然后打印 我是第二个事件
注意: 事件类型不要写 on, 点击事件就是 click, 不是 onclick

attachEvent (IE 7 8 下使用)

语法: 元素.attachEvent('事件类型', 事件处理函数)

oDiv.attachEvent('onclick', function () {
	console.log('我是第一个事件')
})
oDiv.attachEvent('onclick', function () {
	console.log('我是第二个事件')
})

点击 div 时, 两个函数都会执行, 并且会按照你注册的顺序倒叙执行
先打印 我是第二个事件, 然后打印 我是第一个事件
注意: 事件类型需要要写 on, 点击事件就是 onclick

两个方式的区别

+ 注册事件的时候事件类型参数的书写
        * addEventListener: 不需要写 on
        * attachEvent: 需要写 on
+ 参数个数
        * addEventListener: 一般是三个常用参数
        * attachEvent: 两个参数
+ 执行顺序
        * addEventListener: 顺序注册, 顺序执行
        * attachEvent: 顺序注册, 倒叙执行
+ 适用浏览器
        * addEventListener: 非 IE 7 8 的浏览器
        * attachEvent: IE 7 8浏览器

JS事件(event)相关汇总(上)

事件

什么是事件

事件的组成

常见的事件(了解)

浏览器事件

鼠标事件

键盘事件

确定按键

组合按键

表单事件

触摸事件

事件对象

点击事件的光标点获取

相对于事件源

相对于页面你点击的坐标点

相对于浏览器窗口你点击的坐标点

事件的绑定方式

事件监听

addEventListener (非IE7 8 下使用)

attachEvent (IE 7 8 下 使用)

两个方式的区别

attachEvent (IE 7 8 下使用)