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

嗨，我想在每次单击事件处理程序方法之前调用一个函数。

---

我知道，在click handler方法中，我可以首先调用我的函数，但这相当麻烦，因为我必须在很多地方这样做，而且我必须记住，对于任何未来的click事件，我也必须这样做。

您可以在

文档

对象（或任何公共父对象）上设置捕获事件处理程序它将首先在单个对象上的事件处理程序之前调用

capture

是

.addEventListener（）

的第三个参数，该参数通常是可选的，默认为

false

，但如果在父级上传递

true

，则会首先调用事件处理程序

下面是一个例子：

document.addEventListener（“单击”，函数（）{
日志（“文档捕获点击”）；
}，对）；
document.getElementById（“目标”）.addEventListener（“单击”，函数）（）{
日志（“元素点击”）；
}，假）；
函数日志（x）{
var div=document.createElement（“div”）；
div.innerHTML=x；
文件.正文.附件（div）；
}

---

点击一些文本

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

首先是使用在单击事件之前激发的onmousedown

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

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

另一种方法是使用compose，它将为您创建新的可重用函数（npm i lodash.compose）

或者您可以将新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内部更复杂

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

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