20'C 흐림
서울 강남구
일반이벤트나 리스너이벤트나 원리는 동일합니다.
보통 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>