addeventlistener事件参数_JavaScript事件详解

JavaScript 事件解析

事件和事件绑定

event reference

事件：
浏览器赋予元素天生默认的一些行为，不论是否绑定相关的方法，只要进行相应的行为操作了，那么一定会触发相应的事件

事件绑定：
给元素的某一个事件行为绑定方法，目的是行为触发时可以做点自己想做的事

DOM0事件绑定

element.onevent = function () {
    
  // doSomething
}

// 取消事件绑定
// 在绑定事件之前，其对应的属性值也是null
element.onevent = null // 将属性值指向空对象指针，取消对之前函数对应的引用

原理：给DOM元素的某一个私有事件属性赋值为函数。当用户触发这个事件行为,js引擎会帮助我们执行绑定的方法并传入事件对象(element.onevent(event))。

根据DOM0事件绑定的原理，我们可以得到以下结论：

• 不是所有的事件类型都支持这种绑定方式，元素有onxxx属性时，才能给其绑定方法(例如：DOMContentLoaded事件就不支持这种绑定方案)
• 只能给当前元素的某一个事件行为绑定一个事件处理函数(在为对象的属性赋值为新函数的时候，会取消对之前函数地址的引用)

DOM2事件绑定：

element.addEventListener(type, listener, useCapture)
element.removeEventListener(type, listener, useCapter)

原理：基于原型链查找机制，找到EventTarget.prototype上的addEventListener方法执行。

它的实现类似于发布订阅模式，会将对应事件的事件监听器函数放入一个数组中，在该事件触发时，将数组中的函数一次执行。所以这种事件绑定方式支持对同一个事件绑定多个事件监听器

事件对象

DOM event 接口

浏览器会在事件执行时，为我们绑定的事件执行函数传入一个参数，该参数就是事件对象

事件对象的常用属性属性和方法：

• currentTarget: 绑定事件的元素
• eventPhase: 指示事件流正在处理哪个阶段
• target: 触发事件的元素
• type: 事件的类型(不区分大小写)
• preventDefault: 取消事件(阻止浏览器默认行为)
• stopPropagation: 停止事件冒泡

常用的事件对象有以下几种：

• 鼠标事件对象：MouseEvent
• 键盘事件对象: KeyboardEvent
• 触摸事件对象：TouchEvent
• 拖拽事件对象：DragEvent

需要注意的是，每次事件触发时传递的事件对象都是相同的:

let object = null;
const box = document.getElementById('box');

box.onclick = function (event) {
    
  console.log('event', event);
  object = event;
};

box.addEventListener('click', function (event) {
    
  console.log('isEqual1', event === object); // true
});

document.addEventListener('click', function (event) {
    
  console.log('isEqual2', event === object); // true
});

阻止浏览器默认行为

Browser default actions

在JavaScript中，许多事件将会自动导致浏览器执行特定的行为，比如：

• 点击a链接
• 点击form提交按钮
• 在文本上按下鼠标按钮并且移动鼠标选择文本
• 在页面中右键鼠标出现选项菜单

阻止浏览器默认行为一般有俩种方法：

1. 在事件处理函数中return false
2. 在事件处理函数中调用事件对象的preventDefault方法