이벤트가 발생되면 이벤트에 매개변수로 넘긴 콜백함수가 호출 되는데
이때 매개변수로 event객체를 넘겨줍니다.
이 이벤트 객체의 프로퍼티는 이벤트 발생시 얻을 수 잇는 정보가 있으며, 이벤트 모델의 전파과정을 컨트롤 할 수 있는 메서드를 포함합니다.
브라우저 기본동작이 발생하지 않도록 하는 메서드도 포함합니다.
<script>
$(document).ready(function(){
$('#box').click(function(event){
var clientyx = (event.clientX); // coument에서 스크롤 이동값을 제외하고 마우스 x좌표
var clienty = (event.clientY); // coument에서 스크롤 이동값을 제외하고 마우스 y좌표
var offsetx = (event.offsetX); // 이벤트 발생시 이벤트의 대상으로 부터 마우스의 x좌표
var offsety = (event.offsetY); // 이벤트 발생시 이벤트의 대상으로 부터 마우스의 y좌표
var pagex = (event.pageX); // coument에서 스크롤 이동값을 포함한 마우스 x좌표
var pagey = (event.pageY); // coument에서 스크롤 이동값을 포함한 마우스 y좌표
var screenx = (event.screenX); // 모니터 화면을 기준으로 마우스 x 좌표값
var screeny = (event.screenY); // 모니터 화면을 기준으로 마우스 y 좌표값
console.log("clientyx" + clientyx);
console.log("clienty" + clienty);
console.log("offsetx" + offsetx);
console.log("offsety" + offsety);
console.log("pagex" + pagex);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="box">
<p>
박스 엘리먼트
</p>
</div>
</div>
</body>
