DOM——事件语法

事件:元素在某种状态(浏览器实现的也叫事件触发)达成时 要执行的提前设定好程序  我们称之为事件句柄

事件绑定的方式有三种

第一种：行内式

<div class="box" onclick="javaScript:console.log(66666)">
			hello2
		</div>

直接在标签的内部写js代码 ，选择绑定的事件

可以一次绑定多个事件

第二种：属性绑定

	var box = document.querySelector(".box")
			box.onclick = function() {
				console.log("你购买了装备")
			}

在js中先去获取到要绑定的元素，在设置绑定事件，以及函数

一次只能绑定一个事件，但是可以在事件的函数中去调用另外的函数

第三种：监听器

box.addEventListener("click",fn1)

第一个参数表示的是事件的触发条件,第二个参数则表示触发条件之后的函数

需要注意的是监听器的点击事件是click，而前两种则是onclick

一个监听器只能绑定一个事件，但是可以绑定多个监听器

我们再来谈谈解绑的问题

例如抢红包的时候，你点击了抢一个红包之后，红包就变成灰色了，无法在触发点击事件了。这就是点击事件的解绑。

行内式和属性绑定的解绑使用

box.οnclick=null

而监听器的解绑使用

box.removeEventListener("click",fn1)

当然除了我们的点击事件类型还有很多其他的事件类型，我们逐一了解

click：

鼠标按下和松开时  鼠标指针在被选元素区域内部（单击）

dblclick：

鼠标第一次按下和第二次松开时  鼠标指针在被选元素区域内部 并且时间间隔不能太长（双击）

mousedown：

鼠标在被选元素内按下

mouseup：

鼠标在被选元素内松开

mouseover：

鼠标进入被选元素

mouseout：

鼠标从被选元素出去

mouseleave：

鼠标从被选元素出去

mouseenter：

鼠标从被选元素进去

（注意以上四个他们父子之间的关系，也就是看看从元素进父元素种，和从外界进入父元素当中有什么区别）

onwheel：

鼠标滚轴滚动时 鼠标指针在被选元素内部

scroll：

元素自己的滚动条滚动，单位时间内滚动条的位置发生变化

keydown：

输入框的键盘按下

keyup：

输入框的键盘松开

keypress：

输入框的键盘按下

input：

输入框在输入就触发

change：

输入框失焦并且value改变

focus：

输入框获取焦时触发

blur：

输入框失焦时触发

onload：

加载完毕时执行

还有一个就涉及到盒子模型对象：

el.offsetWidth：本身宽度+边框线+左右内边距；

el.offsetHeight：本身高度+边框线+上下内边距；

el.offsetTop：相对第一个父级节点有定位属性的上偏移量；

el.offsetLeft：相对有定位属性的父节点左偏移量；

el.clientWidth：本身的宽度+左右内边距; el.clientHeight：

本身的高度+上下内边距；

el.clientTop：上边框线的宽度

el.clientLeft：左边框线的宽度

el.scrollWidth：盒子的实际宽度(包括滚动条不可见部分，不包括边线)

el.scrollHeight：盒子的实际高度(包括滚动条不可见部分，不包括边线)

el.scrollTop：滚动条向下滚动的距离；

el.scrollLeft：滚动条向右滚动的距离；

window.innerHeight：浏览器窗口可见区域高度；

window.innerWidth：浏览器窗口可见区域宽度;

我们了解一种新的对象：事件对象 

事件对象就是我们事件源这个对象，是一种全新的对象

事件处理函数形参ev(event)和 全局对象 window.event，

兼容性写法 var event= ev|| window.event

事件对像也有自己的属性

这是鼠标事件的触发时的属性

 

这是键盘事件的触发时的属性，把上下左右和回车键的keycode记住 a是65

有一种情况就是如果你写了实参

但是访问事件对象怎么办？

例如

<button id="btn2" onclick="fn(100)">btn2</button>

function fn (e) {
				console.log(e,e2)
				console.log(window.event)
				
				e=(e.constructor==PointerEvent&&e)||window.event//兼容写法
				console.log(e)
				
			}

 fn的e就是形参去接受实参100了

现在去访问的e就不能够访问到事件对象了，如果想访问到事件对象现在有两种方法

1.在去window中访问event

2.写兼容写法，判断e的构造函数是否正确如果不是就去访问window，event