jQuery's event

Question

自学jQuery，我遇到了以下代码。我想知道事件是如何在没有创建的情况下通过匿名函数传递的。

$(function() 
{
   $("#cancelForm").on("click", function(e)
    {
      e.preventDefault();
      clearForm();
    }
 });

Answer 1

事件实例由jQuery内部传递。简单来说，当他们定义他们的on方法时，他们会执行您在触发指定事件时将事件作为参数传递的函数。

示例代码：

^{（旨在估算如何定义on）}

/* Definition of the 'on' method'. */
$.fn.on = function (eventType, callback) {
   /* Iterate over every element of the jQuery object. */
   for (var i = 0, l = this.length; i < l; i++) {
      /* Create an event listener for the currently iterated element. */
      this[i].addEventListener(eventType, function (e) {
         /* Execute the callback given passing the custom jQuery Event object to it. */
         callback($.Event(e));
      });
   }
});

备注：

$.fn是jQuery定义其原型方法的对象。

传递给e的函数中显示的addEventListener由浏览器传递。

Answer 2

正如评论中所提到的，您在on()内调用传递给on()的函数，其中事件对象在事件实际发生时传递给您的回调

简化示例：

function dummyOn( eventName, callback){
   // do internal stuff

   // call the function you created and pass `100` to it
   // in real on() this would get called when event occurs and pass the event object
   callback(100);
}


dummyOn('silly-event', function(e){
  console.log('e=', e);// 100 from what was passed to callback when it is called
})

Answer 3

jQuery's event

jQuery的事件系统根据W3C标准规范化事件对象。保证事件对象被传递给事件处理程序（不需要检查window.event）。它规范化目标，relatedTarget，metaKey和pageX / Y属性，并提供stopPropagation()和preventDefault()方法。

这些属性都在Event object页面上记录，并附有示例。

文档对象模型中的标准事件包括：模糊，焦点，加载，调整大小，滚动，卸载，前载， click ，dblclick，{{1} }，mousedown，mouseup，mousemove，mouseover，mouseout，mouseenter，mouseleave，change， select，submit，keydown和keypress。由于DOM事件名称具有某些元素的预定义含义，因此不建议将它们用于其他目的。 jQuery的事件模型可以通过元素上的任何名称触发事件，并且它传播到该元素所属的DOM树（如果有的话）。

您可以在Jquery中检查调用方函数，在keyup事件中调用以下console.log(arguments.callee.caller.toString());。

该日志打印以下内容：

click

因此，基本上，JQuery会为您的逻辑注入应用必要数据的事件对象。

function (a) {
    a = n.event.fix(a);
    var b, c, e, f, g, h = [],
        i = d.call(arguments),
        j = (L.get(this, "events") || {})[a.type] || [],
        k = n.event.special[a.type] || {};
    if (i[0] = a, a.delegateTarget = this, !k.preDispatch || k.preDispatch.call(this, a) !== !1) {
        h = n.event.handlers.call(this, a, j), b = 0;
        while ((f = h[b++]) && !a.isPropagationStopped()) {
            a.currentTarget = f.elem, c = 0;
            while ((g = f.handlers[c++]) && !a.isImmediatePropagationStopped()) (!a.namespace_re || a.namespace_re.test(g.namespace)) && (a.handleObj = g, a.data = g.data, e = ((n.event.special[g.origType] || {}).handle || g.handler).apply(f.elem, i), void 0 !== e && (a.result = e) === !1 && (a.preventDefault(), a.stopPropagation()))
        }
        return k.postDispatch && k.postDispatch.call(this, a), a.result
    }
}

var clearForm = function() {
  console.log("Cleared");
};

$(function() {
  $("#cancelForm").on("click", function(e) {
    console.log(arguments.callee.caller.toString());

    e.preventDefault();
    clearForm();
  });
});

在这种情况下如何传递事件？

3 个答案:

jQuery's event