Java Script Events Oldstyle Event Handlers body onloadwelcome

Java. Script Events

Old-style Event Handlers <body onload="welcome()"> <form> <script type="text/javascript"> <input type="text" id="uid" onchange="check()" /> function welcome() { <button id="ok" onclick="okay(); return false; "> alert("Welcome to My Blog!"); Click me</button> </form> } </body> function check() { var uid = document. get. Element. By. Id("uid"); if (uid. value == "") { alert("不可空白!"); uid. value="user id"; } } function okay() { var btn = document. get. Element. By. Id("ok"); btn. style. color = "green"; return false;

Event handlers using DOM <body> <form> <input type="text" id="uid" /> <button id="ok">Click me</button> </form> </body> window. onload = function( ) { alert("Welcome to My Blog!"); var uid = document. get. Element. By. Id("uid"); uid. onchange=check; document. get. Element. By. Id("ok"). onclick = okay; }; function check( ) { if (this. value == "") { alert("不可空白!"); this. value="user id"; } } function okay( ) { this. style. color = "green"; return false; }

Event handlers using DOM <script type="text/javascript"> window. onload = function() { document. get. Element. By. Id("uid"). onchange = function() { //… }; document. get. Element. By. Id("ok"). onclick = function() { //… }; // … };

HTML DOM Events https: //www. w 3 schools. com/jsref/dom_obj_event. asp • Mouse Events • Print Events • Keyboard Events • Media Events • Frame/Object Events • Animation Events (CSS) • Form Events • Transition Events (CSS) • Drag Events • Server-Sent Events • Clipboard Events • Misc Events (其他) • Touch Events

Event Description onclick the user clicks on an element oncontextmenu the user right-clicks on an element to open a context menu ondblclick the user double-clicks on an element onmousedown the user presses a mouse button over an element onmouseenter the pointer is moved onto an element Mouse Events onmouseleave the pointer is moved out of an element onmousemove the pointer is moving while it is over an element onmouseover the pointer is moved onto an element, or onto one of its children onmouseout a user moves the mouse pointer out of an element, or out of one of its children onmouseup a user releases a mouse button over an element onkeydown the user is pressing a key Keyboard Events onkeypress the user presses a key onkeyup the user releases a key onabort the loading of a resource has been aborted onbeforeunloadbefore the document is about to be unloaded onerror an error occurs while loading an external file onhashchange there has been changes to the anchor part of a URL onload an object has loaded onpageshow the user navigates to a webpage Frame/Object Events onpagehide the user navigates away from a webpage onresize the document view is resized onscroll an element's scrollbar is being scrolled onunload once a page has unloaded (for <body>)

Getting more event information ß Firefox, Chrome, IE 9 Þ 事件處理函數，加入參數 function onclick. Handling(e) { //e. type // e. screen. X, e. screen. Y, e. client. X, e. client. Y // e. button, } ß I. E. 8以下 Þ Þ 不支援具有參數之事件處理函數使用window. event http: //www. w 3. org/TR/DOM-Level-2 -Events/events. html#Events-Mouse. Event

Fix Event Incompatibilities function onclick. Handling(e) { if (window. event) e = window. event; //e. screen. X, e. screen. Y //e. button //… } function onclick. Handling() { if(arguments[0]) e = arguments[0]; else e = window. event; //e. screen. X, e. screen. Y //e. button //… }

Properties of Event ß ß ß ß target type button client. X, client. Y screen. X, screen. Y alt. Key, ctrl. Key, shift. Key key. Code cancel. Bubble

Mouse Event Example http: //ycchen. im. ncnu. edu. tw/www 2011/lab/jslab/mv. Event. JS. html window. onload = function() { img 1 = document. get. Element. By. Id("lily"); img 1. style. position="absolute"; img 1. style. top="300 px"; img 1. style. left="300 px"; img 1. onclick = click. Start; } function click. Start(e) { document. onmousemove = img. Move; mtop = parse. Int(img 1. style. top); mleft = parse. Int(img 1. style. left); x 1 = e. client. X; y 1 = e. client. Y; } function img. Move(e) { img 1. onclick=click. Stop; x 2 = e. client. X; y 2 = e. client. Y; mtop = mtop+y 2 -y 1; mleft = mleft +x 2 -x 1; x 1=x 2; y 1=y 2; img 1. style. top=mtop+"px"; img 1. style. left=mleft+"px"; } function click. Stop(e) { document. onmousemove = null; img 1. onclick = click. Start; }

Keyboard Events <script type="text/javascript"> window. onload = function () { document. get. Element. By. Id("keyp"). onkeypress=get. Key; document. get. Element. By. Id("keyd"). onkeydown=get. Key; } - 主要有兩種keyboard events: … * keypress 文數字鍵, 例如a, A function get. Key(e) { * keydown 鍵盤上的任何鍵, 例如shift, 方向鍵 keynum = e. key. Code; - 利用event的key. Code屬性來判斷 alert(keynum); // return false; 取消此事件 } </script> … http: //ycchen. im. ncnu. edu. tw/www 2011/lab/jslab/key. Event. JS. html <form> keypress: <input type="text" id="keyp" /> keydown: <input type="text" id="keyd" /> </form>

取消事件 html: <input type="text" id="keypc" /> <script type="text/javascript"> window. onload = function () { … document. get. Element. By. Id("keypc"). onkeypress=get. Key. Cancel; }; function get. Key. Cancel(e) { keynum = e. key. Code; if ((keynum>=65 && keynum <=90) || (keynum>=97 && keynum<=122)) return true; // 事件正常發生! else return false; // 取消事件，視同按鍵無作用！ A~Z: 65~90, a~z: 97~122 } https: //zh. wikipedia. org/wiki/ASCII </script> http: //ycchen. im. ncnu. edu. tw/www 2011/lab/jslab/key. Event. JS. html

表單檢查與取消事件 html: <form id="join" …> … <input type="submit" /> </form> <script type="text/javascript"> window. onload=function() { document. get. Element. By. Id("join"). onsubmit=frm. Check; }; … function frm. Check() { var is. OK=true; // check form elements. // if any input is not ok, set is. OK=false; … return is. OK; } </script>

▲ ▲ window. onload = function() { document. onkeydown= get. Key; var img 1 = document. get. Element. By. Id("lily"); img 1. style. top="300 px"; img 1. style. left="300 px"; } ▲ function get. Key(e) { var keynum; if (window. event) e=window. event; keynum=e. key. Code; var img 1 = document. get. Element. By. Id("lily"); ▼ var mtop = parse. Int(img 1. style. top); http: //ycchen. im. ncnu. edu. tw/www 2011/lab/keydown. Event. JS. html var mleft = parse. Int(img 1. style. left); switch (keynum) { <style type="text/css"> case 37: img { img 1. style. left = Math. max(0, (mleft-10)) +"px"; position: absolute; break; case 38: } img 1. style. top =Math. max(0, (mtop-10)) +"px"; </style break; case 39: img 1. style. left = Math. min(document. Element. client. Width-img 1. width, mleft+10)+"px"; break; case 40: img 1. style. top = Math. min(document. Element. client. Height-img 1. height, mtop+10)+"px"; break; 關於螢幕及瀏覽器大小，請參考： } http: //ycchen. im. ncnu. edu. tw/www 2011/lab/jslab/screen. JS. htm }

Event Bubbling <body> <div id="content"> <img id="lily" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="lily. jpg" /> </div> </body> window. onload

Event Bubbling <body> <div id="content"> <img id="lily" src="lily. jpg" /> </div> </body> window. onload = function () { document. onclick=doc. Click; document. get. Element. By. Id("content"). onclick=div. Click; document. get. Element. By. Id("lily"). onclick=img. Click; } function doc. Click() { alert("document clicked!"); } function div. Click() { alert("div clicked!"); } function img. Click() { alert("img clicked!"); }

event. cancel. Bubble function img. Click(e) { if (window. event) e=window. event; e. cancel. Bubble = true; // e. stop. Propagation(); alert("img clicked!"); } http: //ycchen. im. ncnu. edu. tw/www 2011/lab/Event. Bubble. JS. html

Other Event Objects Event Object Description Animation. Event For CSS animations Clipboard. Event For modification of the clipboard Drag. Event For drag and drop interaction Focus. Event For focus-related events Hash. Change. Event For changes in the anchor part of the URL Input. Event For user input Keyboard. Event For keyboard interaction Mouse. Event For mouse interaction Page. Transition. Event For navigating to, and away from, web pages Pop. State. Event For changes in the history entry Progress. Event For the progress of loading external resources Storage. Event For changes in the window's storage area. Touch. Event For touch interaction Transition. Event For CSS transitions Ui. Event For user interface interaction Wheel. Event For mousewheel interaction

Java. Script HTML DOM Event. Listener (1/2) • add. Event. Listener() • attaches an event handler to the specified element. • attaches an event handler to an element without overwriting existing event handlers. • You can • add many event handlers to one element. • add many event handlers of the same type to one element. • add event listeners to any DOM object not only HTML elements <button id="chk. Btn">Check<button> var chk=document. get. Element. By. Id("chk. Btn"); chk. add. Event. Listener("click", function(){ alert("Checking!"); }); chk. add. Event. Listener("click", dbl. Chk); function dbl. Chk() { … }

Java. Script HTML DOM Event. Listener (2/2) • remove. Event. Listener() • removes event handlers that have been attached with the add. Event. Listener() method var chk=document. get. Element. By. Id("chk. Btn"); chk. add. Event. Listener("click", dbl. Chk); … chk. remove. Event. Listener("click", dbl. Chk);