[jQuery, JavaScript]클릭이벤트 정리(addEventListener,querySelector)

 

 

jQuery

 

<div class="btn_plus" id="btn_plus">Click</div>
<div onClick="플러스함수()">Click</div>

1. id 값으로 

$('#btn_plus').on('click',() => {
    // 원하는 코드
})

2. class 값으로

$('.btn_plus').on('click',() => {
	// 원하는 코드
})

 

3. onClick 메소드 사용

let 플러스함수 = () => {
	// 원하는 코드
}

 

 

---

 

바닐라 JS

 

 

<div class="btn_plus" id="btn_plus">Click</div>
<div onClick="플러스함수()">Click</div>

1. id 값으로 

document.getElementById("btn_plus").addEventListener('click', () => {
	// 원하는 코드
});

 

2. class 값으로

let className = document.getElementsByClassName("btn_plus");

// for 문으로
for (leti = 0; i < className.length; i++) {
    className[i].addEventListener('click', () => {
    	// 원하는 코드
    });
}

// forEach 로
className.forEach((element) =>{
    element.addEventListener('click', () =>{
        // 원하는 코드
	});
});

3. onClick 메소드 사용

let 플러스함수 = () => {
	// 원하는 코드
}

 

4. querySelector 사용

let click = document.querySelector(".btn_plus");
click.onclick = function() {
	// 원하는 코드
}