首页 > 代码库 > javascript事件之：jQuery事件接口概述
javascript事件之：jQuery事件接口概述
事件的操作，在JavaScript是非常频繁的。然而原生javaScript的事件API让新手感觉非常不友好，再加上事件依赖于DOM，而原生javaScript对DOM的选择又是三板斧的功力。由此催生出以jQuery为领头羊的对原生js事件操作的兼容性处理，API优化以及一些功能的拓展。
现在，以jQuery2.0.3为例，我们来看看jQuery的事件接口。
首先来看拓展到jQuery.prototype下的实例方法：
//5049 - 5150
1 jQuery.fn.extend({2 on: function( types, selector, data, fn, /*INTERNAL*/ one ) { ... },3 one: function( types, selector, data, fn ) { ... },4 off: function( types, selector, fn ) { ... }),5 trigger: function( type, data ) { ... },6 triggerHandler: function( type, data ) { ... }7 })
//6742-6773
//提供的一些便捷方法
1 jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + 2 "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + 3 "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) { 4 5 // Handle event binding 6 jQuery.fn[ name ] = function( data, fn ) { 7 return arguments.length > 0 ? 8 this.on( name, null, data, fn ) : 9 this.trigger( name );10 };11 });12 jQuery.fn.extend({13 hover: function( fnOver, fnOut ) { ... },14 bind: function( types, data, fn ) { ... },15 unbind: function( types, fn ) { ... },16 delegate: function( selector, types, data, fn ) { ... },17 undelegate: function( selector, types, fn ) { ... }18 })
jQuer写法的多样性在这里可窥见一二。
这里的方法除了triggerHandler每一个在实际开发中都比较常用。
triggerHandler的用法如下：
js代码：
$("#inputTxt").on("focus", function(){ console.log("获得焦点")})$("#triggerHandler").on("click", function(){ $("#inputTxt").triggerHandler("focus")})$("#trigger").on("click", function(){ $("#inputTxt").trigger("focus")})html代码：
<input id="inputTxt" type="text" name="" id="" /><input id="trigger" type="button" value="trigger触发"/><input id="triggerHandler" type="button" value="triggerHandler触发"/>
当点击”trigger触发“按钮，触发text输入框的自定义focus事件和默认的focus事件
而点击“triggerHandler触发”按钮，仅仅触发自定义focus事件，默认事件被阻止了。
事实上，triggerHandler不仅能够阻止默认事件，还能阻止冒泡事件。
以上的接口就是jQuery对外的实例接口。可是我们知道，jQuery的实例方法基本上都是一层表皮，其真正的实现更多是靠jQuery拓展方法。
拓展方法
1 jQuery.event = { 2 global: {}, 3 add: function( elem, types, handler, data, selector ) {}, 4 remove: function( elem, types, handler, selector, mappedTypes ) {}, 5 trigger: function( event, data, elem, onlyHandlers ) {}, 6 dispatch: function( event ) {}, 7 handlers: function( event, handlers ) {}, 8 props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "), 9 fixHooks: {},10 keyHooks: {11 props: "char charCode key keyCode".split(" "),12 filter: function( event, original ) {}13 },14 mouseHooks: {15 props: "button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "),16 filter: function( event, original ) {}17 },18 fix: function( event ) {},19 special: {},20 simulate: function( type, elem, event, bubble ) {}21 }22 jQuery.Event = function( src, props ) {}23 jQuery.Event.prototype = {24 isDefaultPrevented: returnFalse,25 isPropagationStopped: returnFalse,26 isImmediatePropagationStopped: returnFalse,27 preventDefault: function() {},28 stopPropagation: function() {},29 stopImmediatePropagation: function() {}30 }
最后是一些兼容性处理
1 jQuery.each({ 2 mouseenter: "mouseover", 3 mouseleave: "mouseout" 4 }, function( orig, fix ) { 5 jQuery.event.special[ orig ] = { 6 delegateType: fix, 7 bindType: fix, 8 handle: function( event ) { 9 ...10 }11 };12 });13 14 if ( !jQuery.support.focusinBubbles ) {15 jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) {16 handler = function( event ) {17 jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ), true );18 };19 jQuery.event.special[ fix ] = {20 setup: function() {21 ...22 },23 teardown: function() {24 ...25 } 26 };27 });28 }
好了，下一回我们实例方法下的这些接口如何与jQuery.event,jQuery.Event协同工作。
javascript事件之：jQuery事件接口概述
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。