事件绑定
在JS内有两种事件绑定方式
1.DOM零级事件绑定
=>使用on语法进行绑定
=>语法：事件源.on事件类型 = 事件处理函数
=>特点：同一个事件源的同一个事件类型只能绑定一个事件处理函数
2.DOM 二级事件绑定（事件侦听器/事件监听器）
=>标准浏览器
->语法：事件源.addEventListener(‘事件类型’，事件处理函数)
->特点：同一个事件源的同一个事件类型可以绑定多个事件处理函数，顺序绑定顺序执行
=>IE低版本浏览器
->语法：事件源.attachEvent(‘on事件类型’，事件处理函数)
->同一个事件源的同一个事件类型可以绑定多个事件处理函数，顺序绑定倒叙执行
var ele = document.querySelector('div')
//DOM 0级事件绑定
ele.onclick = function (){console.log("hello world")}
//DOM 2级事件绑定
ele.addEventListener('click',function(){
console.log('hello world')
})
事件解绑
+取消已经绑定好的事件
-
DOM 0级事件解绑
语法：事件源.on事件类型 = null
因为赋值符号覆盖的原因，可以直接解绑
-
DOM 2级事件解绑 -标准浏览器
语法：事件源.removeEventListener（‘事件类型’，要解绑的事件处理函数）
注意：DOM二级事件如果需要解绑，需要把函数体单独书写，以函数名的形式解绑
-
DOM 2级事件解绑 -IE低版本浏览器
语法：事件源.detachEvent（‘on事件类型’,要解绑的事件处理函数）
注意：DOM二级事件如果需要解绑，需要把函数体单独书写，以函数名的形式解绑
补充：
声明式函数的函数名
+ 特指小括号前面那个名字
+ 可以再函数外使用, 可以在函数内使用
函数表达式(赋值式函数/匿名函数) 的函数名
+ 特指小括号前面那个名字
=> 例子:
-> var fn = function f() {}
-> var obj = { fn: function f() {} }
-> addEventListener(xxx, function f() {})
- 只能在函数内使用, 在函数外不能用
事件对象：
+是一个对象数据类型，内部存储的内容是对当前事件的描述信息
+概念：本次事件触发的时候，对于本次事件细节的所有描述信息的一个对象数据类型
如何获取事件对象
+标准浏览器
=>直接在事件处理函数位置接受一个形参，形参就是事件对象
=>会在事件触发的时候，有浏览器自动传递实参
=>xxx.onclick = function (xxx) {}
=>xxx.addEventListener(‘click’,function(xxx){ })
+IE低版本浏览器
=>直接使用 window.event
var ele = document.querySelector('div')
ele.onclick = function(e){
e = e || window.event //这里e一定是事件对象
}
鼠标事件
鼠标的坐标信息
1.client 一组
=>语法：
->事件对象.clientX
->事件对象.clientY
鼠标光标相当于浏览器可是窗口左上角的坐标位置
//实时获得鼠标在浏览器上的位置
document.addEventListener("mousemove",function(e){
console.log(e.clientX,e.clientY)
})
2.page 一组
=>语法：
->事件对象.pageX
->事件对象.pageY
=>鼠标光标相对于文档流左上角的坐标位置
3.offset 一组
=>语法：
->事件对象.offsetX
->事件对象.offsetY
=>鼠标事件相对于XX触发事件的元素XX左上角的坐标位置
=>鼠标光标相对于XX事件目标XX左上角的坐标位置
//获得鼠标在div盒子里面的点击位置
var ele = document.querySelector('div')
ele.onclick = function(e){
console.log(e.offsetX,e.offsetY)
}
offset家族：
1.offsetParent
=>依赖元素获取，元素.offsetParent
=>获取到的是元素的定位父级
2.offsetwidth
=>依赖元素获取，元素.offsetWidth
=>获取到的是元素 内容+padding+border 区域的宽度
3.offsetHeight
=>依赖元素获取，元素.offsetHeight
=>获取到的是元素 内容+padding+border 区域的高度
4.offsetLeft
=>依赖元素获取，元素.offsetLeft
=>获取到的是元素 相对于offsetParent左边的距离
5.offsetTop
=>依赖元素获取，元素.offsetTop
=>获取到的是元素 相对于offsetParent上边的距离
6.offsetX/offsetY
->事件对象.offsetX
->事件对象.offsetY
=>鼠标事件相对于XX触发事件的元素XX左上角的坐标位置
=>鼠标光标相对于XX事件目标XX左上角的坐标位置
client家族
1.clientWidth
=>依赖元素获取，元素.clientWidth
=>获取到的是元素内容 + padding区域的宽度
2.clientHeight
=>依赖元素获取，元素.clientHeight
=>获取到的是元素内容 + padding区域的高度
3.clientLeft
=>依赖元素获取，元素.clientLeft
=>获取到的是元素 左边框的 宽度
4clientTop
=>依赖元素获取，元素.clientTop
=>获取到的是元素 上边框的 宽度
