zoukankan      html  css  js  c++  java
  • 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协同工作。

  • 相关阅读:
    739. Daily Temperatures
    556. Next Greater Element III
    1078. Occurrences After Bigram
    1053. Previous Permutation With One Swap
    565. Array Nesting
    1052. Grumpy Bookstore Owner
    1051. Height Checker
    数据库入门及SQL基本语法
    ISCSI的概念
    配置一个IP SAN 存储服务器
  • 原文地址:https://www.cnblogs.com/pfzeng/p/4158525.html
Copyright © 2011-2022 走看看