[JavaScript] 11-2_MouseEvent.js

console.log("Begin 11-2");

var eventCtrl = 

{

/**********************************************************************

* 이벤트를 등록하는 메서드

* @param elem : 이벤트를 등록할 엘리먼트

* @param eventType : 등록할 이벤트의 종류

* @param handler : 이벤트 발생시 실행할 함수

**********************************************************************/

add:function (elem, eventType, handler)

{

eventType = eventType.replace('on', '');

if(elem.addEventListener)

{

elem.addEventListener(eventType, handler, false);

}

else if(elem.attachEvent)

{

eventType = 'on' + eventType;

elem.attachEvent(eventType, handler);

}

},

/**********************************************************************

* 이벤트를 삭제하는 메서드

* @param elem : 이벤트를 삭제할 엘리먼트

* @param eventType : 삭제할 이벤트의 종류

* @param handler : 이벤트 삭제시 실행할 함수

**********************************************************************/

remove: function(elem, eventType, handler)

{

eventType= eventType.replace('on', '');

if(elem.removeEventListener)

{

elem.removeEventListener(eventType, handler);

}

elseif(elem.detachEvent)

{

eventType = 'on' + eventType;

elem.detachEvent(eventType, handler);

}

}

};

eventCtrl.add(window, 'load',

function(event)

{

var STATUS_PEN = 'pen'

var board = document.getElementById('boardContainer');

var tools = document.getElementsByName('drowTool');

var status = null;

var tool = null;

eventCtrl.add(board, 'mousedown', 

function(event)

{

if(event.button ===0)

{

status = STATUS_PEN;

}

});

eventCtrl.add(board, 'mouseup', 

function(event)

{

if(event.button === 0)

{

status = null;

}

});

eventCtrl.add(board, 'mousemove', 

function(event)

{

if(status ===STATUS_PEN)

{

var div = document.createElement('div');

div.style.width = '1px';

div.style.height = '1px';

div.style.background = 'blue';

div.style.position = 'absolute';

div.style.left = event.pageX + 'px';

div.style.top=  event.pageY + 'px';

board.appendChild(div);

}

});

});

console.log("End 11-2");

11-2_MouseEvent.js