JS | Javascript에서 이벤트 등록하기, jQuery에서 이벤트 등록하기

 

 

 

 

Javascript에서 이벤트 등록하기

예시 HTML이 있다고 하자

1. inline event model 방식

이렇게 HTML태그에 onclick을 걸고 곧바로 함수를 연결하는 방식이다.

<a href ="javascript:void(0)" onclick="plus(this)">

 

1. property listener 방식

해당 요소에 접근하여 onclick프로퍼티에 함수를 직접 대입하는 방식이다. 

a.onclick = function(e) {console.log(1);};

 

2. addEventListener 방식

addEventListener메소드를 사용해 요소에 이벤트를 등록한다. 첫번째 인자는 이벤트종류, 두번째인자는 이벤트가 발생될 때 실행되는 함수를 넣는다.

var button = document.getElementyById("button");
button.addEventListener('click', function(event) { 
	console.log(1);
})

 

 

jQuery로 이벤트 등록하기

//한 개의 이벤트 등록 시
$("button").click(function(){
	alert("click!");
});

//여러 개의 이벤트 등록시
$("button").on('click mouseout', function(){
	alert("click mouseout!");
});

on메소드를 사용하면 여러개의 이벤트를 등록할 수 있다. 

 

1. indexOf('str') !== -1

2. nextAll();

$("#" + inCallAlert).nextAll().each(function() {
   let incalltop = $(this).offset().top;      
   $(this).offset({'top': '50' }, 300);      
 });

3. axio로 인자 넘기기