Menu

DOM之事件定义-Event类

Event

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

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

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

var event = new Event('build');

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

// 匹配事件.
elem.dispatchEvent(event);
这个兼容性也还行,支持大多数的现代性的浏览器,当然了,IE不支持。要想使用IE支持,就要使用后面提到的老式的方法。

添加自定义数据 CustomEvent()

为了添加更多的数据到事件对象,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对象,就是被创建的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");
  }
}

本文固定连接:http://code.zuifengyun.com/2021/03/2099.html,转载须征得作者授权。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏支持