将参数传递给事件触发器中的函数调用

Pass parameters to function call in event trigger

本文关键字：函数调用 触发器 事件 参数传递      更新时间：2023-09-26

现在我有这个

jQuery('.widget-prop').keyup(function() {
    var prop = jQuery(this).attr('id');
    var val = jQuery(this).val();
    stuff;
}

和 

jQuery('.widget-prop').click(function() {
    var prop = jQuery(this).attr('id');
    var val = jQuery(this).val();
    stuff;
}

两个函数是相同的，所以我想通过定义外部函数并调用它来简化它 

jQuery('.widget-prop').click('myFunction');

但是如何将参数传递给 myFunction？

function myFunction(element) {
    stuff;
}

谢谢

去掉那些引号... 

jQuery('.widget-prop').click(myFunction);
首先，

您可以将两个处理程序合并为一个：

jQuery('.widget-prop').on('click keyup', function() {
    var prop = jQuery(this).attr('id');
    var val = jQuery(this).val();
    // stuff;
});

或者对于旧版本的jQuery：

jQuery('.widget-prop').bind('click keyup', function() { // ... });

其次，jQuery 会自动将当前元素应用于您提供的任何函数，因此当您执行此操作时，this 关键字仍将是引发事件的元素：

jQuery('.widget-prop').on('click keyup', myHandler);
function myHandler() {
    var prop = jQuery(this).attr('id');
    var val = jQuery(this).val();
    // stuff;
}

使用 .on 函数而不是快捷方式.click并将所有必需的事件作为参数传递：

jQuery('.widget-prop').on('click keyup', function() {
  var prop = jQuery(this).attr('id');
  var val = jQuery(this).val();
  //stuff;
});

编辑：已弃用 =>快捷方式

在MyFunction this的上下文中，是你点击的元素。此外，click处理程序采用 1 个参数，因此在事件参数保存有关操作的数据的位置应function MyFucntion(event)函数签名(例如 event.target是单击的元素(。

因此，这就是您定义处理程序的方式：

function myFunction(event){
    var element = event.target;
    // Note: event.target == this
    //do stuff
}

这就是将其绑定到事件的方式：

$(".widget-prop").click(myFunction);
相关文章：