[微精通:網頁設計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