当前页面的脚本发生错误 为空或不是对象 【JavaScript 教程】事件——其他常见事件

11/28 08:20:33 来源网站:辅助卡盟网

上面代码针对表单的文本输入框,接受焦点时设置背景色,失去焦点时去除背景色。

7、CustomEvent 接口

CustomEvent 接口用于生成自定义的事件实例。那些浏览器预定义的事件,虽然可以手动生成,但是往往不能在事件上绑定数据。如果需要在触发事件的同时,传入指定的数据,就可以使用 CustomEvent 接口生成的自定义事件对象。

浏览器原生提供CustomEvent()构造函数,用来生成 CustomEvent 事件实例。

new CustomEvent(type, options)

CustomEvent()构造函数接受两个参数。第一个参数是字符串,表示事件的名字,这是必须的。第二个参数是事件的配置对象,这个参数是可选的。CustomEvent的配置对象除了接受 Event 事件的配置属性,只有一个自己的属性。

下面是一个例子。

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

function eventHandler(e) {
console.log(e.detail);
}

document.body.addEventListener('build', function (e) {
console.log(e.detail);
});

document.body.dispatchEvent(event);

上面代码中,我们手动定义了build事件。该事件触发后,会被监听到,从而输出该事件实例的detail属性(即字符串hello)。

下面是另一个例子。

var myEvent = new CustomEvent('myevent', {
detail: {
foo: 'bar'
},
bubbles: true,
cancelable: false
});

el.addEventListener('myevent', function (event) {
console.log('Hello ' + event.detail.foo);
});

el.dispatchEvent(myEvent);

上面代码也说明,CustomEvent 的事件实例,除了具有 Event 接口的实例属性,还具有detail属性。

本章节完。

阮一峰老师的书

来源:【九爱网址导航www.fuzhukm.com】 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

    暂无相关资讯
当前页面的脚本发生错误 为空或不是对象 【JavaScript 教程】事件——其他常见事件