javascript事件之:jQuery事件接口概述

页面导航:首页 > 网络编程 > JavaScript > javascript事件之:jQuery事件接口概述

javascript事件之:jQuery事件接口概述

来源: 作者: 时间:2016-02-05 11:06 【

事件的操作,在JavaScript是非常频繁的。然而原生javaScript的事件API让新手感觉非常不友好,再加上事件依赖于DOM,而原生javaScript对DOM的选择又是三板斧的功力。由此催生出以jQuery为领头
 事件的操作,在Script是非常频繁的。然而原生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")
})
 
代码:
 
<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: "mouver",
 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协同工作。
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<