8. (jquery/제이쿼리) Jquery 특정 객체 다중 이벤트 등록 실시 - mouseenter , mouseleave , click

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

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : jquery

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

​

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

[소스 코드]

 

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->
    <script  src="https://code.jquery.com/jquery-latest.min.js"></script>


    <!-- 내부 JS 지정 -->
    <script>
    	/* 
    	[요약 설명]
    	1. window load : 웹 페이지 로딩 완료 상태를 확인합니다    	
    	2. mouseenter : 마우스가 객체 위로 올라온 상태를 확인합니다	
    	3. mouseleave : 마우스가 객체를 벗어난 상태를 확인합니다
    	4. click : 클릭 이벤트를 등록합니다
    	5. $(객체).on : 이벤트를 등록할 수 있습니다    	
    	*/
    	
    	/* html 최초 로드 및 이벤트 상시 대기 실시 */
    	$(window).load(function(){
    		console.log("");
    		console.log("window onload : start");
    		console.log("");
    		
    		
    		//특정 객체 이벤트 등록 실시
    		$("#one_container").on({
    			//브라우저단에서 마우스 올라간 상태 확인
    			mouseenter: function() {
    				console.log("");
    				console.log("window onload : [one_container] : [MouseEnter]");
    				console.log("");    				
    			},
    			mouseleave: function() {
    				console.log("");
    				console.log("window onload : [one_container] : [MouseLeave]");
    				console.log("");      				 
    			},
    			//클릭 이벤트 정의 실시
    			click: function() {
    				console.log("");
    				console.log("window onload : [one_container] : [Click]");
    				console.log("");    				
    			}  			
    		}); 
    		
    		
    	});
    	
    </script>

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

​

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

[결과 출력]

​

​

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

​

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

[요약 설명]

​

/*

[요약 설명]

1. window load : 웹 페이지 로딩 완료 상태를 확인합니다

2. mouseenter : 마우스가 객체 위로 올라온 상태를 확인합니다

3. mouseleave : 마우스가 객체를 벗어난 상태를 확인합니다

4. click : 클릭 이벤트를 등록합니다

5. $(객체).on : 이벤트를 등록할 수 있습니다

*/

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