JavaScript 트리거 이벤트
JavaScript에서는 initEvent()라는 기본 메서드를 사용하여 새 이벤트를 생성했습니다. 최신 업데이트는 맞춤 이벤트 구축을 위한 new 키워드를 추가했습니다. 또한 JavaScript용으로 구축된 인벤토리에는 다사다난한 이벤트 컬렉션이 있습니다.
다음 섹션에서는 사전 정의된 이벤트 중 하나의 예와 이벤트가 트리거되는 방법을 미리 봅니다. 또한 작업 메커니즘으로 세부 사항을 포함하는 맞춤형 이벤트도 있습니다. 자, 뛰어들자!
JavaScript에서 미리 정의된 이벤트 트리거
여기서는 값 입력을 위해 input 텍스트 상자를 선택하고 나중에 onclick 속성을 사용하여 addEventListener() 메서드와 동일하도록 합니다.
따라서 input 필드의 인스턴스를 가져와서 조건부 블록을 통해 설정합니다. 그런 다음 click 이벤트가 트리거될 때마다 input을 가져와 그에 따라 일치시킵니다.
따라서 이벤트 기능이 시작됩니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<title>Trigger event</title>
</head>
<body>
<input type="text" id="vals">
<button onclick="abc()">Submit</button>
<script>
function abc(){
var x = document.getElementById("vals").value;
if(x ==='1'){
console.log("1")}
else{
console.log("No!")
}
}
</script>
</body>
</html>
출력:
JavaScript에서 사용자 정의 이벤트 및 트리거 생성
이 인스턴스를 시연하기 위해 거품 이벤트 전파에서 부모-자식 트리를 사용할 것입니다. 기본 작업은 form 및 textarea 요소를 생성하는 것입니다. 여기서 form은 부모입니다.
다음으로 new CustomEvent()를 사용하여 이벤트를 생성합니다. 우리 이벤트의 이름은 cool이고 거품의 개체를 true로 사용하며 세부 정보는 textarea의 값이 됩니다.
나중에 form에는 cool 이벤트가 실행될 때 콘텐츠에서 작동한다고 말하는 eventListener가 있습니다. 그리고 마지막으로 dispatchEvent()로 이벤트를 시작합니다. 이것은 textarea에 대한 eventListener입니다.
코드와 출력을 미리 보겠습니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<title>Trigger event</title>
</head>
<body>
<form>
<textarea></textarea>
</form>
<script>
const form = document.querySelector('form');
const textarea = document.querySelector('textarea');
const event = new CustomEvent('cool', {
bubbles: true,
detail: { text: () => textarea.value }
});
form.addEventListener('cool', (e) => console.log(e.detail.text()));
textarea.addEventListener('input', (e) => e.target.dispatchEvent(event));
</script>
</body>
</html>
출력:
사용자 지정 이벤트에 따르면 textarea 입력 값을 인쇄해야 했습니다. 그런 다음 마지막으로 콘솔에 출력이 실행되었음을 보여줍니다.
