Question

您好我想在每次点击事件处理程序方法之前调用一个函数。我知道，在单击处理程序方法中，我可以先调用我的函数，但这非常麻烦，因为我必须在很多地方执行此操作，并且我必须记住以后任何点击事件都一样。

Answer 1

您可以在document对象（或任何公共父对象）上设置捕获事件处理程序，并在单个对象的事件处理程序之前首先调用它。 capture是.addEventListener()的第三个参数，通常是可选的，默认为false，但如果在父项上传递true，则首先调用事件处理程序。

以下是一个例子：

document.addEventListener("click", function() {
   log("document capture click");
}, true);

document.getElementById("target").addEventListener("click", function() {
   log("element click");
}, false);

function log(x) {
    var div = document.createElement("div");
    div.innerHTML = x;
    document.body.appendChild(div);
}

<div id="target">Some text to click on</div>

这是一个有助于理解捕获标记的相关问题：Unable to understand useCapture attribute in addEventListener

Answer 2

我在这里看到两种解决方案。

首先使用在点击事件之前触发的onmousedown

document.querySelector('.selector').addEventListener('mousedown', function(){
    console.log('mousedown');
}

document.querySelector('.selector').addEventListener('click', function(){
    console.log('click');
}

其他方法是使用compose为你创建新的可重用函数（npm i lodash.compose）。

var compose = require(lodash.compose);
var firstFunc = function(e){
    console.log('first');
    return e; //if you want to use it in second function
};
var secondFunc = function(e) {
    console.log('second');
};

document.querySelector('.selector').addEventListener('click', compose(secondFunc, firstFunc));

或者你可以在变量中保存新的func;

var logFirstThanSecondOnClick = compose(secondFunc, firstFunc);
document.querySelector('.selector').addEventListener('click', logFirstThanSecondOnClick);

简单撰写下一步

function compose(f, g) {
    return function(x) {
        return f(g(x));
    }
}

但是lodash one内部更复杂。

如果您对https://en.wikipedia.org/wiki/Function_composition

感兴趣，这里有一些关于函数组合的数学理论

在任何单击事件处理程序之前调用函数

2 个答案: