내가 사용하고자하는 .bind이 스레드에서 약간의 최신 솔루션에 따라 이벤트 핸들러를 구현하는 솔루션을 여기에 .
그러나 내 원래 처리기가 다음과 같다고 가정합니다.
const clickHandler = (arg1, arg2) => {
...do stuff...
}
let var1 = "text1"
let var2 = "text2"
myButton.addEventListener("click", clickHandler.bind(null, var1, var2))
event인수 가 필요한 다음과 같은 줄 을 핸들러 에 추가해야하는 경우 :
const clickHandler = (arg1, arg2) => {
event.stopPropagation()
...do stuff...
}
을 사용하지 않고 수행하면 다음 .bind과 같이 작동합니다.
const clickHandler = (arg1, arg2) => {
...do stuff...
}
let var1 = "text1"
let var2 = "text2"
myButton.addEventListener("click", (event) => {
event.stopPropagation()
clickHandler(var1, var2)
})
하지만을 사용하여 간결하게 만들고 싶다면 .bind어떻게 event핸들러에 전달해야 합니까? 감사.
bind()첫 번째 인수 이후에 전달 되는 인수는 함수가 생성 될 때 함수에 제공된 인수 앞에 추가 됩니다 (이 경우) event. 즉, 결과 바운드 콜백에서는 eventbind를 사용하지 않는 경우 정상적인 첫 번째 인수가 아니라 콜백이 수신하는 마지막 인수가됩니다. this화살표 기능이므로 변경되지 않습니다.
일관되고 알려진 수의 인수를 각각 전달하는 경우 bind()직접 액세스 할 수 있습니다.
const clickHandler = (arg1, arg2, event) => {
...
}
그렇지 않으면 바인딩 된 인수의 수가 다를 event경우 arguments반복기 에서 마지막 요소를 검색하여에 액세스 할 수 있습니다 .
const clickHandler = (...args) => {
const event = args.pop();
...
}
const myButton = document.getElementById('button');
const clickHandler = (...args) => {
const event = args.pop();
console.log(event.target);
console.log('args: ', args);
}
let var1 = "text1"
let var2 = "text2"
myButton.addEventListener("click", clickHandler.bind(null, var1, var2));<button type='button' id='button'>Button</button>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다