位置: 编程技术 - 正文
详解JavaScript中的自定义事件编写(javascript entries)
编辑：rootadmin推荐整理分享详解JavaScript中的自定义事件编写(javascript entries)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js中 !,js中的?,javascriptj,javascript ?,javascriptj,javascript!,javascriptj,javascript entries,内容如对您有帮助，希望把文章链接给更多的朋友！
我们可以自定义事件来实现更灵活的开发，事件用好了可以是一件很强大的工具，基于事件的开发有很多优势（后面介绍）。
与自定义事件的函数有 Event、CustomEvent 和 dispatchEvent。
直接自定义事件，使用 Event 构造函数：
CustomEvent 可以创建一个更高度自定义事件，还可以附带一些数据，具体用法如下：
其中 options 可以是：
其中 detail 可以存放一些初始化的信息，可以在触发的时候调用。其他属性就是定义该事件是否具有冒泡等等功能。
内置的事件会由浏览器根据某些操作进行触发，自定义的事件就需要人工触发。dispatchEvent 函数就是用来触发某个事件：
上面代码表示，在 element 上面触发 customEvent 这个事件。结合起来用就是：
使用自定义事件需要注意兼容性问题，而使用 jQuery 就简单多了：
JavaScript 自定义事件就是有别于如 click, submit 等标准事件的自行定制的事件，在叙述自定义事件有何好处之前，先来看一个自定义事件的例子：
具体效果可以查看 Demo，在 console 中输入 obj.dispatchEvent(evt)，可以看到 console 中输出“customEvent 事件触发了”，表示自定义事件成功触发。
在这个过程中，createEvent 方法创建了一个空事件 evt，然后使用 initEvent 方法定义事件的类型为约定好的自定义事件，再对相应的元素进行监听，接着，就是使用 dispatchEvent 触发事件了。
没错，自定义事件的机制如普通事件一样——监听事件，写回调操作，触发事件后执行回调。但不同的是，自定义事件完全由我们控制触发时机，这就意味着实现了一种 JavaScript 的解耦。我们可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好。
当然，可能你已经猜到了，上面的代码在低版本的 IE 中并不生效，事实上在 IE8 及以下版本的 IE 中并不支持 createEvent()，而有 IE 私有的 fireEvent() 方法，但遗憾的是，fireEvent 只支持标准事件的触发。因此，我们只能使用一个特殊而简单的方法触发自定义事件。
这个方法的原理实际上是在 DOM 中增加一个自定义属性，同时监听元素的 propertychange 事件，当 DOM 的某个属性的值发生改变时就会触发 propertychange 的回调，再在回调中判断发生改变的属性是否为我们的自定义属性，若是则执行开发者实际定义的回调。从而模拟了自定义事件的机制。
为了使到自定义事件的机制能配合标准事件的监听和模拟触发，这里给出一个完整的事件机制，这个机制支持标准事件和自定义事件的监听，移除监听和模拟触发操作。需要注意的是，为了使到代码的逻辑更加清晰，这里约定自定义事件带有 'custom' 的前缀（例如：customTest，customAlert）。
完整的代码在 Demo。
打开 Demo 后，在 console 中调用 testBox.trigger('customConsole') 自行触发自定义事件，可以看到 console 输出两个提示语，再输入 testBox.remove('customConsole', triggerAgain) 移除对后一个监听，这时再使用 testBox.trigger('customConsole') 触发自定义事件，可以看到 console 只输出一个提示语，即成功移除后一个监听，至此事件机制所有功能正常工作。
快速解决Canvas.toDataURL 图片跨域的问题 如题，在将页面的图片地址进行本地输出时（Html2Canvas.js），因不同源存在跨域问题，会出现toDataURL访问权限问题：【Redirectatorigin'
深入剖析JavaScript:Object类型 在JavaScript中，引用类型是一种数据结构，用于将数据和功能组织在一起。对象是某个特定引用类型的实例。对象的创建方式：varperson=newObject();上面的例
javascript关于继承解析 上一篇已介绍了组合继承，现在讲讲剩余的几种继承。原型式继承调用一个函数，接收这个函数返回来的对象，这个对象的原型就是传入函数的参数对
上一篇：JavaScript中的prototype原型学习指南(JavaScript中的数据类型分为两大类)
下一篇：快速解决Canvas.toDataURL 图片跨域的问题(快速解决胃胀气)
