(50) [JavaScript] 6일 JavaScript 객체

이벤트란?
HTML 이벤트는 HTML 요소에서 발생할 수 있는 상황으로, 자바스크립트가 HTML 페이지에서 사용될때 자바 스크립트는 이런 이벤트에 반응한다.
브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시에는 통지해 준다.
이 과정을 통해 사용자와 웹페이지는 상호작용이 가능하게 된다.

이벤트 핸들러 등록

HTML 요소의 이벤트 핸들러 어트리뷰트에 이벤트 핸들러를 등록하는 방법이다. onclick 과 같이 on으로 시작하는 이벤트 어트리뷰트의 값으로 함수 호출 등을 전달한다. HTML과 Javascript는 관심사가 다르므로 분리하는 것이 좋으며, 이 방식은 권장하지 않는다.

</head>
<body>

	<h3>이벤트 등록 - 인라인 이벤트 핸들러 방식</h3>
	
	<p><button type="button" onclick="sub1();"> 확인 1 </button></p>
	<p><button type="button" onclick="sub1(); sub2();"> 확인 2 </button></p>
	
	<script type="text/javascript">
	function sub1() {
		alert('sub1...');
	}
	
	function sub2() {
		alert('sub2...');
	}
	
	</script>
	
	<script type="text/javascript">
	
	
	</script>

</body>
</html>

</head>
<body>

	<h3>이벤트 등록 - 이벤트 핸들러 프로퍼티 방식</h3>
	
	<p> <button type="button" class="btn"> 확인 </button></p>
	
	<script type="text/javascript">
	//자바스크립트가  button보다 위에 있으면 실행되지 않는다. 
	
	const btn = document.querySelector('.btn');
	
	btn.onclick = function() {
		alert('클릭 1...');
	};
	
	// 이벤트 핸들러 프로퍼티 방식은 하나의 이벤트만 등록 가능
	// 첫번째 바인딩된 이벤트는 실행되지 않는다. 
	btn.onclick = function() {
		alert('클릭 2...');
	};
	
	</script>
	
</body>
</html>

addEventListener()

EventTarget 인터페이스의 메소드로 엘레멘트에 이벤트를 등록한다. 하나의 요소에 같은 유형의 여러 이벤트 처리기를 추가 할 수 있다.

</head>
<body>

	<h3>이벤트 등록 : addEventListener</h3>

	<p>
		<button type="button" class="btn">확인</button>
	</p>

	<script type="text/javascript">
		const btn = document.querySelector('btn');
		
		
		//둘 다 실행된다. 
		
		btn.addEventListener('click',function(){
			alert('클릭 1');
		});
		
		btn.addEventListener('click',()=>{
			alert('클릭 2')
		});
	</script>

</body>
</html>

</head>
<body>

	<h3>동적 객체 이벤트 등록</h3>

	<p>
		<button type="button" onclick="append()">추가</button>
	</p>
	<hr>
	<div class="resultLayout">
		<p>
			<button type="button" class="btnOk" data-num="1">버튼</button>
		</p>
	</div>

	<script type="text/javascript">
		var idx = 1;

		function append() {
			const divEL = document.querySelector('.resultLayout');
			let out = divEL.innerHTML;

			idx++;
			out += `<p><button type="button" class="btnOk" data-num="${idx}">버튼</button></p>`;

			divEL.innerHTML = out;
			//innerHTML는 성능이 좋지 않음 
		}
		
		//동적으로 생성된 객체는 load 이벤트 단계에서 검색하지 못하므로 이벤트가 처리 되지 않는다. 
		/*
		window.addEventListener('load',()=>{
			const btnEls = document.querySelectorAll('.btnOk');
			
			for(let el of btnEls){
				el.addEventListener('click',e=>{
					let num = e.target.getAttribute('data-num');
					alert(num);
				});
			}
		});
		*/
		
		//동적으로 추가된 버튼의 이벤트를 처리하기 위해서는 상위 객체에 이벤트를 등록하고
		//	해당 객체를 검색하여 처리한다. 
		const resultEL = document.querySelector('.resultLayout');
		resultEL.addEventListener('click',e=>{
			// e.target : 이벤트가 발생한 객체 
			//matches('선택자') :요소의 선택자와 일치하면 true 
			if(e.target.matches('.btnOk')){
				let num = e.target.getAttribute('data-num');
				alert(num);
			}
		});
		
		
		
	</script>

</body>
</html>

removeEventListener()

EventTarget 인터페이스의 메소드로 엘레멘트에 등록된 이벤트를 제거한다.

</head>
<body>

	<h3>이벤트 제거</h3>

	<p>인라인 이벤트</p>
	<p>
		<button type="button" onclick="sub(this);">확인</button>
	</p>
	<script type="text/javascript">
		function sub(obj) {
			alert('한번...');

			obj.removeAttribute('onclick');
		}
	</script>
	<hr>

	<p>이벤트 핸들러 프로퍼티 방식</p>
	<p>
		<button type="button" class="btn2">확인</button>
	</p>
	<script type="text/javascript">
	const btn2 = document.querySelector('.btn2');
	
	btn2.onclick=()=>{
		alert('다시 누르지 마세요~');
		
		btn2.onclick=null;
	}
	
	</script>
	<hr>

	<p>addEventListener()/removerEventListener()</p>
	<p>
		<button type="button" class="btn3">확인</button>
		<button type="button" class="btn4">제거</button>
	</p>
	<script type="text/javascript">
	const btn3 = document.querySelector('.btn3');
	const btn4 = document.querySelector('.btn4');
	
	const fn=()=>alert('안녕...');
	
	btn3.addEventListener('click',fn); // click이벤트 등록
	

	btn4.addEventListener('click',e=>{ // click 이벤트 해제 
		btn3.removeEventListener('click',fn,false);
	});
	</script>

</body>
</html>

</head>
<body>

	<h3>이벤트를 발생 시킨 객체</h3>


	<p>
		<button type="button" onclick="sub();">확인</button>
	</p>
	<hr>
	
	<script type="text/javascript">
	function sub() {
		//event : 이벤트를 발생 시킨 객체 
		//event는 deprecated 되었으므로 사용하지 말것을 권장 
		console.log(event.currentTarget);
		console.log(event.target);
	}
	</script>

	<p>
		<button type="button" class="btn1" id="b1">자바</button>
		<button type="button" class="btn1" id="b2">스프링</button>
		<button type="button" class="btn1" id="b3">오라클</button>

	</p>
	<div id="resultLayout"></div>
	<hr>

	<script type="text/javascript">
	const btnEls= document.querySelectorAll('.btn1');
	
	const fun = e =>{
		//이벤트를 발생시킨 객체(이벤트 등록 객체)
		let obj = e.currentTarget;
		
		//이벤트가 발생된 객체의 태그 이름 
		let tag = obj.tagName;
		
		//이벤트가 발생된 객체의 id
		let i = obj.id;
		
		//이벤트가 발생된 객체의 innerText(텍스트)
		let t = obj.innerText;
		let s = '이벤트 발생객체의 태그:'+tag+'<br>';
		s+='이벤트 발생 객체의 id : '+i+'<br>';
		s+='이벤트 발생 객체의 innerText : '+t;
		
		document.querySelector('#resultLayout').innerText=s;
		
	};
	
	//모든 버튼에 click 이벤트 등록 
	btnEls.forEach(el=>el.addEventListener('click',e=>fun(e)));
	
	
	/* for(let el of btnEls){
		el.addEventListener('click',e=>fun(e));
	} */
	
	</script>

	<p>
		<button type="button" class="btn">
			<span>확인</span>
		</button>
	</p>
	<hr>
	<script type="text/javascript">
		const btn = document.querySelector('.btn');

		//이벤트 핸들러의 첫번째 매개변수 : 이벤트를 발생시킨 객체에 대한 정보를 가지고 있는 객체 
		btn.addEventListener('click', function(e) {
			//console.log(e);
			
			console.log(e.target);	// 이벤트가 발생된 객체, <span>
			console.log(e.currentTarget); // 이벤트가 등록된 객체, <button>
		}); 

	</script>

</body>
</html>

이


<style type="text/css">
.box1 {
	background: #ccc;
	padding: 20px;
	display: block;
}

.box2 {
	background: #ccc;
	padding: 20px;
	display: block;
}

.box3 {
	background: #ccc;
	padding: 20px;
	display: block;
}
</style>

</head>
<body>

	<h3>이벤트 취소 - preventDefault</h3>

	<!-- 
	
		- a href 속성 : a 태그를 클릭할 경우 해당 페이지로 이동
		- a 태그에 click 이벤트도 존재하는 경우 : 먼저 click 이벤트를 처리하고 href 속성으로 이동
		- preventDefault() : 이벤트를 취소할수 있는 경우 이벤트를 취소하지만 상위로의 이벤트는 전파된다. 
	
	 -->



	<div class="box1">
		DIV 영역
		<p class="box2">
			p 영역 <a class="box3" href="https://m.naver.com/" target="_blank">A
				영역</a>
		</p>
	</div>
	<hr>
	<div class="console"></div>

	<script type="text/javascript">
		const box1 = document.querySelector('.box1');
		const box2 = document.querySelector('.box2');
		const box3 = document.querySelector('.box3');

		const console = document.querySelector('.console');

		box1.addEventListener('click', function(e) {
			console.innerHTML += 'DIV클릭<br>';
		});

		box2.addEventListener('click', function(e) {
			console.innerHTML += 'P 클릭<br>';
		});

		box3.addEventListener('click', function(e) {
			console.innerHTML += 'A 클릭<br>';

			//이벤트 기본 동작이 중지된다. 
			//href 속성이 무효화 된다. 
			//상위로의 이벤트는 전파된다. 
			e.preventDefault();
			
			
			//e.stopPropagation();
				//stopPropagation()는 href는 무효화 되지 않는다.
				//상위로의 이벤트는 전파되지 않는다.
				//href는 살아있고, p, div 클릭은 무효화 된다. 
				
			
		});
	</script>


</body>
</html>


</head>
<body>

	<h3>이벤트 취소 - stopPropagation</h3>

	<!-- 
	- span 클릭 
	: 기본적으로 이벤트는 하위에서 상위로 전파
	: span의 click 핸들러 실행 - p click 이벤트 핸들러 실행 - div click 이벤트 핸들러 실행
	- stopPropagation()
	: 상위로 이벤트가 전파되지 않도록 중단  
 -->


	<div class="box1">
		DIV 영역
		<p class="box2">
			p 영역 <span class="box3">SPAN영역</span>
		</p>
	</div>
	<hr>
	<div class="console"></div>

	<script type="text/javascript">
		const box1 = document.querySelector('.box1');
		const box2 = document.querySelector('.box2');
		const box3 = document.querySelector('.box3');

		const console = document.querySelector('.console');

		box1.addEventListener('click', function(e) {
			console.innerHTML += 'DIV클릭<br>';
		});

		box2.addEventListener('click', function(e) {
			console.innerHTML += 'P 클릭<br>';
		});

		box3.addEventListener('click', function(e) {
			console.innerHTML += 'SPAN 클릭<br>';

			e.stopPropagation();
            
		});
	</script>

</body>
</html>

'💻 > Javascript' 카테고리의 다른 글

(52) [JavaScript] 8일 JavaScript Form (0)	2024.04.29
(51) [JavaScript] 7일 JavaScript 객체 - 이벤트2 (1)	2024.04.28
(50) [JavaScript] 6일 JavaScript 객체 - DOM (1)	2024.04.28
(50) [JavaScript] 6일 JavaScript 객체 - 클래스 (1)	2024.04.28
(49) [JavaScript] 5일 JavaScript 객체 - 생성, 구조분해 (1)	2024.04.28

Power Up!

(50) [JavaScript] 6일 JavaScript 객체 - 이벤트

이벤트 핸들러 등록

addEventListener()

removeEventListener()

'💻 > Javascript' 카테고리의 다른 글

티스토리툴바

(50) [JavaScript] 6일 JavaScript 객체 - 이벤트

이벤트 핸들러 등록

addEventListener()

removeEventListener()

'💻 > Javascript' 카테고리의 다른 글

관련글

티스토리툴바