[JavaScript] img 태그에 click 이벤트

img태그에 click 이벤트 걸기

---

1. 처음 시도 했던 방법

• img 태그 내에 onclick 이벤트를 사용함

<img id="kakaoLogin" src="이미지 경로" onclick="javascript:kakaoLogin();" style="cursor:pointer;">

 

그러나 웹표준의 기본정의 상, 스크립트와 스타일은 html태그에서 분리를 하는 것이라는 것을 알게 됨

그래서 img 태그 내에 javascript: 를 붙이는 건 웹표준에 어긋 난다고 볼 수 있다. (a 태그도 마찬가지)

 

2. 때문에 시도하게 된 방법

$(function(){
	$("#kakaoLogin").click(function(){
		//사용하고자 하는 함수
		fn_kakaoLogin('Kakao');
		
	});
});	

function fn_kakaoLogin(type){
	alert("loginType : " + type);
}


<img id="kakaoLogin" src="이미지 경로" style="cursor:pointer;">

 

위에서 만든 함수를 실행했을 때 아래와 같은 알림창을 볼 수 있음