Question

现在我有了这个

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;
}

由于

Answer 1

摆脱那些引用......

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

Answer 2

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

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;
}

Answer 3

MyFunction this的上下文是您点击的元素。此外，click处理程序接受1个参数，因此您的函数签名应为function MyFucntion(event)，其中event参数包含有关操作的数据（例如event.target是单击的元素）。

所以这就是你如何定义你的处理程序：

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

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

$(".widget-prop").click(myFunction);

Answer 4

使用.on功能代替快捷方式.click，并将所有必需事件作为参数传递：

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

编辑：已弃用=＆gt;快捷

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

4 个答案: