js 이벤트를 배열로 넣기 정보
js 이벤트를 배열로 넣기본문
일반이벤트나 리스너이벤트나 원리는 동일합니다.
보통 onclick 시의 이벤트는 아래처럼 사용합니다.
ID.onclick = function() {
온클릭시 일어나는 이벤트;
}
----------
이건 아래처럼 대괄호에 이벤트를 따옴표 안에 문자열로 넣고 사용할 수 있습니다.
ID["onclick"] = function() {
온클릭시 일어나는 이벤트;
}
----------
문자열 사용이 가능하므로 이벤트를 문자열로 준 배열의 사용이 가능합니다.
myEvent = ["onclick"];
ID[myEvent[0]] = function() {
온클릭시 일어나는 이벤트;
}
----------
아래는 예제입니다. id 를 my 로 준 span 의 내용을 번갈아 바꾸는 이벤트입니다.
<span id=my style=cursor:pointer>sir</span>
<script>
myEvent = ["onclick"];
my[myEvent[0]] = function() {
my.innerText = my.innerText == "sir" ? "그누보드" : "sir";
}
</script>
----------
배열을 사용했으므로 for 문으로 돌릴 수 있습니다.
예컨대 온클릭, 온마우스오버, 온마우스아웃에 동일한 이벤트를 같이 줄수가 있겠죠.
<span id=my style=cursor:pointer>sir</span>
<script>
myEvent = ["onclick", "onmouseover", "onmouseout"];
for (i = 0; i < myEvent.length; i++) {
my[myEvent[i]] = function() {
my.innerText = my.innerText == "sir" ? "그누보드" : "sir";
}
}
</script>
----------
포인문을 쓰면 더 편하겠지요.
<span id=my style=cursor:pointer>sir</span>
<script>
myEvent = ["onclick", "onmouseover", "onmouseout"];
for (i in myEvent) {
my[myEvent[i]] = function() {
my.innerText = my.innerText == "sir" ? "그누보드" : "sir";
}
}
</script>
----------
가장 쉬운 건 배열이니까 포오브문을 사용하는 것입니다.
<span id=my style=cursor:pointer>sir</span>
<script>
myEvent = ["onclick", "onmouseover", "onmouseout"];
for (i of myEvent) {
my[i] = function() {
my.innerText = my.innerText == "sir" ? "그누보드" : "sir";
}
}
</script>
3
댓글 6개
감사합니다.
공부를 열심히 할게요..
자바스크립트 초보나 독학으로 하는경우에 공부할 분량이 많고 , 무엇을 해야할 지 잘 모를때가 많습니다.
그누보드에서 유용한 자바스크립트 코드를 공개해주셔서 많이 배웁니다.
자바스크립트 관련 팁 많이 공개해주세요.^^
이게 되면 중소 홈페이지의 적당수준의 개발은 그냥 식은죽 먹기입니다. 디자인이나 퍼블리싱 때문에 더 고생을 하지요.