웹페이지에서 클릭이벤트는 어떤 동작을 하도록 하는 것이다. 사용자가 마우스를 이용해 어떤 것을 클릭했을 때 동작이 발생한다. 버튼을 클릭하거나 입력란을 클릭하거나 데이터를 조회하거나 등 사용자의 어떤 반응에 의해 일어난다.
자바스크립트 마우스 클릭 이벤트 만들기
javascript onclick event
클릭이벤트는 마우스와 연관이 있다.
보통 사용자가 버튼을 클릭했을 경우에 발생한다.
페이지를 옮겨가거나 데이터를 새로 불러오거나 내용을 입력할 때 등 클릭이벤트는 자주 사용된다.
클릭이벤트 Click Event
자바스크립트의 클릭이벤트는 html의 태그와 함께 사용한다.
onclick="메서드명" 의 형식을 따라간다.
웹페이지의 어떤 태그에 onclick 이 있다면 이 태그를 클릭했을 경우 자바스크립트는 어떤 동작을 하게 될 것이다.
보통 메세지창이나 글내용을 저장하거나 페이지를 이동할 때 자주 사용된다.
클릭이벤트 만들기
클릭이벤트를 만드는 것은 어렵지 않다.
html 태그에 어떤 동작을 일어나게 하고 싶다면 그 태그에 onclick="메서드명" 의 형태로 작성을 해 주고, 메서드를 만들어 주면 된다.
아래는 이전 내용에 있던 코드를 발췌한 것이다.
여기서 봐야 할 곳은 onclick 부분과 onclick에 작성한 메서드명이다.
onclick 는 어떤 태그에 들어가도 상관이 없다.
다만, 어떤 태그에 어떤 동작을 할지의 목적이 중요하다.
<!DOCTYPE html>
<html>
<body>
<h1>자바스크립트 클릭이벤트 onClick</h1>
<p id="display">
<input type="text" placeholder="클릭해 보세요" onclick="return fnEvtClick();"/>
</p>
<script>
function fnEvtClick(){
alert("클릭 이벤트 발생");
}
</script>
</body>
</html>샘플코드
위의 코드에 버튼을 하나 추가하여 마우스 클릭이벤트를 발생시켜 보도록 한다.
버튼이나 입력텍스트란이나 어렵지 않은 부분이다.
<!DOCTYPE html>
<html>
<body>
<h1>자바스크립트 클릭이벤트 onClick</h1>
<p>
<input id="txt" type="text" placeholder="클릭해 보세요" onclick="return fnEvtClkTxt();"/>
</p>
<p>
<input type="button" onclick="return fnEvtClkBtn();" value="클릭"/>
</p>
<script>
function fnEvtClkTxt(){
alert("클릭 이벤트 발생");
}
function fnEvtClkBtn(){
alert(document.getElementById('txt').value);
}
</script>
</body>
</html>입력란과 버튼에 각각 onclick 이벤트를 작성해 주었다.
각 onclick 이벤트에 해당하는 메서드까지 작성해 주었다.
결과화면을 보자.
입력란을 클릭했을 때 메세지창이 나타나는 것을 확인할 수 있다.
클릭 버튼을 클릭했을 때 또한 메세지가 나타나는 것을 알 수 있다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 마우스오버 이벤트 사용 javascript onmouseover event (0) | 2021.10.30 |
|---|---|
| 자바스크립트 체인지 이벤트 사용하기 javascript onchange event (0) | 2021.10.30 |
| 자바스크립트 이벤트 종류 마우스 또는 키보드를 클릭하면 동작을 하는 것 (0) | 2021.10.28 |
| 자바스크립트 객체 구성 요소 프로퍼티 메서드 javascript object property method (0) | 2021.10.27 |
| 자바스크립트 객체 란 의미와 종류 javascript object (0) | 2021.10.27 |
댓글