JavaScript - on click 이벤트 함수

목표

.on('click',function(){}) 함수에 대해 알아보자.

 

함수

.on('click',function(){발생시킬 이벤트 함수 작성})

이 함수는 .bind() 함수를 사용하지 않아도 this 값을 쉽게 잡아줄 수 있어 사용하기 편한 함수입니다.

.on('타입',function(){}) 함수의 '타입' 에는 click 이 아닌 다른 이벤트도 들어갈 수 있습니다.

그건 나중에 따로 다루도록 하겠습니다.

 

학습

1. HTML 

우리는 스크립트만 다루면 되기 때문에 최소한의 마크업을 해주었습니다.

<div>
	<button>이 버튼을 클릭 해 보세요.</button>
</div>

 

2. JavaScript

이 함수를 입력하고 버튼을 클릭하면 개발자 모드(F12) 로 접속하여 콘솔창에 '클릭 되었어요' 라는 문구가 뜹니다.

$(function(){
  console.log('연결 성공!')

  $('button').on('click',function(){
  //클릭했을때 발생시킬 이벤트를 작성하는 곳이예요.
  console.log('클릭 되었어요.')             
  })//click 함수 끝
})

 

3. 콘솔창

응용

버튼을 누르면 h2 태그가 prependTo 함수에 의하여 생성되는 작업을 해보았습니다.

$('button').on('click',function(){
    //클릭했을때 발생시킬 이벤트를 작성하는 곳이예요.
    console.log('클릭 되었어요.')

    //클릭했을 때 텍스트 추가하기.
    $('<h2>h2 태그가 생성되었어요.</h2>').prependTo('div')
})

결과

---

혹시나 되지 않거나 궁금한 점이 있다면 언제든지 댓글 남겨주세요.