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
12-0_XMLHttpRequest.html