Question

我有一个按钮，它已经有一个onclick-event和一个指定的函数。我希望在它前面添加另一个函数调用。我可以想象应该可以使用onclick属性（attr），但我不认为这是最佳实践。

您认为在现有onclick事件上添加函数调用的最佳做法是什么？

Answer 1

如果你不害怕搞乱jQuery的胆量：

// "prepend event" functionality as a jQuery plugin
$.fn.extend({
  prependEvent: function (event, handler) {
    return this.each(function () {
      var events = $(this).data("events"), 
          currentHandler;

      if (events && events[event].length > 0) {
        currentHandler = events[event][0].handler;
        events[event][0].handler = function () {
          handler.apply(this, arguments);
          currentHandler.apply(this, arguments);
        }      
      }
    });
  }
});

$("#someElement").prependEvent("click", function () {
    whatever();
});

现场直播：http://jsfiddle.net/Tomalak/JtY7H/1/

请注意，必须已有currentHandler，否则该功能将无法执行任何操作。

免责声明： 我认为这是一个黑客行为。这取决于jQuery内部可能会在下一版本的库中发生变化。它现在可以工作了（我测试了jQuery 1.7.2），但如果它打破了未来版本的jQuery，也不要感到惊讶。

Answer 2

我在这里写了一篇简短的example：

$("button").click(function() { // this is already existing
    if ($("span").length) {
        alert("ok");
    }
});

var clicks = $("button").data("events").click.slice();
$("button")
    .unbind("click")
    .click(function() { // this is the new one which should be prepended
        $("body").append($("<span>"));
    });
$.each(clicks, function(i, v) {
    $("button").click(v);
});

Answer 3

我认为没有办法在现有的onclick事件上添加函数调用，但是你可以试试这个：

$('#foo').unbind('click');
$('#foo').click(function() { 
   // do new function call..
   // call original function again...
});

希望有所帮助。

Answer 4

您可以在单个事件上添加功能，但我尝试在onclick事件上避免两个函数。相反，你可以 1.在现有功能中添加新代码 2.从现有功能添加对新功能的调用。

Answer 5

这似乎在1.9.1至3.1.4中有效。有关1.9.1之前的版本，请参见Tomalak's awesome answer。

$(function() {
  $("input" ).mousedown( function() {
    console.log( "mousedown" );
  });

  $("input" ).click( function() {
    console.log( "click" );
  });
    
  $.fn.extend({exposeListeners: 
      function (fn) {
        return $._data( this[0], "events") || {};
      },
    prependListener: function (types, fn) {
      var elems = this;
      $(elems).each(function() {
        var elem = this;
        var $elem = $(elem)
        $elem.on(types, fn);

        var events = $._data( $elem[0], "events")[types];

        if (events.length > 1) { // its the only event, no reason to shift
            events.unshift(events.pop());  // put last as first
        }
    
        return this;
      });
    }
  })
  
  $("#prep").click(function () {
    console.log($("input").exposeListeners());
    $("input:not(:last)").prependListener("click", function () {
      console.log('click, prepended');
    })
    $("a").prependListener("click", function () {
      console.log('click event created');
    })
    console.log($("body").exposeListeners());
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" value="input, Will accept prepend"><br>
<input type="button" value="input, Will also accept prepend"><br>
<input type="button" value="input, Will not"><br>
<a href="#">Link with no pre-exting handlers</a><br><br>

<Button id="prep">Prepend an event</Button>

这是准系统版本

$(function() {
  $.fn.extend({prependListener: function (types, fn) {
      var elems = this;
      $(elems).each(function() {
        var elem = this;
        var $elem = $(elem)
        $elem.on(types, fn);

        var events = $._data( $elem[0], "events")[types];

        if (events.length > 1) {
          events.unshift(events[events.length-1]);
          events.pop();
        }
    
        return this;
      });
    }
  })
})

Answer 6

如果您已将事件绑定为此

$(elem).on('click', functionName);

您可以像这样修改：

$(elem).on('click', function(){

 anotherFunctionNameOrWhateverYouWant();

 functionName();
});

使用JQuery在按钮上添加onclick操作

6 个答案: