[jQuery] 제이쿼리 click

jquery .click()

 

.click(function(){})은 요소를 "마우스로 클릭했을 때"를 조건으로 기능을 수행하는 매소드입니다.  

 

사용법 1 요소에 .click(function(){})을 붙인 뒤 클릭 한다

//클릭문
$(요소).click(function(){
//실행할 코드
$(요소).css('color','red');
});

사용법2 요소에 .on('click',function(){})을 붙인 뒤 클릭 한다

  //요소에 .on('click',function(){}) 붙여 사용
  $(요소).on('click',function(){
  //실행할 코드
  $(요소).css('color','bluel);
  });

사용법 3 요소의 부모에 .on('click','클릭할 요소',function(){})을 붙인 뒤 클릭 한다

  //사용법 부모에 .on('click','클릭할 요소',function(){})을 붙여 사용
  $(부모요소).on('click','클릭할 요소',function(){
  //실행할 코드
  $(this).remove();
  });

제이쿼리 없이 자바스크립트만 이용하고 싶다면

//요소 선택
var target = document.getElementsById('p');
//addEventListener를 이용하여 접근한다.
target.addEventListener('click', function(){
    alert('클릭!클릭!클릭!');
 });

HTML만 이용해서 click사용

//태그에 onclick 을 붙이고 onclick="실행할 코드 및 함수"를 불러온다
<button onclick="alert(클릭!)">클릭하세요</button>

 

 

.on('click')과 click()의 차이점

동적 처리, 정적 처리의 차이이다.

정적처리의 경우는 내가 가지고 있는 것들 한해서만 조건 처리가 되고

동적 처리의 경우는 같은 요소면 조건을 수행하게 된다. 

 

예로 같은 <li> 태그여도 기존 html에 있는 li(정적)와 스크립트로 생성된 li(동적)는 다르게 본다는 것이다.

 

.on('click')은 새로 요소가 추가되어도 같은 조건이라면 계속 수행하는 반면

.click()은 새로 요소가 추가가 되어도 새로 추가된 요소에는 기능을 수행하지 않는다.

 

 

정적 처리와 동적 처리가 들어 있는 클릭 코드로 TODOLIST를 만들어 보았다.

See the Pen jquery .click() // todoList by 윤재현 (@jh91) on CodePen.

 

마치며

클릭을 사용해서 원하는 요소를 컨트롤 하자