jQuery on click事件函数也用作普通函数

jQuery on click event function to be used as a normal function as well

本文关键字：函数 click 事件 jQuery on      更新时间：2023-09-26

我有一个事件处理程序方法，它在单击按钮时执行。我还传递了一些数据，如下所示

$( "button" ).on( "click", {name: "Hello"}, greet );

该方法定义为：

function greet(event) {
    // Use the data as event.data.name
    // Access the DOM element on whose click this method was invoked as $(this)
}

但我也想把这个函数用作一个普通的js函数。

  1. 如何传递数据({name: "Namaskara"})
  2. 如何设置上下文-例如，假设我有另一个按钮作为<button id="kannada" />，我想将此按钮用作上下文并发送到greet()函数，以便函数中使用的$(this)实际上是通过按钮

1）回答您的第一个问题。

但我也想把这个函数用作一个普通的js函数。如何传递数据
{名称："Namaskara"}？"：

您需要传入一个具有data属性的对象：

greet({data: {name: "Namaskara"}});

2）关于上下文的第二个问题：

var $kannada = $('#kannada'); // another button
greet.call($kannada[0], {data: {name: "Namaskara"}});

在这种情况下，greet将被调用，就像您手动单击#kannada按钮一样，这意味着上下文this将指向button#kannada。当然，在这种情况下，greet内的事件对象将不是真正的鼠标事件，但它将正确设置data属性。

演示：http://jsfiddle.net/ddhzwk43/

$('button').click(function(){
    otherfunction('Namaskara');
});
function otherfunction(name){
    //do something here with the name :)
    alert(name);
}

http://jsfiddle.net/wzbphgyv/

更新了你的ID内容：

http://jsfiddle.net/wzbphgyv/1/

$('button').click(function(){
    second_function('param_data1', 'param_data2');
});
function second_function(getParam1, getParam2){
    alert(getParam1 + getParam2);
}

Fiddle代码

不需要第二个函数映射，而是使用代理：

function greet(name){
   console.log(name);
}
var proxy = $.proxy(greet, this, "hello"); 
$("#test").on("click", proxy);

另一种方法是使用data-* html5属性来保存要使用的特定数据。你可以这样做：

HTML:

<button data-name="Hello">click</button>
<button id="kannada" data-name="Namaskara">kannada</button>

jQuery：

function greet() {
    alert($(this).data('name')); // alerts - Hello for button 1
}                                // alerts - kannada for button 2
$(function () {
    $("button").on("click", greet);
});

示例演示

相关文章：