바인딩 HTML 이벤트는, 새로운 ES6 모듈 구문 전에 모듈

Question

을 ES6합니다 :

function doStuff() { 
    ... 
} 

이 모든 것이 모두 간단하고 간단합니다. 하지만 지금은 es6 모듈입니다. 우리는 JS 모듈 (document.getElementbyId('button').onclick=doStuff) 내에서 우리의 HTML과 JS 링크를 전역 (window.doStuff =() => { ... })

우리의 기능을 노출

1. 필요 eiter 그래서 그들은 전역에 기능을 노출하지 마십시오

   다른 방법보다 위의 방법 중 선호되는 방법이 있습니까? 나는이 질문이 의견을 기반으로 잘 닫힐 수 있지만 이해할 만하다. 나는 Ecke가 스펙/도큐멘트에서 어딘가에 언급 한 경우에만 건방지게 물어볼 것이다. 확실히 그들은 이것에 대해 생각해보아야 만합니다.

Answer 1

DOM에서 직접 첨부 이벤트가 계속 지원되지만 이것은 HTML과 JS를 긴밀히 연결하는 오래된 패러다임입니다. 또한 각 이벤트에 대해 하나의 처리기 만 추가 할 수 있습니다 (예 : 클릭).

요소와 JS를 참조한 다음 addEventListener/removeEventListener 또는 jQuery (또는 다른 라이브러리)에 해당하는 이벤트 핸들러를 연결하면 표시되지 않습니다.

const button = document.querySelect('#button'); 
const event handler = (ev) => { /..../ }; 

button.addEventListener('click', handler); 
button.removeEventListener('click', handler); 

참고 : 이벤트 처리의 온 클릭 스타일은 각도, 반응 및 VUE 같은 현대적인 프레임 워크에 돌아왔다. 그들은 ng-click, onClick, v-on과 같은 이벤트를 첨부하는 기존의 선언적 방법을 모방하는 지시문/소품을 가지고 있지만 후드에서는 addEventListener (명령형)을 사용하여 이벤트를 바인딩합니다.