일반이벤트나 리스너이벤트나 원리는 동일합니다.

보통 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>