JavaScript基础——事件高级

注册事件

注册事件概述

给元素添加事件，称为注册事件或者绑定事件
注册事件有两种方式：传统方式和方法监听注册方式。

传统注册方式

利用on开头的事件，例如onclick

1.第一种
<button onclick='alert("HelloWorld!")'>按钮</button>
2.第二种
btn.onclick= function(){}
特点

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

方法监听事件注册方式

W3C标准 推荐方式
addEventListener()是一个方法
IE9之间的IE不支持此方法，可使用attachEvent()代替

特点

同一个元素，同一个事件，可以注册多个监听器，按注册顺序依次执行

addEventListener 事件监听方式
eventTarget.addEventListener(type,listener[,useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象被处罚指定的实践的时候，就会执行事件处理函数。
该方法接收三个参数：

ex(type)ex事件类型字符串，比如click、mouseover，注意这里不要带on *** ex(listener)ex事件处理函数，事件发生时，会调用该监听函数 *** ex(useCapture)ex可选参数，是一个布尔值，默认是false。日后补充

attachEvent事件监听方式
eventTarget.attachEvent(eventNameWithOn,callback)

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

ex(eventNameWithOn)ex事件类型字符串，比如onclick、onmouseover，这里要带on *** ex(callback)ex 事件处理函数，当目标触发事件则回调函数被调用

注册事件兼容性解决方案

function addEventListener(element,eventName,fn){
    // 判断当前流浪器是否支持addEventListener方法
    if(element.addEventListener){
        element.addEventListener(eventName,fn);
    }else if (element.attachEvent){
        element.attachEvent('on'+eventName+eventName,fn);
    }else{
        // 相当于element.onclick=fn;
        element['on'+eventName].fn;
    }
}

兼容性处理原则：首先照顾大多数浏览器，在处理特殊浏览器。

删除事件（解绑事件）

传统删除方式

eventTarget.onclick = null;

方法监听删除方式

removeEventListener事件监听方式
eventTarget.removeEventListener(type,listener[,useCapture]);

detachEvent事件监听方式
eventTarget.detachEvent(eventNameWithOn,callback);

可以看到删除事件的方式和注册事件的如出一辙。
当然删除事件也是需要照顾兼容性问题的

function removeEventListener(element,eventName,fn){
    if(element.removeEventListener){
        element.removeEventListener(eventName,fn);
    }else if (element.attachEvent){
        element.detachEvent('on'+eventName+eventName,fn);
    }else{
        element['on'+eventName] = null;
    }
}

DOM事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段：

  1. 捕获阶段
  2. 当前目标阶段
  3. 冒泡阶段

事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。
事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体元素接收的过程。


1.js代码中只能执行捕获或者冒泡其中的一个阶段
2.onclick和attachEvent只能得到冒泡阶段。
3.addEventListener(type,listener[,useCapture])第三个参数如果是true，表示在实践捕获阶段调用事件处理程序；如果是false(不写默认就是false)，表示在事件冒泡阶段调用事件处理程序
4.在实际开发中，很少使用事件捕获，更多关注的是事件管理。 5.有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave。

事件对象

事件对象的概念

eventTarget.onclick = function(event){}
eventTarget.addEventListener('click',function(event){})

官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解：事件发生后进，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多的属性和方法。

比如：
1.谁绑定了这个事件
2.鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
3.键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

事件对象兼容性方案

事件对象本身的获取存在兼容问题：
1.标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。
2.在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。
解决：

e = e || window.event;

事件对象的常见属性和方法

事件对象属性方法 说明
e.target 返回触发事件的对象    标准
e.srcElement 返回触发事件的对象    非标准ie6~8使用
e.type 返回事件的类型 比如click mouseover 不带on
e.cancelBubble 该属性阻止冒泡 非标准 ie6~8使用
e.returnValue 该属性阻止默认事件（默认行为） 非标准 ie6~8使用 比如不让链接跳转
e.preventDefault() 该方法 阻止默认事件（默认行为） 标准 比如不让链接跳转
e.stopPropagation() 阻止冒泡 标准
触发事件对象兼容性写法
eventTarget.onlick = function(e){
    e = e||window.event;
    var target = e.target || e.srcElement;
    console.log(target);
}
this获取绑定对象

this指向的是绑定事件的对象。

div.addElementListener('onclick',function(e){
    console.log(this);
});

如上述代码所示，绑定事件的对象是div，那么输出的就是div。

阻止默认行为

除了e.preventDefault()以及e.e.returnValue可以用于阻止事件默认行为外，还有将所绑定的事件返回值改为false以此达到阻止事件的目的。
特点：return后面的代码不执行了

阻止事件冒泡的两种方式

ex(事件冒泡)ex开始由最具体的元素接收然后逐级向上传播到DOM最顶层节点。 事件冒泡的特性，会带来坏处，也会带来好处，需要灵活掌握

标准写法

使用事件对象里面的stopPropagation()方法阻止冒泡。
如下所示：

eventTarget.addEventListener('click',function(e){
    e.stopPropagation();
});

非标准写法 ie6~8使用

更改事件对象里面的cancelBubble属性的属性值为true阻止冒泡。
如下所示：

eventTarget.addEventListener('click',function(e){
    e.cancelBubble = true;
});

照顾兼容性写法
eventTarget.addEventListener('click',function(e){
    if(e&&e.stopPropagation()){
        e.stopPropagation();
    }else{
        window.event.cancelBubble = true;
    }
});

事件委托（代理、委派）

事件委托

事件委托也成为了事件代理，在JQuery里面称为事件委派。

事件委托的原理
不是每个子节点单独设置监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
例如，一个专业约有两百名学生，要将这两百名学生列成一个列表，并且点击任意列表子项显示学生个人信息，那么就使用ul作列表，li作子项，在ul上设置监听器，使用e.target来找到当前点击的子项显示详细信息。 代码如下所示： 
<!--html部分-->
<ul id='studentList'>
    <li id='student01'>学生1</li>
    <li id='student02'>学生2</li>
    <li id='student03'>学生3</li>
    ...
    <li id='student04'>学生4</li>
</ul>

// js部分
var stuList = document.getElementById('studentList');
stuList.addEventListener('click',function(e){
    alert('点击了'+e.target.innerText);
})

常用鼠标事件

鼠标事件 触发条件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发
禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
如下所示：

document.addEventListener('contextmenu',function(e){
    e.preventDefault();
});

禁止鼠标选中(selectstart 开始选中)
document.addEventListener('selectstart',function(e){
    e.preventDefault();
});

鼠标事件对象
鼠标事件对象 说明
e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX 返回鼠标相对于文档页面中的X坐标 IE9+支持
e.pageY 返回鼠标相对于文档页面中的Y坐标 IE9+支持
e.screenX 返回鼠标相对于电脑屏幕的X坐标
e.screenY 返回鼠标相对于电脑屏幕的Y坐标

常用键盘事件

事件除了鼠标触发，还可以使用键盘触发。

键盘事件 触发条件
onkeyup 某个按键被松开时触发
onkeydonwn 某个按键被按下时触发
onkeypress 某个按键被按下时触发 但是不能识别功能键 比如ctrl+shift箭头等
键盘事件对象
键盘事件对象属性 说明
keyCode 返回该键的ASCII值

codeonkeydown以及onkeyup的事件对象keyCode属性值是不区分字母大小写的，而onkeypress，无法识别功能键
posted @ 2022-05-17 20:49  maplerain  阅读(22)  评论(0)  编辑  收藏  举报