定义事件

Previous事件冒泡和捕获 Next页面生命周期

Last updated 5 years ago

定义事件

之前知道定义事件，但是没有认真的去学习对应的api及用法。趁着想到了这个知识点，来梳理下。

Event

什么是Event？就是表示在DOM中发生的事件。

我们知道事件可以被用户的鼠标点击的类似操作给触发，也可以通过程序的HTMLElement.click()类似的方式来触发。当然，我们也可以定义事件，然后通过来触发。

要创建一个事件，首先可以根据构造函数来创建一个事件。

var event = new Event('build');

elem.addEventListener('build', function (e) { /* ... */ }, false);

// 匹配事件.
elem.dispatchEvent(event);

这个兼容性也还行，支持大多数的现代性的浏览器，当然了，IE不支持。要想使用IE支持，就要使用后面提到的老式的方法。

添加自定义数据 CustomEvent()

为了添加更多的数据到事件对象，接口有一个detail属性可以传递自定义数据。

我们来试一试：

var event = new CustomEvent('build', { detail: 'xiaohesong' });

这样就可以访问一些其他数据了。

function eventHandler(e) {
  console.log('The name is: ' + e.detail);
}

老式的方法

老的创建事件的方法是受Java启发产生的API。下面是一个例子:

// 创建一个事件，注意：`Event`这个参数是.
var event = document.createEvent('Event');

// 定义事件的名字是 'build'.
event.initEvent('build', true, true);

// 监听事件.
elem.addEventListener('build', function (e) {
  // e.target 匹配元素
}, false);

// target可以是任何Element或者其他的EventTarget.
elem.dispatchEvent(event);

可以发现，比较啰嗦，但是如果你要做兼容，似乎只能使用这个法子。

然后对应创建事件的类型，就是上面那个注意的'Event'参数。

var event = document.createEvent(type);

type是表示要创建的事件类型，一个字符串。可能包含的有"UIEvents","MouseEvents", "MutationEvents", 和 "HTMLEvents"。

事件冒泡

有时候我们使用事件冒泡法则来完成事件代理。

来看一个小🌰：

<form>
  <textarea></textarea>
</form>

const form = document.querySelector('form');
const textarea = document.querySelector('textarea');

// 创建了一个新的事件，允许冒泡，并且可以通过传递任何数据给details来得到你想要的。

const eventAwesome = new CustomEvent('awesome', {
  bubbles: true,
  detail: { text: () => textarea.value }
});

// form元素监听自定义的"awesome"事件，然后输出
form.addEventListener('awesome', e => console.log(e.detail.text()));

// 当用户输入内容时，form里的textarea 调度/触发(dispatches/triggers)事件以触发，并将自身用作起点
textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));

这个小🌰完成下来，是不是感觉也很容易记住的。

动态创建和分派事件

元素可以监听还没有创建的事件，我们来一睹为快。

<form>
  <textarea></textarea>
</form>

const form = document.querySelector('form');
const textarea = document.querySelector('textarea');

form.addEventListener('awesome', e => console.log(e.detail.text()));

textarea.addEventListener('input', function() {
  // 动态创建和调度/触发事件
  // 注意:我们选择使用的是”函数表达式”(而不是“箭头函数表达式”)，因此“this”将可以表示此元素。
  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
});

好吧，还是和之前差不多是不，只是把创建事件放在了dispatchEvent上面而已；

触发内置事件

来吧，直接看一个🌰，吃了它：

function simulateClick() {
  var event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });
  var cb = document.getElementById('checkbox'); 
  var cancelled = !cb.dispatchEvent(event);
  if (cancelled) {
    // A handler called preventDefault.
    alert("cancelled");
  } else {
    // None of the handlers called preventDefault.
    alert("not cancelled");
  }
}

小问：看到上面对于CustomEvent，也可以传递第二个参数，你有没有想过，他可不可以传递detail？试试呗？然后发现，不可以哦。好吧，如果你有这个疑问，那就说明你忘了仔细看上面说的CustomEvent上有个detail属性了。

参考：