20211104 이벤트 실행 대상의 인덱스 구하기, 이벤트의 콜백 데이타

이벤트 실행 대상의 인덱스 구하기

<ul id="btnGroup">
		<li><button type="button" class ="delBtn">제거</button></li>
		<li><button type="button" class ="delBtn">제거</button></li>
		<li><button type="button" class ="delBtn">제거</button></li>
	</ul>
	----------------------------------------------------------
	<ul id="textGroup">
		<li>컨텐츠 1</li>
		<li>컨텐츠 2</li>
		<li>컨텐츠 3</li>
	</ul>

 

1) 클로저 : 주변환경을 기억하고 있다.(함수내부에 있는 지역 변수값들 기억)

function actionTime(index){
		var sum = index + 1000;
		setTimeout(function(){
			console.log(index, sum, 'setTimeout');
		},1000);
	};
		
	for(var i=0; i<10; i++){
	/* 	(function(index){
			setTimeout(function(){
				console.log(i, 'setTimeout');
			},1000);
		})(i) */
        
		actionTime(i);
	}

내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저라고 한다.

 7행에서 함수 outter를 호출하고 있다. 그 결과가 변수 inner에 담긴다. 그 결과는 이름이 없는 함수다.

실행이 8행으로 넘어오면 outter 함수는 실행이 끝났기 때문에 이 함수의 지역변수는 소멸되는 것이 자연스럽다.

 하지만 8행에서 함수 inner를 실행했을 때 coding everybody가 출력된 것은 외부함수의 지역변수 title이 소멸되지 않았다는 것을 의미한다.

 클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.

(출처 : https://opentutorials.org/course/743/6544 )

 

i 값을 변수 index에 받고 actionTime 함수를 실행한다.

 

2)

var delBtnArray = document.querySelectorAll('.delBtn');
	var liArray = document.querySelectorAll('#textGroup li');
	for(var i=0; i<delBtnArray.length; i++){
		//for문이 실행 되고 -> 클릭 이벤트 발동이므로 i 의 최종적인 값만 가져온다.
		/* delBtnArray[i].addEventListener('click', function(){
			console.log(i);
		}) */
		
		(function(index, btn, liObj){
			btn.addEventListener('click', function(){
				console.log(index);
				this.parentElement.remove();
				liObj.remove();
		})(i, delBtnArray[i], liArray[i]);
	}

 

1) for문이 실행 되고 -> 클릭 이벤트 발동이므로 i 의 최종적인 값만 가져온다. 결과 : 3

for(var i=0; i<delBtnArray.length; i++){
		//for문이 실행 되고 -> 클릭 이벤트 발동이므로 i 의 최종적인 값만 가져온다.
		 delBtnArray[i].addEventListener('click', function(){
			console.log(i);
		})

 

2) 

 

 

---

이벤트의 콜백 데이타

- 이벤트 동작시 해당 이벤트 동작에 관련된 데이터가 관련된 데이터를 콜백 데이터로 받을 수 있다.

<button type="button" id="myClick">클릭</button>
<div id="myText" style="position:absolute; top:150px; ">한국스마트정보교육원</div>

	var myClick = document.querySelector('#myClick');
		myClick.addEventListener('click', function(e){
			console.log(e);
		});
		
		var myBody = document.querySelector('body');
		var myText = document.querySelector('#myText');
		myBody.addEventListener('mousemove', function(e){
			console.log(e);
			var x = e.clientX;
			var y = e.clientY;
			myText.style.left =x +'px';
			myText.style.top =y +'px';
			
		});

<- e

 

mousemove : 사용자가 해당 element에서 마우스를 움직였을 때 발생.

 

clientX, Y : 마우스의 X, Y 좌표값

myText.style.left =x +'px';

 : myText의 x좌표값을 마우스 포인터의 x좌표값으로 설정.