JS-DOM高级事件

一、注册和解绑事件

1.传统注册

事件源.事件类型 = function(){}

特点：注册事件的唯一性

即同一个元素的同一种事件只能设置一个处理函数，最后的处理函数将会覆盖前面注册的处理函数

var btns = document.querySelectorAll('button');
// 1. 传统方式注册事件
btns[0].onclick = function() {
alert('hi');
}
btns[0].onclick = function() {
alert('hao a u');
}

2.传统解绑事件

事件源.事件类型 = null

var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
alert(11);
// 1. 传统方式删除事件
divs[0].onclick = null;
}

3.方法监听注册与解绑方式

1. 监听注册

事件源.addEventListener('事件类型',function(){})

特点：同一个元素同一个事件可以注册多个监听器(function),按照顺序依次执行

 divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}
divs[2].attachEvent('onclick', fn1);
function fn1() {
alert(33);
divs[2].detachEvent('onclick', fn1);
}

2. 监听解绑

事件源.removeEventListener('事件类型',function(){})

注意：事件处理不能使用匿名函数

divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}

二、DOM事件流

DOM事件流的原理：

事件流：描述页面接收事物的顺序

事件发生时会在元素节点中间按照特点的顺序传播，这个传播过程即DOM事件流

DOM事件流的三个阶段：

① 捕获阶段：由最顶层DOM节点(Document)逐级向下传播到具体元素的过程

② 当前目标阶段：绑定事件的元素

③ 冒泡阶段：从事件源触发，逐级向上传播到DOM最顶层节点的过程

※注意：

①js代码只能执行捕获或冒泡其中一个阶段

②onclick和attachEvent只能得到冒泡阶段

③addEventListener第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false，表示在事件冒泡阶段调用事件处理程序

④实际开发中很少使用事件捕获，更关注事件冒泡

⑤有些事件没有冒泡，如onblur、ommouseover、ommouseseleave

三、事件对象

事件源.事件类型 = function(event){}

（1）概念：event即事件对象写到侦听函数的小括号内，当形参看

（2）使用方法：

事件对象有了事件才存在，他是系统给我们自动创建的，不需要我们传递参数，并依次传递给事件监听器

事件对象是我们事件一系列相关数据的集合，跟事件相关的信息

这个事件对象我们可以自己命名，如event、evt、e等等

（3）事件对象常见属性和方法

① e.target:返回的是触发事件的元素，this返回的是绑定事件的元素。

② e.type：返回事件类型，如click，mouseover，不带on

③ e.preventDefault()：阻止默认事件，如不让链接跳转

var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); //
dom 标准写法
})

（4）e.stopPropagation()：阻止冒泡

var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation(); // stop 停止
Propagation 传播
e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
}, false);

注意：this 与 target的区别

this：指向绑定事件的对象(元素)

target:指向触发事件的对象(元素)

四、事件委托

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子结点

<ul>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
</ul>
<script>
// 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// alert('知否知否，点我应有弹框在手！');
// e.target 这个可以得到我们点击的对象
e.target.style.backgroundColor = 'pink';
})

五、常用的鼠标事件

（1）contextmenu：禁用右键菜单

selectstart：禁止鼠标选中

mousemove：鼠标移动事件

（2）鼠标事件对象 MouseEvent

clientX、clientY：相对于浏览器窗口可视区的坐标

pageX、pageY：相对于文档边缘的坐标

screenX、screenY：鼠标在电脑屏幕的坐标

六、常用键盘事件

（1）三个事件执行顺序：keydown-keypress-keyup

keyup：键盘弹起时触发，不区分字母大小写

keydown：按键按下时触发，不区分字母大小写

keypress：按键按下时触发（不识别功能键，如：ctrl、shift等），区分字母大小写

（2）keyCode：ASCII码值，判断用户按的是哪个键