详解JavaScript中的自定义大事编写_

《详解JavaScript中的自定义大事编写_》由会员分享，可在线阅读，更多相关《详解JavaScript中的自定义大事编写_（13页珍藏版）》请在装配图网上搜索。

1、详解JavaScript中的自定义大事编写_ 这篇文章主要介绍了JavaScript中的自定义大事编写,自定义大事是在扫瞄器中编写Web页面操作功能的基本方式,需要的伴侣可以参考下 我们可以自定义大事来实现更敏捷的开发，大事用好了可以是一件很强大的工具，基于大事的开发有许多优势（后面介绍）。 与自定义大事的函数有 Event、CustomEvent 和 dispatchEvent。 挺直自定义大事，用法 Event 构造函数： var event = new Event(build); / Listen for the event. elem.addEventListener(build, f

2、unction (e) . , false); / Dispatch the event. elem.dispatchEvent(event); CustomEvent 可以创建一个更高度自定义大事，还可以附带一些数据，具体用法如下： var myEvent = new CustomEvent(eventname, options); 其中 options 可以是： detail: . , bubbles: true, cancelable: false 其中 detail 可以存放一些初始化的信息，可以在触发的时候调用。其他属性就是定义该大事是否具有冒泡等等功能。 内置的大事会由扫瞄器依据某

3、些操作进行触发，自定义的大事就需要人工触发。dispatchEvent 函数就是用来触发某个大事： element.dispatchEvent(customEvent); 上面代码表示，在 element 上面触发 customEvent 这个大事。结合起来用就是： / add an appropriate event listener obj.addEventListener(cat, function(e) process(e.detail) ); / create and dispatch the event var event = new CustomEvent(cat, detail

4、:hazcheeseburger:true); obj.dispatchEvent(event); 用法自定义大事需要留意兼容性问题，而用法 jQuery 就简洁多了： / 绑定自定义大事 $(element).on(myCustomEvent, function(); / 触发大事 $(element).trigger(myCustomEvent); 此外，你还可以在触发自定义大事时传递更多参数信息： $( p ).on( myCustomEvent, function( event, myName ) $( this ).text( myName + , hi there! ); ); $

5、( button ).click(function () $( p ).trigger( myCustomEvent, John ); ); JavaScript 自定义大事就是有别于如 click, submit 等标准大事的自行定制的大事，在叙述自定义大事有何好处之前，先来看一个自定义大事的例子： div id=testBox/div / 创建大事 var evt = document.createEvent(Event); / 定义大事类型 evt.initEvent(customEvent, true, true); / 在元素上监听大事 var obj = document.getE

6、lementById(testBox); obj.addEventListener(customEvent, function() console.log(customEvent 大事触发了); , false); 具体效果可以查看 Demo，在 console 中输入 obj.dispatchEvent(evt)，可以看到 console 中输出“customEvent 大事触发了”，表示自定义大事胜利触发。 在这个过程中，createEvent 方法创建了一个空大事 evt，然后用法 initEvent 方法定义大事的类型为商定好的自定义大事，再对相应的元素进行监听，接着，就是用法 dis

7、patchEvent 触发大事了。 没错，自定义大事的机制如一般大事一样监听大事，写回调操作，触发大事后执行回调。但不同的是，自定义大事完全由我们掌握触发时机，这就意味着实现了一种 JavaScript 的解耦。我们可以把多个关联但规律简单的操作利用自定义大事的机制敏捷地掌握好。 当然，可能你已经猜到了，上面的代码在低版本的 IE 中并不生效，事实上在 IE8 及以下版本的 IE 中并不支持 createEvent()，而有 IE 私有的 fireEvent() 方法，但圆满的是，fireEvent 只支持标准大事的触发。因此，我们只能用法一个特别而简洁的方法触发自定义大事。 / type 为

8、自定义大事，如 type = customEvent，callback 为开发者实际定义的回调函数 objtype = 0; objtype+; obj.attachEvent(onpropertychange, function(event) if( event.propertyName = type ) callback.call(obj); ); 这个方法的原理事实上是在 DOM 中增加一个自定义属性，同时监听元素的 propertychange 大事，当 DOM 的某个属性的值发生转变时就会触发 propertychange 的回调，再在回调中推断发生转变的属性是否为我们的自定义属性，

9、若是则执行开发者实际定义的回调。从而模拟了自定义大事的机制。 为了使到自定义大事的机制能配合标准大事的监听和模拟触发，这里给出一个完整的大事机制，这个机制支持标准大事和自定义大事的监听，移除监听和模拟触发操作。需要留意的是，为了使到代码的规律更加清楚，这里商定自定义大事带有 custom 的前缀（例如：customTest，customAlert）。 /* * description 包含大事监听、移除和模拟大事触发的大事机制，支持链式调用 * */ (function( window, undefined ) var Ev = window.Ev = window.$ = function(

10、element) return new Ev.fn.init(element); ; / Ev 对象构建 Ev.fn = Ev.prototype = init: function(element) this.element = (element element.nodeType = 1)? element: document; , /* * 添加大事监听 * * param String type 监听的大事类型 * param Function callback 回调函数 */ add: function(type, callback) var _that = this; if(_that

11、.element.addEventListener) /* * supported For Modern Browers and IE9+ */ _that.element.addEventListener(type, callback, false); else if(_that.element.attachEvent) /* * supported For IE5+ */ / 自定义大事处理 if( type.indexOf(custom) != -1 ) if( isNaN( _that.elementtype ) ) _that.elementtype = 0; var fnEv =

12、function(event) event = event ? event : window.event if( event.propertyName = type ) callback.call(_that.element); ; _that.element.attachEvent(onpropertychange, fnEv); / 在元素上存储绑定的 propertychange 的回调，便利移除大事绑定 if( !_that.elementcallback + callback ) _that.elementcallback + callback = fnEv; / 标准大事处理 el

13、se _that.element.attachEvent(on + type, callback); else /* * supported For Others */ _that.elementon + type = callback; return _that; , /* * 移除大事监听 * * param String type 监听的大事类型 * param Function callback 回调函数 */ remove: function(type, callback) var _that = this; if(_that.element.removeEventListener)

14、 /* * supported For Modern Browers and IE9+ */ _that.element.removeEventListener(type, callback, false); else if(_that.element.detachEvent) /* * supported For IE5+ */ / 自定义大事处理 if( type.indexOf(custom) != -1 ) / 移除对相应的自定义属性的监听 _that.element.detachEvent(onpropertychange, _that.elementcallback + callb

15、ack); / 删除储存在 DOM 上的自定义大事的回调 _that.elementcallback + callback = null; / 标准大事的处理 else _that.element.detachEvent(on + type, callback); else /* * supported For Others */ _that.elementon + type = null; return _that; , /* * 模拟触发大事 * param String type 模拟触发大事的大事类型 * return Object 返回当前的 Kjs 对象 */ trigger: f

16、unction(type) var _that = this; try / 现代扫瞄器 if(_that.element.dispatchEvent) / 创建大事 var evt = document.createEvent(Event); / 定义大事的类型 evt.initEvent(type, true, true); / 触发大事 _that.element.dispatchEvent(evt); / IE else if(_that.element.fireEvent) if( type.indexOf(custom) != -1 ) _that.elementtype+; els

17、e _that.element.fireEvent(on + type); catch(e) ; return _that; Ev.fn.init.prototype = Ev.fn; )( window ); 测试用例1（自定义大事测试） / 测试用例1（自定义大事测试） / 引入大事机制 / . / 捕捉 DOM var testBox = document.getElementById(testbox); / 回调函数1 function triggerEvent() console.log(触发了一次自定义大事 customConsole); / 回调函数2 function trig

18、gerAgain() console.log(再一次触发了自定义大事 customConsole); / 封装 testBox = $(testBox); / 同时绑定两个回调函数，支持链式调用 testBox.add(customConsole, triggerEvent).add(customConsole, triggerAgain); 完整的代码在 Demo。 打开 Demo 后，在 console 中调用 testBox.trigger(customConsole) 自行触发自定义大事，可以看到 console 输出两个提示语，再输入 testBox.remove(customConsole, triggerAgain) 移除对后一个监听，这时再用法 testBox.trigger(customConsole) 触发自定义大事，可以看到 console 只输出一个提示语，即胜利移除后一个监听，至此大事机制全部功能正常工作。 .