事件

事件三要素

执行事件的步骤

注册事件

传统注册方式

button.onclick = function(){}

同一个元素同一个事件只能设置一个处理函数,后注册的会覆盖先注册的

监听注册方式

button.addEventListener('click',function(e){})

addEventListener 还有第三个参数,提供了更多选项:

同一个元素可以注册多个处理函数,按注册顺序依次执行

删除事件

// 传统方式
button.onclick = null;
button.removeEventListener('click',fn);

DOM事件流

202001261211

DOM 事件流会经历3个阶段:

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

addEventListener的第三个参数如果是true表示在事件捕获阶段调用事件处理函数,反之则是在事件冒泡阶段调用

事件对象

事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象

在 IE6~8 中,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 中获取查找

常见属性和方法

202001261356

t通常情况下terget 和 this是一致的

但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),

这时候this指向的是父元素,因为它是绑定事件的元素对象,而target指向的是子元素,因为他是触发事件的那个具体元素对象。

阻止默认行为

a.onclick = function(e) {
    // 普通浏览器 e.preventDefault();  方法
    e.preventDefault();
    // 低版本浏览器 ie678  returnValue  属性
    e.returnValue = false;
    // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
    return false;
}

阻止冒泡

// 阻止事件继续向上传递给父组件
son.addEventListener('click', function(e) {
    alert('son');
    e.stopPropagation(); // stop 停止  Propagation 传播
    window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
}, false);

事件委托

给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素

常见事件

鼠标事件

202001261443

鼠标事件对象

202001261445

键盘事件

键盘事件 触发条件
onkeyup 某个键盘按键被松开时触发
onkeydown 某个键盘按键被按下时触发
onkeypress 某个键盘按键被按下时触发,但是不识别功能键

键盘事件对象

mouseenter 和mouseover的区别

当鼠标移动到元素上时就会触发mouseenter 事件,- mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter 只会经过自身盒子触发,之所以这样,就是因为mouseenter不会冒泡,跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

触屏事件

移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有

常见的触屏事件

触屏事件 说明
touchstart 手指触摸到一个DOM元素时触发
touchmove 手指在一个DOM元素上滑动时触发
touchend 手指从一个DOM元素上移开时触发

触摸事件对象(TouchEvent)

触摸列表 说明
touches 正在触发屏幕的所有手指的一个列表
targetTouches 正在触发当前DOM元素上的手指的一个列表
changedTouches 手指状态发生了改变的列表,从无到有,从有到无的变化

click 延时解决方案

移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面

  1. 禁用缩放
<meta name="viewport" content="user-scalable=no">
  1. 利用touch事件封装事件解决300ms 延迟
  1. fastclick 插件
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

自定义事件

var evt = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(evt);

当自己封装组件时,自定义事件可以帮助进行解耦