[DOM_Event] JS - click 이벤트 (= onclick속성 = 온클릭이벤트) ★ - 마우스클릭이벤트

목차

1. click 예제 - HTML onclick 속성 이용 방식
2. click 정의
3. click 구문
4. click 예제 - JS onclick 속성 이용 방식
5. click 예제 - JS addEventListener() 메서드 이용 방식
6. click 예제 - 클릭할 때마다 값 변경
7. click 예제 - 클릭 시, 이미지 토글
8. click 예제 - 현재 클릭한 이미지만 활성화 토글
9. click 예제 - 클릭한 해당 요소의 value값 확인

click 예제 - HTML onclick 속성 이용 방식

 

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";

}

</script>

 

결과보기

click 정의

 

사용자가 요소를 클릭하면 실행.

 

click 구문

 

HTML 방식

<element onclick="myScript">

 

JS 방식 (2가지) 

object.onclick = function(){myScript};

object.addEventListener("click", myScript);

 

PS1. addEventListener() 메서드는 IE9 이상 지원.

PS2. onClick처럼, 낙타문자 형식으로 적으로 안 됨.

click 예제 - JS onclick 속성 이용 방식

 

<p id="demo">클릭</p>

<script>

document.getElementById("demo").onclick = function() {homzzang()};

function homzzang() {

  document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";

}

</script>

 

결과보기

PS. 파란색 부분을 아래처럼 적어도 정상 작동. 결과보기

document.getElementById("demo").onclick = homzzang;

click 예제 - JS addEventListener() 메서드 이용 방식

[방법1] 일반함수 이용

 

<p id="demo">클릭</p>

<script>

document.getElementById("demo").addEventListener('click', homzzang);

function homzzang() {

  document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";

}

</script>

 

결과보기

---

[방법2] 익명함수 이용

 

<p id="demo">클릭</p>

<script>

document.getElementById("demo").addEventListener('click', function () {

  document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";

});

</script>

 

결과보기

click 예제 - 클릭할 때마다 값 변경

 

<span id="hz">A</span><br>

<input type="button" value="클릭" onClick="change()">

 

<script>

function change() {

    var hz = document.getElementById('hz');

    if (hz.innerText == "A") {

        hz.innerText = "B";      

    } else if (hz.innerText == "B") {

        hz.innerText = "C";   

    } else {

        hz.innerText = "A";

    }

}

</script>

 

결과보기

※ 1번 클릭하면 if문 실행, 한번 더 클릭하면 else if문 실행, 한번 더 실행하면 원래값으로 복귀.

관련글 https://sir.kr/qa/361250

click 예제 - 클릭 시, 이미지 토글

 

<script>

function toggleImage() {

   var a = "https://i.imgur.com/PQNhCln.gif";

   var b = "https://i.imgur.com/YrkG5xB.gif";   

   var hz = document.getElementById('hz');

   hz.src = (hz.src === a)? b : a;

}

</script>

<img src="https://i.imgur.com/PQNhCln.gif" id="hz" onclick="toggleImage();"/>

 

결과보기 

click 예제 - 현재 클릭한 이미지만 활성화 토글

 

<img id="A" src="A 주소" srcOn="A on 주소" srcOff="A off 주소" onclick='swapImage( this );'>

<img id="B" src="A 주소" srcOn="B on 주소" srcOff="B off 주소" onclick='swapImage( this );'>

<img id="C" src="C 주소" srcOn="C on 주소" srcOff="C off 주소" onclick='swapImage( this );'>

 

<script>

var other = null;

function swapImage(this) {

    if( other && other != this ) {

        other.setAttribute("src", other.getAttribute("srcOff"));

    }

    this.setAttribute("src", this.getAttribute("srcOn"));

    other = this;

}

</script>

 

코드보기

https://stackoverflow.com/questions/45899126

click 예제 - 클릭한 해당 요소의 value값 확인

 

<button type="text" value="홈짱닷컴" onclick='checkvalue(this)'>버튼값 확인</button>

 

<script>

function checkvalue(my) {

    alert(my.value);

}

</script>

 

결과보기