Question

我对JS很糟糕，我需要使用一个很好的按钮，我从这里得到：http://codepen.io/rikschennink/pen/lEuLD/

简而言之，在HTML中，我有：

<button data-label="click here!"></button>

并在脚本中：

var loading = function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.target.classList.add('loading');
    e.target.setAttribute('disabled', 'disabled');
    setTimeout(function () {
        e.target.classList.remove('loading');
        e.target.removeAttribute('disabled');
    }, 1500);
};


var btns = document.querySelectorAll('button');
for (var i = btns.length - 1; i >= 0; i--) {
    btns[i].addEventListener('click', loading);
}

据我所知，当页面加载时，会添加一个事件侦听器，并在单击时执行函数（e）。我需要的是能够调用另一个函数并在函数（e）执行后将参数传递给它，这将完成真正的工作。我怎么能这样做？

换句话说，如果没有花哨的按钮，我通常可以使用以下方法调用函数：

<button onclick="functionName(id)"; data-label="click here!"></button>

我需要能够在花哨的按钮之后调用函数functionName（id）！

我知道这可能很简单，但我仍然无法做到。

谢谢！

Answer 1

你可以在click回调完成后添加它：

var loading = function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.target.classList.add('loading');
    e.target.setAttribute('disabled', 'disabled');
    setTimeout(function () {
        e.target.classList.remove('loading');
        e.target.removeAttribute('disabled');

        functionName(); //CALL YOU FUNCTION HERE
    }, 1500);
};

Answer 2

您可以将对象传递给事件处理程序。

以下是jsfiddle的例子：

https://jsfiddle.net/csLhymtz/

function MyObject (myTextArgument) {
    this.myTextArgument = myTextArgument;
}

MyObject.prototype.handleEvent = function (event) {
    if (event.type === "click") {
        this.clickHandler();
    }
}

MyObject.prototype.clickHandler = function () {
    alert(this.myTextArgument);
}

var myObject = new MyObject ("i have been clicked");
var hello = new MyObject ("hello world");

$("#myButton")[0].addEventListener("click", myObject, false);
$("#secondButton")[0].addEventListener("click", hello, false);

您可以将处理程序附加到按钮，并将第二个参数传递给JavaScriptObject。

这样的对象将把事件传递给名为handleEvent的函数。

在那里你可以检查你得到的事件类型，并根据执行适当的事件处理程序。您可以使用所需的所有参数创建对象，并在事件上访问它们。

将参数传递给函数（e）

2 个答案: