html 自定义js,JS 自定义 HTML 事件

最近找到了关于自定义 HTML DOM 的事件的方法,分享一下。本人比较懒,不翻译了。

NOTE :  低版本的 IE < 8 不支持

Creating custom events

Events can be created with the Event constructor as follows:

var event = new Event('build');// Listen for the event.elem.addEventListener('build', function (e) { ... }, false);// Dispatch the event.elem.dispatchEvent(event);

This constructor is supported in most modern browsers (with Internet Explorer being the exception). For a more verbose approach, see the old-fashioned way below.

Adding custom data � CustomEvent()

To add more data to the event object, the CustomEvent interface exists and the detail property can be used to pass custom data.

For example, the event could be created as follows:

var event = new CustomEvent('build', { 'detail': elem.dataset.time });

This will then allow you to access the additional data in the event listener:

function eventHandler(e) {

log('The time is: ' + e.detail);}

The old-fashioned way

The older approach to creating events uses APIs inspired by Java. The following shows an example:

// Create the event.var event = document.createEvent('Event');// Define that the event name is 'build'.event.initEvent('build', true, true);// Listen for the event.document.addEventListener('build', function (e) {

// e.target matches document from above}, false);// target can be any Element or other EventTarget.document.dispatchEvent(event);

Triggering built-in events

This example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using DOM methods. View the example in action.

function simulateClick() {

var event = new MouseEvent('click', {

'view': window,

'bubbles': true,

'cancelable': true

});

var cb = document.getElementById('checkbox');

var canceled = !cb.dispatchEvent(event);

if (canceled) {

// A handler called preventDefault.    alert("canceled");

} else {

// None of the handlers called preventDefault.    alert("not canceled");

}}

参考文献:https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值