文档就绪函数参数的目的是什么?

时间:2014-11-16 15:27:44

标签: jquery

$(document).ready(function(c) {
  $('.alert-close').on('click', function(c){
    $(this).parent().fadeOut('slow', function(c){
    });
  });
});

在此代码中function(c)的含义是什么?

4 个答案:

答案 0 :(得分:0)

根据jQuery.on() | jQuery API Documentation

.on( events [, selector ] [, data ], handler );
  • <强>处理程序 Type: Function( Event eventObject [, Anything extraParameter ] [, ... ] )是:

    触发事件时执行的函数。值false也允许作为简单返回false的函数的简写。

因此,function(c)是事件发生时执行的函数的头部; c是传递给事件主体的事件对象。许多程序员使用evente,因此更容易记住参数的含义:

function(c) //head of handler
{ //body of handler start
    //the code that will be executed
} //body of handler end

它自己的function(c)意味着什么,没有任何目的;它是匿名函数事件处理程序的一部分,如果您愿意,每次event发生时都会执行。

答案 1 :(得分:0)

当文档(DOM)准备就绪时,

$(document).ready在参数中使用一个侦听器函数。

jQuery函数作为参数传递给就绪侦听器函数。

这在调用$.noConflict()时非常有用,因为在这种情况下,$变量已恢复,并且不再引用jQuery

通常不要依赖$这是一种好习惯,因为你永远不会知道是否会召唤$.noConflict()

以下是更有意义的内容:

jQuery(document).ready(function ($) {
    //can use $ safely to reference jQuery in here
});

(function ($) {
    //can use $ safely to reference jQuery in here
    $(document).ready(function () {

    });
})(jQuery);

现在,对于其他表单,例如$('.alert-close').on('click', function(c) {,则c不会指向jQuery。相反,它引用了event object,其中可以用于获取有关事件的详细信息或取消它/停止传播。

请注意,您没有使用事件对象,那么您可以$('.alert-close').on('click', function() {

最后,按照惯例,人们会使用e变量作为事件对象,而不是c

以下是如何重写它以使其更有意义:

jQuery(document).ready(function($) {
  $('.alert-close').on('click', function() {
    $(this).parent().fadeOut('slow');
  });
});

答案 2 :(得分:0)

  • 您案例中的c可以命名为(我更喜欢称之为event)。
  • Callback
  • 之后给出的trigger
  • Callback包含Event Object(jQuery Documentation
  • Event Object基于W3(ECMAScript
  • 给出的标准输出

Event Object包含连接到触发器的数据。在on函数中,它包含如下数据:

  • typeArg参数是String。
  • canBubbleArg参数是布尔值。
  • cancelableArg参数是布尔值。
  • viewArg参数是实现AbstractView接口的对象。
  • detailArg参数是一个数字。
  • screenXArg参数是一个数字。
  • screenYArg参数是一个数字。
  • clientXArg参数是一个数字。
  • clientYArg参数是一个数字。
  • ctrlKeyArg参数是布尔值。
  • altKeyArg参数是布尔值。
  • shiftKeyArg参数是布尔值。
  • metaKeyArg参数是布尔值。
  • buttonArg参数是一个数字。
  • relatedTargetArg参数是实现EventTarget接口的对象。

见(documentation

不需要使用Callback。但在某些情况下非常有用(例如在ajax调用中)

答案 3 :(得分:0)

C是事件侦听器对象。如果事件侦听器对象具有任何属性,则可以在函数调用内部调用它们。所有事件都不同,因此您必须查看API以查看您的代码是否需要。现在看来,c不是必需的,因为你没有使用它。

这是一个jsfiddle来说明:

http://jsfiddle.net/larryjoelane/qwawg9u4/6/

以下是小提琴的javascript代码:

      $(document).ready(function(c) {
      $('.alert-close').on('click', function(c){


$(this).parent().fadeOut('slow', function(c){

    /*
      c is the event listener object
      some peopele use e or event instead but it doesn't matter

      you can prevent default actions of elements
      like links or form submission buttons by using the event
      listener object.

      for example:
      would stop the default action of an element
      the div used doesn't have one so it will
      create an error and return undefinded
      c.preventDefault();

      another example:
      This would stop the event from going up the document object
      model to other elements
      It's not necessary here though because you are using the
      parent() function to select the parent div only
      so this will also return an error of undefined
      c.stopPropagation();
     */

      /*
      this will display the event listener object it will be  
      undefined on the jquery function you are using
      */
       //alert(c);

    /* 
       A good use for the event listener would be to capture
       capture keycodes of the keyboard presses display them or
       do perform an action if a user presses a certain key like
       up arrow for example
    */

      //you could do something like this
    $(window).on("keypress",function(event){

        //display the keycode pressed
        //which is the property of the event object in this
        //case
        alert(event.which);

    });

       });
       });
     });

以下是示例HTML:

           <div class="parent">

                    I am the parent content

               <div class="alert-close">

                    hello im the alert close div container, click on me

               </div>
         </div>