[javascript] form 관련 이벤트 this / currentTarget / target / srcElement

[javascript] form 관련 이벤트 this / currentTarget / target / srcElement

---

✔️ form 관련 이벤트 this

: form 요소에 이벤트 핸들러에서 this.form 는 현재 객체의 부모 form 을 나타낸다.

<form name="myForm">
	<p> 이름 : <input type="text" name="name"></p>
	<p> 국어 : <input type="text" name="kor"></p>
	<p> 영어 : <input type="text" name="eng"></p>
	<p> 수학 : <input type="text" name="mat"></p>
	<p> <button type="button" onclick="send(this.form);">확인</button>
</form>

💡 send(this.form)
: 부모가 되는 폼을 나타낸다.

 

function send(f) {
	let s;
	
	
	const inputELS = document.querySelectorAll("form input[type=text]");
	for(let obj of inputELS){
		if(! obj.value){
			obj.focus();
			return;
		}
	}
	
	
	s = f.name.value + ", ";
	s += f.kor.value + ", ";
	s += f.eng.value + ", ";
	s += f.mat.value;
	
	alert(s);
}

💡1) inputELS 는 querySelectorAll 로, form 에서 input 타입이 text 인 것을 받아낸다.
2) 이를 for ~ of  문으로 돌려서 obj 에 저장하고, 만약 value 값이 false 인 경우 return 했다.

 

 

✔️ currentTarget /  target / srcElement

: currentTarget (이벤트를 발생시킨 객체) / target (이벤트를 발생시킨 객체. 표준은 currentTarget과 target) / srcElement (이벤트를 발생시킨 객체)

: 모두 이벤트를 발생시킨 객체를 가리킨다.

 

function fun(e) {
	console.log(e);
	console.log(e.currentTarget);
	
	//이벤트를 발생시킨 객체
	let obj = e.currentTarget;
	
	//이벤트를 발생시킨 객체의 태그명
	let t = obj.tagName;
	
	//이벤트를 발생시킨 객체의 id 알아내기
	let i = obj.id;
	
	//이벤트를 발생시킨 객체의 innerText 
	let s = obj.innerText;
	
	let result = "이벤트 발생시킨 태그 : " + t + "<br>";
	result += "아이디 : " + i + "<br>";
	result += "텍스트 : " + s + "<br>";
	
	document.getElementById("resultLayout").innerHTML = result;
	

}

- tagName : 이벤트를 발생시킨 객체의 태그명
- id : 이벤트를 발생시킨 객체의 ID
- innerText : 이벤트를 발생시킨 객체의 innerText