자바스크립트 온클릭

Question

오늘 JS를 작성할 때 이런 문제에 직면했습니다:

으아악

위는 제 JS 코드 부분입니다. init 함수의 두 번째 문장인 btn.onclick = btnHandle()
원래 의도는 버튼을 클릭하여 btnHandle 함수를 실행하는 것이었지만 실제 상황은 다음과 같습니다. 페이지를 새로 고친 후 btnHandle 함수가 직접 실행됩니다.
그런 다음 코드를 이렇게 변경했습니다

으아악

btn.onclick = btnHandle(); 문에서 ()를 제거하면 생각한대로 코드가 정상적으로 실행됩니다.
이게 왜요? btnHandle 및 btnHandle()

Answer 1

btn.onclick은 btn을 클릭할 때 이 함수의 실행을 나타내는 함수를 허용하고, btnHandle()은 이 함수의 실행을 나타내며 btn .onclick는 반환 값이며, 물론 먼저 실행됩니다. btn.onclick接受一个函数，代表当 btn 被点击的时候执行这个函数，而你的btnHandle()代表了执行这个函数，给 btn.onclick的是他的返回值，当然就先执行了。

下面的写法就代表着，当 btn.onclick 时，执行 btnHandle

다음에 쓰는 것은 btn.onclick시 btnHandle 함수가 실행된다는 의미입니다. 🎜

Answer 2

btn.onclick = btnHandle();이 코드는 클릭 이벤트에 실행 결과를 할당한다는 의미입니다

Answer 3

페이지를 새로 고칠 때 init 함수가 실행된다는 뜻입니다. init 함수가 실행된 후 onclick이 바인딩되면
이 코드 줄은 btn.onclick = btnHandle();
btnHandle 메서드를 실행하는 것과 동일합니다. 메소드의 반환 값을 btn에 할당합니다.
그리고 btn.onclick = btnHandle;
은 btn.onclick = function(){xxxxx};
즉, btnHandle 변수의 참조가 btn.onclick에 할당됩니다
그래서 클릭 이벤트가 트리거되면, btnHandle 대표가 실행됩니다