[微精通：網頁設計Vue + Node.js + MySQL] 2.3. Event

張貼者： 日期：
網頁需要互動，就需要有事件Event，透過事件在搭配JavaScript程式，就可以建立一個可互動的網頁了。

 

image/svg+xml2.3. 事件 Event 滑鼠滑過殭屍姓名，是否可將殭屍姓名放⼤呢 ? function hi ( who ) { console.log( ' hi~ ' + w ho ); return who + 'hi~' ; } hi ( ‘ ⼤提姆 ' ); var r1 = hi ( ' ⼤提姆 ' ); console.log(r1); let z1 = { name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true } ; z1 . sayHi = hi ; var r2 = z1 . sayHi ( ' ⼤提姆 ' ); console.log(r2); var hi2 = function ( who ) { console.log( 'hi~' + who); return who + 'hi~' ; } ; var r3 = hi2( ' ⼤提姆 ' ) ; console.log(r3); var hi3 = ( who ) => { console.log( 'hi~' + who); return who + 'hi~' ; } ; var r4 = hi3( ' ⼤提姆 ' ) ; console.log(r4); let z2 = {name: ' 懶懶瑪琍 ' , age: 10 , isVegetarian: true }; z2 . sayHi = hi2 ; let z3 = {name: ' ⼤提姆 ' , age: 5 , isVegetarian: false } z3 . sayHi = hi3 ; . big-zombie-name { color : red ; font-weight : bold ; font-size : 20px ; } function big ( id ) { var zombieNameLI = document.getElementById ( id ); zombieNameLI . className = " big-zombie-name " ; } function normal ( id ){ var zombieNameLI = document.getElementById ( id ); zombieNameLI . className = "" ; } <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > </head> <body> <ul id = 'zombies_ul' > <li id = ' name1 ' onmouseover = “ big ( ' name1 ' )" onmouseout = " normal ( ' name1 ' )" > 瘋狂傑克 </li> <li id = ' name2 ' onmouseover = “ big ( ' name2 ' )" onmouseout = " normal ( ' name2 ' )" > 懶懶瑪琍 </li> <li id = ' name3 ' onmouseover = " big ( ' name3 ' )" onmouseout = " normal ( ' name3 ' )" > ⼤提姆 </li> <li id = ' name4 ' onmouseover = " big ( ' name4 ' )" onmouseout = " normal ( ' name4 ' )" > 史提夫 </li> <li id = ' name5 ' onmouseover = " big ( ' name5 ' )" onmouseout = " normal ( ' name5 ' )" > 功夫李 </li> </ul> </body> <script type = "text/javascript" src = "home.js" ></script> </html> <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > </head> <body> < ul id = ' zombies_ul ' > < /ul > </body> <script type = "text/javascript" src = "home.js" ></script> </html> function big ( li ){ li.className = " big-zombie-name " ; } function normal (li){ li.className = "" ; } var zombies = [ {name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true }, {name: ' 懶懶瑪琍 ' , age: 10 , isVegetarian: true }, {name: ' ⼤提姆 ' , age: 5 , isVegetarian: false }, {name: ' 史提夫 ' , age: 2 , isVegetarian: false }, {name: ' 功夫李 ' , age: 1 , isVegetarian: true } ]; var zombiesUL = document.getElementById( ‘ zombies_ul ' ); for (i = 0 ; i < zombies.length; i++) { let zombieLI = document.createElement ( ' li ' ); zombieLI.innerText = zombies[i].name; zombieLI . onmouseover = function (){ big ( zombieLI );}; zombieLI . onmouseout = function (){ normal ( zombieLI )}; zombiesUL.appendChild ( zombieLI ); } <meta charset = "utf-8" > <html> <head> <style> .box { height : 50px ; width : 120px ; background-color : lightskyblue ; text-align : center ; margin : 10px ; } .blue { background-color : lightskyblue ; } </style> </head> <body> <div class = 'box' onclick = 'console.log( "onclick" );' > onclick </div> <div class = 'box' ondblclick = ‘console.log( "ondblclick" );' > ondblclick </div> <div class = 'box' onmousedown = 'console.log( "onmousedown" );' > onmousedown </div> <div class = 'box' onmouseup = ‘console.log( "onmouseup" );' > onmouseup </div> <div class = 'box' onmouseover = ‘console.log( “onmouseover" );' > onmouseover </div> <div class = 'box' onmousemove = ‘console.log( "onmousemove" );' > onmousemove </div> <div class = 'box' ommouseout = ‘console.log("ommouseout");' > ommouseout </div> onkeydown & onkeypress & & onkeyup: < input type = 'textbox' class = 'blue' onkeydown = 'console.log( "onkeydown" );' onkeypress = 'console.log( "onkeypress" );' onkeyup = 'console.log( "onkeyup" );' > </body> </html> 1. 想要在滑鼠滑過殭屍的姓名時，才將嫿屍的姓名變 ⼤，移開時⼜要變回原樣，這可以做到嗎 ? 理解函式與⽅法 w2_3_1 - home.js 1. 在 JavaScript 中可以使⽤ function 定義⼀個函式，這個 函式會將某段程式裝起來，好在呼叫時執⾏這段程式。 2. 宣告名為 hi 的函式，它有⼀個 who 參數⽤來接收外部帶入的值。 3. 接著是⼤括號 ({}) 表⽰函式呼叫時要執⾏的內容。 4. 簡單的輸出 'hi~' 加上 who 變數中的值的字串。 5. 若有 return ，則在函式呼叫 後會得到 return 後⽅的值。 6. 有了 hi() 函式，接下來就可以對它加上⼩括號 (()) 進⾏呼叫使⽤， ⼩括號中的字串 ’ ⼤提姆 ' 即會帶入 'who' 參數中。 7. 使⽤ r1 變數接下 hi() 函式中 return 回傳的值。 8. 這是存在放 z1 變數中的物件。 9. JavaScript 中的屬性是可動態增加的，在此增加 ⼀個 sayHi 屬性，並將 hi() 函式放入其中。 10. ⽽這個 sayHi 屬性因為放入的是⼀個函式，這時我們會改稱 sayHi 為⼀個⽅法，所以⽅法即是物件上存放函式的屬性。 11. 這時就可透過物件呼叫 sayHi() ⽅法，即呼叫 hi() 函式。 1 2 3 4 5 1 2 3 4 5 1. function ，準備 CSS 與放⼤、還原姓名的函式 w2_3_2 - home.js 2. 宣告 big() 函式，它有⼀個 id 參數會帶入標籤上的 id 值。 3. 接著是⼤括號 ({}) 表⽰函式呼叫時要執⾏的內容。 4. 在⼤括號中 ({}) 透過 id 找到這個 DOM 元素。 1. 建立⼀個 big-zombie-name 類別，給放⼤殭屍姓名⽤。 w2_3_2 - zombie.css 7. 同樣透過 id 到這個 DOM 元素，然後將 CSS 類別 設為空⽩，這樣就會將殭屍名字還原。 6. 宣告 normal() 函式也會帶入標籤上的 id 值。 5. 在透過 className 屬性將 CSS 類別指定為 'big- zombie-name' ，如此就會把殭屍的名字放⼤了。 2. onmouseover 與 onmouseout 事件， 
 掛載放⼤、還原姓名的函式 w2_3_3 - zombie.html 1. ⾸先為每個殭屍名的 <li> 加上 id ，好讓程式可以透過 id 找 到這個 DOM 元素， id 分別是 name1~name5 。 2. 接著設定 onmouseover 屬性，它是⼀個滑屬滑過時的事件 屬性，後⾯放上 big('name1') ，表⽰當事件發⽣時會呼叫 big() 函式，其中帶入的值即是這個 <li> 的 id 值。 3. 設定 onmouseout 事件屬性為 normal('name1') ，當滑屬離 開這個 <li> 時則執⾏ normal() 函式還原成原本的⼤⼩格式。 4. 依此類推，分別為其餘的 <li> 加上 onmouseover 與 onmouseout 事件屬性，並給予對應的 id 值 name2~name4 。 3. 實際測試放⼤還原效果 w2_3_3 - zombie.html 1. 這時，當你⽤滑鼠移⾄殭屍的名字上時，這個名字就會變⼤變 紅，且當移開時⼜會變回原本⿊⾊正常⼤⼩的模樣。 DOM 元素也可以為 onmouseover 與 onmouseout 事件 
 掛載放⼤、還原姓名的程式 w2_3_4 - zombie.html 1. html 中的 <ul> 是空的，沒有 <li> 標籤在其中。 w2_3_4 - zombie.js 2. 這是殭屍姓名放⼤與還原函式 big() 與 normal() ，不⼀樣的是參數 變成接收 <li> 的 DOM 元素，然後直接對 DOM 元素設定 className 屬性。 3. 依序的建立 <li> 元素並加到 id 為 'zombies_ul' 的 <ul> 中。 4. 建立 <li>DOM 元素時，設定其 onmouseover 事件屬性為⼀個匿名函 式，匿名函式即沒有名字的函式 function 後⾯直接接⼩括號 (()) 。 5. 這個匿名函式會呼叫 big() 函式， 並將⽬前的 <li>DOM 元素帶入。 8. 如此就做到透過 DOM 元素設定滑鼠滑入滑出的 事件，並執⾏對應的放⼤還原程式。 7. 建立 <li>DOM 元素時，設定其 onmouseout 事件屬性為⼀個匿名函式， 這個匿名函式會呼叫 normal() 函式，並將⽬前的 <li>DOM 元素帶入。 6. onmouseover 其實也是屬性，為何稱之 為事件 ? 原因是當這個滑鼠滑過的事件發⽣ 時， JavaScript 就會呼叫 onmouseover 屬 性中的函式，也因此我們簡稱它為事件。 更多常⽤的事件 w2_3_5 - zombie.html 1. onclick 事件，滑鼠點擊時觸發。 2. ondblclick 事件，滑鼠點擊兩次時觸發。 3. onmousedown 事件，滑鼠上的按鈕被按下時觸發，發⽣在 onclick 之前。 4. onmouseup 事件，滑鼠上的按鈕點下後放開時觸發，發⽣在 onclick 之後。 5. onmouseup 事件，滑鼠滑入時觸發。 6. onmousemove 事件，滑鼠在上⾯滑動時觸發。 7. ommouseout 事件，滑鼠滑出時觸發。 8. onkeydown 發⽣在鍵盤按下時觸發， 若連續不放，則會連續引發此事件。 9. onkeypress 發⽣在鍵 盤按鈕按下時觸發，發⽣在 onkeydown 之後，若連續不 放， onkeypress 也只會產 ⽣⼀次，出現在第⼀次的 onkeydown 之後。 10. onkeyup 發⽣在鍵盤按下放開後觸發，因 為是放開動作因此沒有連續按下不放的問題。 11. 最後，即可開啟控制台，⼀邊操作⼀邊查看事件的觸發狀況。 12. 另⼀種函式叫 ’ 匿名函式 ' ，是寫⽅法是個沒有函式名字的函式， function 後直接是⼩括號 (()) ，因為沒名字，通常會直接使⽤變數把這 個函式裝起來，以透過變數取出使⽤。在此存放在 hi2 變數中。 13. 後續透過變數取出，加上⼩括號 (()) 即可呼叫執⾏。 14. 另⼀種叫 ’ 箭頭函式 ’ ，⽅式是直接寫下⼩括號 (()) 然後後⾯是⼀個箭頭 (=>) ，接著就是⼤括號 ({}) 。同樣因為沒有名字，因為會使⽤變數將它裝起來。 15. 同樣透過變數取出函式，加上⼩括號 (()) 後即可呼叫執⾏。 16. 當然，無論是匿名函式或是箭頭函式，都可 以放在物件的屬性上變成⽅法。如在此成為 z2 、 z3 變數中殭屍物件的 sayHi ⽅法。 6 7 8 9 6 7 8 9

留言

張貼留言