英文:
A bound function for an event Listener
问题
我想了解绑定函数用于事件监听器的工作原理。我知道.bind()的第一个参数是一个新的上下文，因此.this关键字被更改，但为什么我不能传递更多的参数呢？
这不是什么大问题，因为通过在函数中添加一个参数，可以轻松地传递事件对象，但为什么要暗示这一点呢？这部分我也不太理解。
const nav = document.querySelector('.nav');
const handleOver = function (e) {
if (e.target.classList.contains('nav__link')) {
const link = e.target;
const siblings = link.closest('.nav').querySelectorAll('.nav__link');
const logo = link.closest('.nav').querySelector('img');
siblings.forEach(el => {
if (el !== link) {
el.style.opacity = this;
}
});
logo.style.opacity = this;
}
};
nav.addEventListener('mouseover', handleOver.bind(0.5));
nav.addEventListener('mouseout', handleOver.bind(1));
尝试传递更多参数（当然要使用给定的参数），但它并不像我预期的那样工作。
英文:
I wanted to understand how do bound functions used for an event listener work. I get that the first parameter for .bind() is a new context, thus the .this keyword being altered, but why can't I pass more arguments along with that?
It isn't much of a problem, since the event object is passed through simply by having a parameter in the function, but why is it implied? That's the part I don't understand too
const nav = document.querySelector(`.nav`);
const handleOver = function (e) {
if (e.target.classList.contains(`nav__link`)) {
const link = e.target;
const siblings = link.closest(`.nav`).querySelectorAll(`.nav__link`);
const logo = link.closest(`.nav`).querySelector(`img`);
siblings.forEach(el => {
if (el !== link) {
el.style.opacity = this;
}
});
logo.style.opacity = this;
}
};
nav.addEventListener(`mouseover`, handleOver.bind(0.5));
nav.addEventListener(`mouseout`, handleOver.bind(1));
Tried passing more arguments (with given parameters of course) but it just doesn't work as I expected
答案1
得分: 1
你确实可以向 bind 传递更多的参数。第一个参数设置了 this 值，而任何后续的参数都会固定传递给函数的参数值，这些参数会在函数被调用时传递的任何额外参数之前传递。
你只需要允许事件处理函数接受足够的参数。事件对象将作为参数传递给处理程序，这将使它成为绑定函数的最后一个参数。
示例：
document.addEventListener('click', function(arg1, event) {
console.log(this, arg1, event.target);
}.bind({test: 1}, "arg 1"));
点击这里
英文:
You certainly can pass more arguments to bind. The first argument sets the this value and any subsequent arguments fix the values of the arguments passed to the function before any additional arguments that are passed when the function is invoked.
You just need to allow the event handler function to accept enough parameters. The event object will be passed as an argument to the handler, which would make it the last argument of the bound function.
Example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.addEventListener('click', function(arg1, event) {
console.log(this, arg1, event.target);
}.bind({test: 1}, "arg 1"));
<!-- language: lang-html -->
Click here
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论