JavaScript의 공통 이벤트 리스너

코딩 부트캠프에 있습니까? 이벤트 리스너의 작동 방식이나 이벤트 리스너를 생성하는 방법을 거의 이해하지 못하십니까? 코딩 여정을 처음 시작할 때 매우 유용할 두 가지가 있습니다. 그러나 먼저 Vanilla Javascript에서 이러한 이벤트 리스너가 무엇인지 설명하겠습니다.

기본 사항

이벤트 리스너는 사용자가 버튼을 클릭하거나 양식 내에서 정보를 제출할 때와 같이 이벤트가 발생하고 작업을 수행하려는 경우에 사용됩니다. 기본적으로 이러한 이벤트가 트리거되면 상호 작용의 결과에 영향을 미치는 흥미로운 변경이 가능합니다. 이것은 코딩할 때 가장 흥미로운 것 중 하나라고 생각합니다. 매일 클릭하는 횟수이며 창 크기를 조정하거나 웹 페이지를 아래로 스크롤하거나 이미지, 텍스트 또는 링크 위로 마우스를 가져갈 때 사용합니다. 사용자 상호 작용을 향상시키는 코드를 생성할 가능성은 무궁무진합니다. 이 특별한 경우에는 Javascript DOM 이벤트 리스너, 특히 클릭 및 제출 이벤트에 중점을 둘 것입니다. 이 두 리스너를 결합하면 코딩 첫 며칠 동안 정말 역동적인 페이지를 생성할 수 있으며 실제로 작동할 때 즉각적인 만족감을 줄 수 있습니다.

클릭 이벤트 구문

클릭 이벤트를 사용할 때 이벤트 리스너를 추가하려면 먼저 요소를 생성하거나 가져와야 합니다. 이것은 클릭 이벤트이므로 함수와 함께 매개변수 내에서 이벤트를 명시하려고 합니다. 예를 들면 다음과 같습니다.
element.addEventListener('click', function ());
이 함수를 익명으로 유지하거나 매개 변수 내에 콜백 함수를 포함하여 특정 이벤트 리스너에 대해 별도의 함수를 만들고 해당 특정 이벤트에 대해 발생하려는 모든 일을 선언할 수 있습니다. 하지만 지금은 올바른 요소를 대상으로 지정했는지 확인하기 위해 해당 클릭을 콘솔 로그에 기록해 봅시다!

element.addEventListener('click', () => {
    console.log('Hello New World!');
}

//=> 'Hello New World!'

버튼, 이미지, h1 제목 태그 등 특정 요소를 클릭하면 해당 요소를 클릭한 횟수만큼 콘솔에 "Hello New World"가 표시되어야 합니다. 멋지죠?

클릭 이벤트를 테스트하는 또 다른 재미있는 방법은 콘솔 로그 대신 경고를 사용하는 것입니다. 이렇게 하면 클릭 시 표시하려는 텍스트에 대한 팝업 경고가 생성됩니다. 이는 특정 사용자 상호 작용에 대한 경고를 생성하려는 경우 매우 유용할 수 있지만 클릭 이벤트를 테스트할 때 약간의 흥미를 유발할 수도 있습니다.

element.addEventListener('click', () => {
    alert("Well, hello world!"); 
}

이벤트 구문 제출

이제 제출 이벤트는 약간 다릅니다. HTML의 형식이 잘 지정되어 있으면 양식과 함께 표시되는 버튼이 아닌 전체 양식을 가져오는 것이 좋습니다. 제출 이벤트는 클릭 이벤트가 아닌 양식 내에서 입력 제출을 수신합니다. 예를 들면 다음과 같습니다.
element.addEventListener('submit', function())
물론 콘솔 로그, 콘솔 로그, 콘솔 로그! 그러나 이 콘솔 로그는 제출 이벤트에 대한 클릭 이벤트를 수신하지 않기 때문에 조금 다릅니다. 여기서 'e'는 이벤트를 의미합니다.

element.addEventListener('submit', (e) => {
    console.log(e.target.value ) 
}

잠깐만요... 무언가를 제출하려고 했을 때 아무 일도 일어나지 않았습니다! 제출할 때 페이지가 자동으로 새로 고쳐지므로 기본적으로 입력 내용이 지워지고 첫 번째 제출 클릭 후에는 페이지를 볼 수 없습니다. 이를 방지하기 위해 이벤트에 .preventDefault()를 포함합니다. 이렇게:

element.addEventListener('submit', (e) => {
    e.preventDefault() 
        console.log(e.target.value ) 
}

e.target.value 기본적으로 이벤트에서 입력 제출 상자 내의 값과 나에게 다시 콘솔 로그를 대상으로 지정하는 것을 의미합니다. 콘솔 로그의 입력에 입력한 내용이 표시되어야 합니다.

그리고 거기 당신은 그것을 가지고 있습니다! 이제 밖으로 나가 이 재미있는 이벤트 리스너와 놀아보세요!

자원:

JavaScript DOM EventListener