Javascript에서 이벤트 생성 및 리스너 설정

서문: 저는 아직 배우고 있는 주니어 개발자입니다. 이 메모는 일상 업무에서 직접 경험한 것입니다. 나는 그것이 완벽하지 않다는 것을 알고 있지만 도움이되기를 바랍니다. 이에 대한 개선 사항을 기꺼이 받아들이겠습니다.

뭔가 듣고 있다...

우리는 많은 경우에 이벤트 리스너를 사용합니다.
일반적인 경우는 DOM에서 일부 요소를 클릭하는 경우입니다. 다른 하나는 양식이나 일부 입력 필드를 제출할 때입니다.

어떻게 작동하는지, 어떻게 바닐라 자바스크립트로 빌드하는지 확인해보자.

물론 모든 것은 jQuery로 할 수 있습니다. 이것은 '더 간단한' 코드로 보일 수 있지만, 겉보기에 단순한 메소드를 로드하려면 전체 라이브러리를 로드해야 한다는 점을 기억해야 합니다.

사례 1

양식이나 입력을 제출하지 않고 조치를 취한다고 가정해 보겠습니다. 예를 들어 값을 더하거나 빼는 버튼(카운터). 이 경우 클릭 수신기를 연결하고 해당 작업을 수행하는 기능을 실행하도록 합니다.

단순화된 예:

<button id="buttonId" onClick="myFunction()">Action</button>
<script>
    myFunction() {
        actions here
    }
</script>

자바스크립트 파일을 추가할 수도 있습니다. 이 경우 버튼에서 onClick을 제거하고 스크립트에서 직접 리스너를 연결할 수 있습니다. 먼저 버튼 요소를 선택한 다음 리스너에 연결합니다.

const submitButton = document.getElementById('buttonId');

submitButton.addEventListener('click', e => {
    e.preventDefault();
    this.onClickHandler(optional methods);
});

다른 방법 대신 이 방법을 사용하면 즉각적인 이점이 없습니다. 그러나 Javascript 코드를 읽을 수 있고 확장 가능한 한 곳에만 유지하려면 좋은 방법입니다.
html 본문에 더 많은 기능을 추가해야 하는 경우 코드가 빠르게 지저분해집니다.

사례 2

다른 경우에는 위의 방법으로 충분하지 않습니다. 위에서 언급했듯이 이메일과 같은 일부 입력을 받고 제출해야 하는 양식이 있을 수 있습니다.

따라서 HTML의 단순화된 예로서 다음이 있습니다.

<form>
    <li><input type="radio" name="optionOne">
    <li><input type="radio" name="optionTwo">
</form>
<button id="submitButton">Submit</button>

그렇다면 좋은 방법은 버튼에 리스너를 연결하는 것입니다.

별도의 JS 파일에서 다음을 생성할 수 있습니다.

submitButton.addEventListener('click', (e) => {
            e.preventDefault();
            form.dispatchEvent(new Event('submit'));
        });
form.addEventListener('submit', (e) => {
            e.preventDefault();
            this.onSubmitHandler(optional arguments);
        });

이를 분해하기 위해 버튼에 리스너를 추가했습니다. 클릭하면 클릭 리스너에서 콜백 설정이 실행됩니다.

Preventdefault는 이벤트가 버블링되는 것을 방지합니다(예를 들어 콜백 메서드를 한 번 대신 두 번 호출함).

결국 우리는 새로운 제출 이벤트(자바스크립트 객체이기 때문에 대문자)를 생성하고 이를 양식에 첨부합니다.

이렇게 하면 폼 자체에 리스너를 추가할 때 버튼을 클릭하면 폼 데이터 수집이 호출됩니다.
콜백을 통해 원하는 작업을 수행하는 데 필요한 메서드를 호출합니다.

몇 줄의 코드로 필요에 맞게 조정할 수 있는 사용자 지정 수신기가 있습니다.