JavaScript——DOM3

JavaScript——DOM3

文章目录

• 一、高级事件
• • 1.注册事件
  • 2.事件监听
  • 3. 删除事件（解绑事件）
  • 4.DOM事件流
  • 5.事件对象
  • 6.阻止默认行为
  • 7. 阻止事件冒泡
  • 8.事件委托
• 二、.常用鼠标事件
• • 1.鼠标事件对象
  • 2.获取鼠标在页面的坐标
• 三、 常用的键盘事件
• • 1.键盘事件
  • 2. 键盘事件对象

一、高级事件

1.注册事件

2.事件监听

addEventListener()事件监听（IE9以后支持）

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

attacheEvent()事件监听（IE678支持）

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

案例代码：

<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>var btns = document.querySelectorAll('button');// 1. 传统方式注册事件btns[0].onclick = function() {alert('hi');}btns[0].onclick = function() {alert('hao a u');}// 2. 事件侦听注册事件 addEventListener // (1) 里面的事件类型是字符串 必定加引号 而且不带on// (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）btns[1].addEventListener('click', function() {alert(22);})btns[1].addEventListener('click', function() {alert(33);})// 3. attachEvent ie9以前的版本支持btns[2].attachEvent('onclick', function() {alert(11);})
</script>

事件监听兼容性解决方案
封装一个函数，函数中判断浏览器的类型：

3. 删除事件（解绑事件）

案例代码：

    <div>1</div><div>2</div><div>3</div><script>var divs = document.querySelectorAll('div');divs[0].onclick = function() {alert(11);// 1. 传统方式删除事件divs[0].onclick = null;}// 2. removeEventListener 删除事件divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号function fn() {alert(22);divs[1].removeEventListener('click', fn);}// 3. detachEventdivs[2].attachEvent('onclick', fn1);function fn1() {alert(33);divs[2].detachEvent