'event'에 해당되는 글 2건

  1. 2011.11.10 javascript event 맛보기.
  2. 2008.02.20 JavaScript Event

javascript event 맛보기.

ITWeb/개발일반 2011.11.10 17:12

그냥 맛보기로 ㅎㅎ

[참고URL]
http://www.quirksmode.org/js/introevents.html
http://www.quirksmode.org/js/events_early.html


javascript 에서 event 를 다루는 것은 매우 중요 합니다.
뭐 이런건 이야기 하지 않아도 잘 아실것 같고요.. ^^

event preventing 관련해서 뭐 좀 보다가.. 걍.. 맛보기로만 정리해 보아요..

[맛보기코드]

<!DOCTYPE html>

<html lang="ko">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">

//<![CDATA[

function doSomething(url) {

var d = new Date();

location.href =  url + '?dummy=' + d.getTime();

}

//]]>

</script>

</head>

<body>

<a href="http://192.168.1.1/index.html" onclick="doSomething(this.href); return false;">doSomething!!</a>

</div>

</body>

</html>

- 이 맛보기 코드의 동작은 click 이벤트 발생 시 doSomething(..) 함수가 동작하게 되고 page 가 전환 됩니다.
- 결과적으로 <a href=""> 의 href 기본 동작은 작동하지 않게 되는 것입니다.
- 이유는 onclick="....; return false;" 때문입니다.
- 만약 onclick 시 doSomething() 동작 후 기본 동작이 실행 되게 하고 싶다면 return true; 로 변경을 하시면 됩니다.


※ Event bubbling 이나 preventing 관련해서는 위의 URL 들을 참고하세요.
※ 간혹 어떤 분들은 href 와 onclick 중 어떤게 먼저 동작하냐고 물으시는 분들이 있는데요.. ^^;; 당연히 event(onclick) 가 먼저 발생 합니다.




 
신고
Trackback 0 : Comment 0

JavaScript Event

ITWeb/개발일반 2008.02.20 17:41


 
-The browser has an event-driven, single-threaded, asynchronous programming model.
-Events are targeted to particular nodes.
-Events cause the invocation of event handler functions.
-Events are normally used in combination with functions, and the function will not be executed before the event occurs!

 
Attribute
The event occurs when...
FF
N
IE
onabort
Loading of an image is interrupted
1
3
4
onblur
An element loses focus
1
2
3
onchange
The user changes the content of a field
1
2
3
onclick
Mouse clicks an object
1
2
3
ondblclick
Mouse double-clicks an object
1
4
4
onerror
An error occurs when loading a document or an image
1
3
4
Onfocus
An element gets focus
1
2
3
onkeydown
A keyboard key is pressed
1
4
3
onkeypress
A keyboard key is pressed or held down
1
4
3
onkeyup
A keyboard key is released
1
4
3
onload
A page or an image is finished loading
1
2
3
onmousedown
A mouse button is pressed
1
4
4
onmousemove
The mouse is moved
1
6
3
onmouseout
The mouse is moved off an element
1
4
4
onmouseover
The mouse is moved over an element
1
2
3
onmouseup
A mouse button is released
1
4
4
onreset
The reset button is clicked
1
3
4
onresize
A window or frame is resized
1
4
4
onselect
Text is selected
1
2
3
onsubmit
The submit button is clicked
1
2
3
onunload
The user exits the page
1
2
3

 
Event parameter
-function getCBEvent (oNsEvent, PARAM1…) {
// window.event : ff 에서 undefined
var oEvent = oNsEvent || window.event;
var oTarget = oEvent.target || oEvent.srcElement;
}
onclick=getCBEvent(event, param1,..,parmaN);
-Microsoft does not send an event parameter, use the global event object instead

Event listener.
Classic
§node["on" + type] = f;
Microsoft
§node.attachEvent("on" + type, f);
W3C
§node.addEventListener(type, f, false);
Example :
§if ( DOMObject.addEventListener ) {
§ DOMObject.addEventListener("click", getMsg, false);
§} else if (DOMObject.attachEvent ) {
§ DOMObject.attachEvent("onclick", getMsg);
§} else if (DOMObject.onclick ) {
§ DOMObject.onclick = getMsg; // or
§ DOMObject["onclick“] = getMsg;
§}

 
Event bubbling
-Event bubbling is that the event is delivered in  elements, and so on until the event is canceled.
Cancel bubbling
-function cancelBubbling ( oEvent ) {
if ( oEvent.stopPropagation ) {
oEvent.stopPropagation(); // FF
} else {
oEvent.cacnelBubble = true; // IE
}
}



신고
Trackback 0 : Comment 0