[JAVASCRIPT] 클릭이벤트 강제 발생 (자바스크립트)(trigger())

코딩하다가 버튼한개만 클릭해서 두개를 클릭하는 이벤트가 필요했다.

 

그래서 찾아본 클릭이벤트 강제 발생시키기

 

1. trigger() 함수 이용!

developer.mozilla.org/ko/docs/Web/Guide/Events/Creating_and_triggering_events

이벤트 생성 및 트리거 - 웹 개발자 안내서 | MDN

간단한 사용설명서

// jQuery 기준 간단한 사용설명서 // Javascript 기준은.. 위 사이트를 확인해봅시다.
$(객체이름).trigger(이벤트);

// id calf를 가진 객체를 click 한다.
$("#calf").trigger('click'); 

// classname .header-filter .select-box-id 을 가진 select 객체의 value를 2로 바꾼다.
 $('.header-filter .select-box-id select').val('2').trigger('change'); 

 

 

 

2. 이벤트 직접적으로 실행.

 

2-1. 클릭하고자 하는 객체(Element) 에게 Id를 부여해준다. (className 등은 안된다.)

2-2. document.getElementById 를 사용하여 객체를 찾아준 후 click 이벤트를 준다.

 

ex) html javascript (소스를 직접 해보지 않았다. 참고용)

{/* 크롬 개발자 모드에서 해볼때는 [0] 을 안찾아도 됬었다. 안된다면 [0] 을 없애고 해보자.*/}
<javascript>
	document.getElementById("my-btn")[0].click();
</javascript>

<button id="my-btn" onclick="alert('클릭이벤트 발생')";>버튼</button>

ex) react typescript

{/* 객체에서 [0] 이 빠졌다. */}
<button 
	onClick={() => {
    	document.getElementById("my-btn1")!!.click();
        document.getElementById("my-btn2")!!.click();
    }}
>강제버튼</button>

<button id="my-btn1" onclick="alert('클릭이벤트1 발생')";>버튼1</button>
<button id="my-btn2" onclick="alert('클릭이벤트2 발생')";>버튼2</button>

 

#TODO 결론 안됨

typescript 라서 그런지 모르겠지만 className으로 조회를 할때는 click이 없다고 떴다.

나중에 javascript 할때는 className으로 한번에 클릭이 되는지 실험해보자!

 

 

 

 

 

참고자료

https://6developer.com/6

[Javascript/Jquery] 클릭이벤트 강제 발생 (자바스크립트 or 제이쿼리)

24hours-beginner.tistory.com/104

trigger()