\n\n\n\n\n\n

事件處理範例二：

\n\n
　　onmouseover=over(this);
　　onmouseout=out(this); 
>點我
\n\n\n\n\n\n\n\n\n\n
","keywords":["執行"],"author":{"@type":"Person","name":"Yu Chun","url":"https://vocus.cc/user/64246cd0fd897800011d3ad5"},"image":{"@type":"ImageObject","url":"https://images.vocus.cc/static/og_img/vocus_kv.jpeg"},"creator":{"@type":"Person","name":"Yu Chun"},"publisher":{"@type":"Organization","name":"方格子｜放送你的知識與想像","logo":{"@type":"ImageObject","url":"https://images.vocus.cc/static/og_img/vocus_kv.jpeg"}}}
Yu Chun的沙龍
新手自學筆記 day4 Javascript 事件處理 
Yu Chun
Yu Chun
閱讀時間約 1 分鐘
事件是什麼：


    

  • 發生了一件事情
    • 

  • 執行相對應的程式
    • 



常見事件的種類：


    

  1. onclick 「點擊」
    2. 

  2. onmouseover 「滑鼠移入」
    3. 

  3. onmouseout 「滑鼠移出」
    4. 

  4. onmousedown 「滑鼠按住」
    5. 

  5. onmouseup 「滑鼠放開」
    6. 



事件處理的三大關鍵：


    

  1. 在哪個事件上發生
    2. 

  2. 事件的種類是什麼
    3. 

  3. 執行事件對應的函式
    4. 



事件處理範例一：


    

  • 利用this 關鍵字代表觸發事件的標籤
    • 



<div onclick="change(this);">原本的內文</div> // this 代表 div 這個標籤
<script>
　　function change(elem){  
　　　　elem.innerHTML="全新的內文";
　　}
</script>


事件處理範例二：


    

  • 多個事件處理
    • 

  • 滑鼠移入﹑移出的處理範例
    • 

  • 當滑鼠移入時, 字體變成粗體, 移出後恢復成一般字體
    • 



<span
　　onmouseover="over(this);"
　　onmouseout="out(this);" 
>點我</span>
<script>
　　function over(elem){
　　　　elem.style.fontWeight="bold";
　　} 　　
　　function out(elem){
　　　　elem.style.fontWeight="normal";
　　}
</script>


    Yu Chun的沙龍
    0會員
    7內容數
    留言0
    查看全部
    發表第一個留言支持創作者！
    Yu Chun的沙龍 的其他內容
    新手自學筆記 Javascript Object 物件基礎
    閱讀時間約 1 分鐘
    新手自學筆記 day2 Javascript Array 陣列
    閱讀時間約 1 分鐘
    新手自學筆記 day3 Javascript HTML DOM
    閱讀時間約 4 分鐘
    你可能也想看
    創作者要怎麼好好休息 + 避免工作過量？《黑貓創作報#4》午安，最近累不累？
這篇不是虛假的關心。而是《黑貓創作報》發行以來可能最重要的一篇。
是的，我們這篇講怎麼補充能量，也就是怎麼休息。

    Thumbnail
    avatar
    黑貓老師
    2024-06-29
    #創作#作者#社群
    萊菈彈吉他 | 新手成功彈唱半首歌，按弦按到懷疑人生?!-自學吉他的Day1-2 試著練習歌曲，增加自信和成就感，也在學習之路上保持開心 ! 
    Thumbnail
    avatar
    萊菈 Lyra
    2024-04-25
    #音樂#吉他#學習紀錄
    新手主管的喃喃自語初接管理職的感受與困惑，面對不同性格的團隊成員如何管理與引導，如何在職場中找到自己的角色定位，一起來探討在管理職上的經驗和心得。
    Thumbnail
    avatar
    哈哈哈三文魚
    2024-02-25
    #管理#主管#Podcast
    網頁製作新手，可以自架網站嗎？對於網頁製作新手來說，自己架設網站絕對是可行的。現代的網頁製作工具和平台設計得十分用戶友好，即使沒有網頁開發背景，也能輕鬆上手。在選擇網頁製作平台時，需要注意以下幾點：
操作介面：選擇一個操作界面清晰直觀的平台，這有助於您更容易地設計網站和探索各種功能。
功能齊全：確保平台提供您所需的所有功能...
    Thumbnail
    avatar
    Arthur
    2024-01-28
    #網頁製作#自架網站#網頁設計
    【免費自學日文資源】背完五十音的下一步？4個新手自學日文的好工具我在離職後開始實現人生清單，其中一項就是「學習日文」。不過，我也怕自己花錢買了課程、教材後卻三分鐘熱度，所以我在網路上搜尋「免費」的自學日文資源。去蕪存菁之後，留下這4個實際用過值得推薦的工具，分享給你！
    Thumbnail
    avatar
    逗點
    2024-01-05
    #日文#自學日語#自學日文
    長尾詞、SEO結構化資料是什麼？SEO自學新手常見3大地雷！根據Google統計，有超過70%的人搜尋查詢 是使用長尾關鍵字進行的，尤其對於使用語音搜尋的人來說更普遍，長尾詞可以為你發掘潛在客戶，以下將簡單介紹長尾詞的重要性及應用。
什麼是長尾詞？
長尾詞是指單獨字搜尋量低，但數量相當龐大，加總起來搜尋量可成超過大關鍵字的關鍵字群。
例如：以數位相
    Thumbnail
    avatar
    Irene
    2023-12-15
    🌅自組去嘉明湖｜ 三天兩夜｜新手百岳｜人生必去📌這是一個我聽了四年，一直都好想去的地方，天使的眼淚、三叉山、向陽山。
從高雄出發四個小時，台中出發要七八個小時，是不是身為南部人應該要來爬過。
抽山屋，就靠集氣了。
一人一公斤兌換明信片
    Thumbnail
    avatar
    白米飯
    2023-03-06
    #嘉明湖#日出#向陽山
    新手自評管理表現的3個衡量指標希望能用更客觀的方式建立標竿，所以從矽谷團隊的管理經驗中，總結出以下3點共通的標準，具體化分享給大家：
1. 讓事情發生
2. 讓人成長
3. 徹底坦率
    Thumbnail
    avatar
    Han Hong
    2022-04-22
    #管理#新手#績效
     新手也OK! 自然系手作服自學筆記從沒想過，只要上網購買精品零碼布，就能體驗Burberry等名牌優質的親膚質感，而且環保又平價。
    Thumbnail
    avatar
    Sandra 珊卓百味
    2022-03-23
    #手作#裁縫#自學
    職場大補帖：菜鳥新手必學的 10 個實用出差英文單字英語是目前國際間使用最普遍的語言，因此熟悉英語是身為專業的差旅人非常必要的一件事情。那麼你知道不同的場合所使用的英文也有所不同嗎？有哪些英文是出差在外必須用到的呢？今天精選了 10 個非常實用的出差必備英文單字，讓大家出國在外，溝通能更加無障礙工作更加順利！

    Thumbnail
    avatar
    COMMEET
    2021-04-20
    #企業#企業管理#旅遊
    新手華語教師看過來！你知道漢字教學第一步應該教什麼嗎？不知道有人記得小時候我們一開始學漢字（註1）時，是怎麼寫的嗎？印象中，一開始學寫的就是一個整字，像「日」、「月」之類的，這對於自懞懂時就接觸漢字的我們，還沒會寫，先學會認，入學後再遵循老師的指導，寫出整齊漂亮的字是沒什麼大問題的。
但，如果我們教的是對漢字非常陌生的學習者呢？

    Thumbnail
    avatar
    Yenling的漢字、生活與觀察
    2020-10-07