JSAPI笔记3

时间：2019/10/16

6).事件高级
1.注册事件
传统注册方式：唯一性；同一个元素同一个事件只能设置一个处理函数，且再次添加会覆盖。

a.onclick = function() {}

方法监听注册方式：同一个元素，同一个事件可以添加多个侦听器（事件处理程序），依次执行。

a.addEventListener('click', function(){}) // 最后一个参数为true时为事件捕获，默认为false事件冒泡

2.删除事件
传统删除事件：

a.onclick = function() {
  a.onclick = null;
}

方法监听删除事件：

a.addEventListener('click', fn);
function fn() {
  // 事件处理
  a.removeEventListener('click', fn);
}

3.DOM事件流（事件在元素节点之间的传播顺序）
捕获阶段：document往下
当前目标阶段：目标元素
冒泡阶段：目标元素往上
PS：onblur、onfocus、onmouseenter、onmouseleave、load、unload、resize事件没有冒泡
4.事件对象（e，与事件相关的信息集合）

e.target // 触发事件的对象，this返回的是绑定事件的对象
e.type // 返回事件的类型
e.preventDefault(); // 阻止默认行为（事件），让链接不跳转或提交按钮不提交
e.stopPropagation(); // 阻式事件冒泡

5.事件委托
原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响每个子节点。
6.常用的鼠标事件

// contextmenu 禁止鼠标右键菜单
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
})
// selectstart 禁止鼠标选中
document.addEventListener('selectstart', function(e) {
  e.preventDefault();
// mousemove 鼠标移动
})

PS：mouseover经过自身盒子会触发，经过子盒子还会触发（mouseover事件冒泡）；mouseenter只会经过自身盒子触发（mouseenter事件不会冒泡）。mouseout（冒泡）与mouseleave（不冒泡）同理。

7.鼠标事件对象

e.clientX; // 鼠标于可视区X坐标
e.clientY;
e.pageX; // 鼠标于文档页面X坐标
e.pageY;
e.screenX; // 鼠标于电脑屏幕X坐标
e.screenY;

8.图片跟随鼠标移动思路：绑定鼠标移动事件，将有绝对定位属性的图片的left和top值为鼠标于文档页面X坐标和Y坐标值。（top减少图片高度一半，left减少图片宽度一半，可让鼠标位于中间）
9.常用键盘事件

keyup // 键弹起时触发
keydown // 键按下时触发
keypress // 键按下时触发（不能识别功能键：如ctrl、shift、箭头）
// 执行顺序：keydown -- keypress -- keyup

10.键盘事件对象

e.keyCode; // 键的ASCII值
// keypress区分字母大小写ASCII值

11.键盘按下s使搜索框聚焦思路：绑定keyup事件，判断keyCode是否为指定按键的ASCII值，若符合则调用input.focus()方法获取焦点。