59. (javascript/자바스크립트) 객체 특정 좌표 확인 및 강제 클릭 이벤트 수행 - createEvent , elementFromPoint

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <script>
    	/* 
    	[요약 설명]
    	1. window.onload : html의 로딩이 끝난 후에 시작합니다 (이미지, 영상 등 모두 로드 완료 후 실행됨)    	
    	2. document.getElementById.onclick : 특정 객체에 클릭 이벤트 등록을 실시합니다
    	3. window.pageXOffset + adtarget.getBoundingClientRect().left : 특정 객체 절대 좌표값 확인 실시
    	4. document.createEvent : 특정 객체에 커스텀 이벤트를 생성합니다 (Internet Explorer 지원 안함)
    	5. document.elementFromPoint : 해당 좌표에 있는 객체를 반환해줍니다
    	6. dispatchEvent : 이벤트를 실행 해 등록된 객체에 클릭 이벤트가 발생하게합니다
    	*/
    	
    	
    	/* html 최초 로드 및 이벤트 상시 대기 실시 */
    	window.onload = function() {
    		console.log("[window onload] : [start]");
    		console.log("");
    		
    		// 객체 클릭 이벤트 등록 실시
    		document.getElementById("one_container").onclick = function(evt) {
    			console.log("[one_container] : [click]");
    			console.log("");
    			
    			alert("one_container 클릭");
    		};
    		
    		// 특정 객체 좌표 확인 함수 호출
    		checkLocation("one_container");    		
    	};
    	
    	
    	/* 특정 객체 좌표 확인 함수 */
    	function checkLocation(tagId){
    		console.log("[checkLocation] : [start] : " + tagId);
    		
    		// 특정 객체 절대 좌표값 확인
    		var adtarget = document.getElementById(tagId);
    		var adtargetLeft = window.pageXOffset + adtarget.getBoundingClientRect().left;
    		var adtargetTop = window.pageYOffset + adtarget.getBoundingClientRect().top;
    		console.log("[Left] : " + adtargetLeft);
    		console.log("[Top] : " + adtargetTop);
    		console.log("");
    		
    		// 강제 클릭 이벤트 수행 함수 호출
    		dropClick(adtargetLeft, adtargetTop);
    	};
    	
    	
    	/* 특정 좌표에 위치한 객체 강제로 클릭 이벤트 발생 수행 */
    	function dropClick(x, y){
    		console.log("[dropClick] : [start]");
    		console.log("[X 좌표] : " + x);
    		console.log("[Y 좌표] : " + y);
    		console.log("");
    		
    		var evt = document.createEvent("MouseEvents");
    		evt.initMouseEvent("click", true, true, window, 0,0,0,0,0, false, false, false, 0, null);
    		var cb = document.elementFromPoint(x, y);
    		cb.dispatchEvent(evt);
    	};	    	
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[요약 설명]

1. window.onload : html의 로딩이 끝난 후에 시작합니다 (이미지, 영상 등 모두 로드 완료 후 실행됨)

2. document.getElementById.onclick : 특정 객체에 클릭 이벤트 등록을 실시합니다

3. window.pageXOffset + adtarget.getBoundingClientRect().left : 특정 객체 절대 좌표값 확인 실시

4. document.createEvent : 특정 객체에 커스텀 이벤트를 생성합니다 (Internet Explorer 지원 안함)

5. document.elementFromPoint : 해당 좌표에 있는 객체를 반환해줍니다

6. dispatchEvent : 이벤트를 실행 해 등록된 객체에 클릭 이벤트가 발생하게합니다

*/

/* =========================== */