Javascript:클릭 이벤트: 두 판 사이의 차이

학교의 모든 지식. SMwiki
둘러보기로 이동 검색으로 이동
(새 문서: {{Javascript}} = 클릭 이벤트 발생시키기 = 크게 다음의 2가지 방법을 사용한다. {| class="wikitable" |+ !방법 !'''HTML 태그에 onclick 속성 부여''' !엘...)
 
 
1번째 줄: 1번째 줄:
{{Javascript}}
{{Javascript}}


= 클릭 이벤트 발생시키기 =
=클릭 이벤트 발생시키기=
크게 다음의 2가지 방법을 사용한다.
크게 다음의 2가지 방법을 사용한다.
{| class="wikitable"
{| class="wikitable"
10번째 줄: 10번째 줄:
|-
|-
|html
|html
|<syntaxhighlight lang="html">
|<syntaxhighlight lang="html+evoque">
<div onclick="함수명">클릭하세요</div>
<div onclick="함수명()">클릭하세요</div>
</syntaxhighlight>onclick 안에 자바스크립트 함수명을 부여한다.
</syntaxhighlight>onclick 안에 자바스크립트 함수명을 부여한다.
|<syntaxhighlight lang="html">
|<syntaxhighlight lang="html">

2022년 8월 2일 (화) 15:44 기준 최신판

틀:Javascript

  1. Javascript:개요
  2. Javascript:변수, 상수
    1. Javascript:자료구조
  3. Javascript:연산자
  4. 분기문
    1. Javascript:조건문
    2. Javascript:반복문
  5. Javascript:선택자
    1. Javascript:요소 내용 변경
    2. Javascript:HTML로부터 데이터 받기
  6. Javascript:이벤트
    1. Javascript:클릭 이벤트
  7. Javascript:AJAX
    1. AJAX 활용
      1. Javascript:댓글달기
      2. Javascript:무한 스크롤링
  8. Javascript:활용
    1. Javascript:표 정렬

클릭 이벤트 발생시키기[편집 | 원본 편집]

크게 다음의 2가지 방법을 사용한다.

방법 HTML 태그에 onclick 속성 부여 엘리먼트를 직접 잡아 헨들링
html
<div onclick="함수명()">클릭하세요</div>
onclick 안에 자바스크립트 함수명을 부여한다.
<div id='click_ob'>클릭하세요</div>
Javascript
<script>
    function 함수명(인수) {
        console.log('클릭 함수 소환성공~');
    };
</script>
<script>
    $('#click_ob').click(function() {
        console.log('클릭 함수 소환성공~');
    };
</script>