事件绑定，三要素等

事件：

事件的三要素：

1. 事件源

2. 事件类型

3. 事件处理函数

事件绑定：

1.DOM0级事件 1.1 语法: 事件源.on事件类型 = 事件处理函数 特点: 不可以给同一个对象的同一个事件进行多次绑定 2.DOM2级事件（事件监听器） 2.1 标准浏览器 语法：事件源.addEventListener('事件类型',事件处理函数) 特点：可以给同一个对象的同一个事件进行多次绑定 2.2 IE低版本 语法：事件源.attachEvent('on事件类型',事件处理函数) 特点：可以给同一个对象的同一个事件进行多次绑定

事件解绑：

1. DOM0级事件解绑

语法：事件源.on事件类型 = null ​ 特点：由于赋值的特殊性，将原来的事件覆盖了

2、DOM2级事件解绑

2.1 标准浏览器的解绑 语法：事件源.removeEventListener('事件类型',事件处理函数) 注意：需要将事件单独写在外面 function fn(){} div.addEventListener('click',fn) div.removeEventListener('click',fn)

2.2 IE低版本的事件解绑

语法：事件源.detachEvent('on事件类型',事件处理函数)

function fn(){} div.attachEvent('click',fn) div.detachEvent('click',fn)

事件类型：

JS给我们提供了可以直接使用的事件 ​ JS内事件大致分为几类：

鼠标事件

  1. click: 鼠标左键单击

2. dblclick: 鼠标左键双击 ​ 3. contextmenu: 鼠标右键单击 ​ 4. mousedown: 鼠标按下(任何一个按键按下) ​ 5. mouseup: 鼠标抬起 ​ 6. mousemove: 鼠标移动(光标只要位置变换就会触发) ​ 7. mouseover: 鼠标移入(光标从外面进入事件源范围内) ​ 8. mouseout: 鼠标移出(光标从事件源内部离开) ​ 9. mousenter: 鼠标移入 ​ 10. mouseleave: 鼠标移出

键盘事件

依赖键盘触发的事件 ​ 注意：不是谁都可以可以触发键盘事件的，一般window，document，表单元素可以触发 ​ 执行顺序：keydown-->keypress-->keyup ​ 1. keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件 ​ 2. keypress：按下某个键盘键并按住时触发（一般之监听数字和字母，不能监听特殊按键） ​ 3. keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次

浏览器事件

onscroll：滚轮滑动时触发 ​ onresize：窗口大小改变时触发 ​ onload：当文档和资源加载完成后调用

表单事件

onfocus：获得焦点时触发 ​ onblur：失去焦点时触发 ​ onchange：内容发生改变的时候触发 ​ oninput：输入时触发 ​ onreset：重置时触发 ​ onsubmit：提交时触发

其他事件

事件对象：

概念：记录本次事件的所有信息 获取事件对象： 1. 标准浏览器下 1.1 直接在事件处理函数位置书写一个形参, 会在事件触发的时候 1.2 由浏览器自动传递实参 1.3 传递的实参就是 事件对象 2. IE 低版本 2.1 直接使用 window.event 来获取事件对象 兼容: 在事件处理函数的时候, 正常接受形参 书写: e = e || window.event

返回事件类型：

使用e.type进行检测。

鼠标事件对象的相关信息（坐标点）
    1.1 clientX和clientY：光标相对于浏览器可视窗口左上角的坐标位置
    1.2 pageX和pageY：光标相对于文档流左上角的坐标位置
    1.3 offsetX和offsetY：光标相对于触发事件的元素左上角的坐标点
      
键盘事件对象的相关信息
   1.1 按下哪个键 ev.keyCode || ev.which
     1.2 组合按钮
         shiftKey
           altKey
           ctrlKey
         都是返回布尔值