JavaScript 1103 增加了

阿新 • • 發佈：2021-11-03

1.7 事件和事件物件


HTML 事件是發生在 HTML 元素上的事情。當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。HTML 事件可以是瀏覽器行為，也可以是使用者行為。

事件物件就是當前事件發生的時候 所有資訊封裝成的物件

也就是說 使用者對網頁的一次操作就是一個事件，例如 使用者點選了頁面的按鈕 這個操作就稱之為 點選事件。使用者用的是左鍵還是右鍵點選的按鈕 等資訊 就是事件物件。

例如：
<button id="haha">你好 世界</button>
        
        
        <script type="text/javascript">
            
            haha.onmousedown = function( e ){
                
                console.log( e  );
                
            }

</script>

1.8 滑鼠事件

屬性	描述	DOM
onclick	當用戶點選某個物件時呼叫的事件控制代碼。	2
oncontextmenu	在使用者點選滑鼠右鍵開啟上下文選單時觸發
ondblclick	當用戶雙擊某個物件時呼叫的事件控制代碼。	2
onmousedown	滑鼠按鈕被按下。	2
onmouseenter	當滑鼠指標移動到元素上時觸發。	2
onmouseleave	當滑鼠指標移出元素時觸發	2
onmousemove	滑鼠被移動。	2
onmouseover	滑鼠移到某元素之上。	2
onmouseout	滑鼠從某元素移開。	2
onmouseup	滑鼠按鍵被鬆開。	2


 <style type="text/css">
         div{
                width: 300px;
                height: 300px;
                background-color: red;
            }
            
            ul {
                width: 200px;
                border: 2px solid red;
                background-color: blue;
                display: none;
                position: fixed;
            }
    </style>

    </head>
    <body>
        
      <div id="haha"> 123 </div>
        <ul id="hehe">
            <li><a href="http://www.baidu.com">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
        </ul>   
        
        <script type="text/javascript">
            
            haha.oncontextmenu = function(e){
                hehe.style.left = e.clientX + "px";
                hehe.style.top = e.clientY + "px";
                
                hehe.style.display = "block";
                // 將系統的禁用 
                return false;
            }
            haha.onclick = function(){
                hehe.style.display = "none";
            }
        </script>
   <style type="text/css">
         #aaa {
                box-shadow: 10px 10px 50px 10px black;
            }
    </style>

    </head>
    <body>
        
         <canvas id="aaa" width="1200" height="600" ></canvas>
         <p>
             <input type="color" id="bar">
             <input type="range" min="5" max="100" id="foo">
         </p>
        
         <script type="text/javascript">
            
            /* 獲取 畫筆 */
          var hb =  aaa.getContext("2d");
            
            aaa.onmousedown = function( e ){
                hb.beginPath();
                hb.lineWidth = foo.value;
                hb.strokeStyle = bar.value;
                hb.moveTo( e.clientX , e.clientY  );
                
    aaa. 
onmousemove = function( e ){
hb.lineTo( e.clientX , e.clientY);
hb.stroke();
    }

    }

aaa.onmouseup = function(){
aaa.onmousemove = null;
    }



</script>

1.9 鍵盤事件

屬性	描述	DOM
onkeydown	某個鍵盤按鍵被按下。	2
onkeypress	某個鍵盤按鍵被按下並鬆開。	2
onkeyup	某個鍵盤按鍵被鬆開。	2


<input type="text" id="foo">
        
        
        <script type="text/javascript">
            
            foo.onkeypress = function( e  ){
                
                if(e.keyCode <48 || e.keyCode>57){
                    console.log(e.keyCode)
                    return false;
                }
                    
            }
            
            
        </script>

1.10 框架/物件（Frame/Object）事件

屬性	描述	DOM
onabort	影象的載入被中斷。 ( <object>)	2
onbeforeunload	該事件在即將離開頁面（重新整理或關閉）時觸發	2
onerror	在載入文件或影象時發生錯誤。 ( <object>, <body>和 <frameset>)
onhashchange	該事件在當前 URL 的錨部分發生修改時觸發。
onload	一張頁面或一幅影象完成載入。	2
onpageshow	該事件在使用者訪問頁面時觸發
onpagehide	該事件在使用者離開當前網頁跳轉到另外一個頁面時觸發
onresize	視窗或框架被重新調整大小。	2
onscroll	當文件被滾動時發生的事件。	2
onunload	使用者退出頁面。 ( <body> 和 <frameset>)	2


    <style type="text/css">
         
            .a1 {
                position: fixed;
                left: 200px;
                top: 50px;
            }
            .a2 {
                position: static;
            }
            
    </style>
    

    </head>
    <body>
        
        
        <input type="text" id="foo">
        
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>


<script type="text/javascript">

window.onscroll = function(e){

if(window.pageYOffset > 235){
foo.className = "a1";
    }else{
foo.className = "a2";
    }
    }

</script>

1.11 表單事件

屬性	描述	DOM
onblur	元素失去焦點時觸發	2
onchange	該事件在表單元素的內容改變時觸發( <input>, <keygen>, <select>, 和 <textarea>)	2
onfocus	元素獲取焦點時觸發	2
onfocusin	元素即將獲取焦點時觸發	2
onfocusout	元素即將失去焦點時觸發	2
oninput	元素獲取使用者輸入時觸發	3
onreset	表單重置時觸發	2
onsearch	使用者向搜尋域輸入文字時觸發 ( <input="search">)
onselect	使用者選取文字時觸發 ( <input> 和 <textarea>)	2
onsubmit	表單提交時觸發	2



<body>
    
        <img width="200" height="200" style="border-radius: 150px;border: 2px solid red;" id="foo" >
        <input type="file" accept="image/*" multiple="multiple"  id="bar">
        
        <script type="text/javascript">
            
            bar.onchange = function(){
                /* 檔案讀取物件 */
                var r = new FileReader();
                /* 讀取檔案路徑 */
                r.readAsDataURL( bar.files[0] );
                /* 當讀取載入完成 */
                r.onload = function(){
                    foo.src = r.result;
                }
            }
            
        </script>
      
    </body>

1.12 事件冒泡



<ul>
            <li class="foo">寶馬
              <ul>
                <li>M3</li>
                 <li>M4</li>
                 <li>M5</li>
              </ul>
            
            </li>
            <li class="foo">寶駿
              <ul>
                 <li>730</li>
                   <li>520</li>
                   <li>310</li>
              </ul>
            </li>
            <li class="foo">保時捷
              <ul>
                   <li>718</li>
                   <li>911</li>
                   <li>918</li>
              </ul>
            </li>
        </ul>
        
        
        <script type="text/javascript">
             var arr = document.querySelectorAll(".foo");
             for(var i=0;i<arr.length;i++){
                 var li = arr[i];
                 li.onclick = function(){
                     if(this.firstElementChild.style.display == "none"){
                         this.firstElementChild.style.display = "block";
                     }else{
                         this.firstElementChild.style.display = "none";
                     }
                 }
             }
        </script>


此時我們點選的是 標籤的子標籤 也能觸發當前標籤的點選事件 這就稱之為  事件冒泡
<head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        
        
        <style type="text/css">
            
            #foo {
                width: 200px;
                height: 200px;
                background-color: blue;
            }
            #bar {
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
            
            
        </style>
        
    </head>
    <body>
        
         <div id="foo">
             <div id="bar"></div>
         </div>
         
         <script type="text/javascript">

foo.onclick = function(){
alert("大的被點選了");
    }

bar.onclick = function( e  ){
alert("小的被點選了");
e.cancelBubble = true;
    }
</script>

        
</body>
<ul>
<li class="foo">寶馬
      <ul>
        <li>M3</li>
     <li>M4</li>
     <li>M5</li>
      </ul>

</li>
<li class="foo">寶駿
      <ul>
         <li>730</li>
      <li>520</li>
      <li>310</li>
      </ul>
</li>
<li class="foo">保時捷
      <ul>
       <li>718</li>
       <li>911</li>
       <li>918</li>
      </ul>
</li>
</ul>


<script type="text/javascript">
var arr = document.querySelectorAll(".foo");

for(var i=0;i<arr.length;i++){
var li = arr[i];
li.onclick = function(){
if(this.firstElementChild.style.display == "none"){
this.firstElementChild.style.display = "block";
     }else{
this.firstElementChild.style.display = "none";
     }
     }
     }

     var arr1 = document.querySelectorAll(".foo  li");
     for(var i=0;i<arr1.length;i++  ){
     var li = arr1[i];
     li.onclick = function(e){
e.cancelBubble = true;
      }
      }

</script>

JavaScript 1103 增加了

1.7 事件和事件物件 HTML 事件是發生在 HTML 元素上的事情。當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。HTML 事件可以是瀏覽器行為，也可以是使用者行為。事件物件就是當前事件發生的時

PyCharm 2019.3釋出，增加了哪些新功能呢？

Python的IDE（Integrated Development Environment 整合開發環境）非常多，如：VS Code、Sublime、NotePad、Python自帶編輯器IDLE、JuPyter、Eclipse + PyDev等等，但是對於專案開發、管理、部署等稍微大一點的專案，

PyCharm 2019.3釋出增加了新功能一覽

奇怪的程式碼增加了

小編原以為自己可以拿到50分的好成績，結果只拿到了30分，小編當時很疑惑，考後看了很久也沒看出來錯在了哪裡，你看出來了嗎？

再也不怕 JavaScript 報錯了，怎麼看怎麼處理都在這

在開發中，有時，我們花了幾個小時寫的 JS 程式碼，在遊覽器除錯一看，控制檯一堆紅，瞬間一萬頭草泥馬奔騰而來。至此，本文主要記錄 JS 常見的一些報錯型別，以及常見的報錯資訊，分析其報錯原因，並給予處理方法。

再也不怕 JavaScript 報錯了,怎麼看怎麼處理都在這兒

前端面試之HTML5新增加了那些標籤和屬性【未整理】?！

HTML5新增加了那些標籤！ <header>我是H5新增的頭部標籤</header> <nav>我是H5新增的導航標籤</nav>

JavaScript 25 歲了！

https://blog.csdn.net/qq449245884/article/details/111307349?spm=1000.2115.3001.4373 本文已過原作者授權翻譯。

Epic 遊戲商城 2020 年增加了 6000 萬用戶，但許多人只領不買

1月29日訊息昨日，Epic 遊戲商城釋出了 2020 年度總結。資料顯示，Epic 商城的遊戲數量由 2019 年的 190 個增加到了 471 個；使用者數量則比以往任何時候都多，由 2019 年底的 1 億增長到了 1.6 億；每月活躍使用者

Intezer：基於 Go 語言的惡意軟體數量 4 年來增加了 2000%

2月28日訊息據網路安全公司 Intezer 訊息，自 2017 年以來，使用 Go 語言編寫的惡意軟體數量增加了 2000%。該公司近日統計了全球惡意軟體生態的總體趨勢，結果顯示惡意軟體的製作者正逐漸從 C、C++ 語言轉向 Go 程式

美國比特幣 ATM 機數量在過去一年內增加了 177%

3 月 11 日訊息，據國外媒體報道，自 2020 年 3 月 1 日以來，全球新安裝的比特幣 ATM 機數量已接近 10000 臺。根據 Coin ATM Radar 的最新資料，目前的自動取款機數量為 16,835 臺，與去年的 7,152 臺相比，增長了

奇怪的組合增加了：《三國志 14 PK》宣佈與《萊莎的鍊金工房 2》聯動，武將即將上線

3月23日訊息光榮特庫摩遊戲官方宣佈，《萊莎的鍊金工房 2 ~ 失落傳說與祕密妖精~》將與《三國志 14 with 威力加強版》展開聯動，萊莎、科洛蒂婭等人也將作為聯動武將於 3 月 25 日在遊戲中上線。

法國宇航員祝賀神舟十二號：太空人口本週增加了 43%

6 月 20 日訊息我國神舟十二號飛船近日成功與天和核心艙對接，3 名航天員順利入住天宮空間站新家。

JavaScript 中有了Object 為什麼還需要 Map 呢

目錄一、別把物件當 Map1、可能通過原型鏈訪問到未定義的屬性2、物件的 Key 只能是字串二、使用 Map1、Map 常用操作2、遍歷 Map3、Map 中判斷 key 相等4、複製或合併 Map5、Map 序列化三、Map 和 Object 的效能差異一

[sparkSQL][union]關於union相關的使用記錄，奇怪的去重方法增加了

sql 中 Union相關說明結論 Union & Union all：功能：將兩個要連線的 SQL 語句拼接在一起，

奇怪的知識又增加了，ImageMagick PDF轉JPG圖片合併的時候報Unsupported Image Type

背景之前在PDF轉JPG時使用了ImageMagic這個強大的工具，起初使用都沒有什麼問題，但是突然生產出現部分轉換後的圖片合併失敗的問題

《中世紀王朝》增加了期待已久的第三人稱模式

Toplitz Productions將在其RPG生存沙盒《中世紀王朝》中為玩家提供一個全新的視角。開發商Render

報告稱 2021 年 Linux 的惡意軟體樣本數量增加了 35%

1 月 16 日訊息，新的一年給 Linux 使用者和愛好者帶來了一些壞訊息。根據網路安全公司 CrowdStrike 釋出的一份報告，與一年前相比，2021 年的 Linux 惡意軟體增加了 35%。更具體地說，報告稱針對各種物聯網 (IoT)

《絕地求生》免費後，新玩家數增加了 468%，平均遊戲時長增長 100%

1 月 27 日訊息，根據外媒 techspot 報道，遊戲公司 Krafton 今日宣佈，自從《絕地求生》PUBG 免費之後，全球新增的玩家數量相比此前增長了 68%。在東南亞地區以及南美地區，新玩家增長了 537%。這款遊戲於 2022 年

英國保險公司：與 VR 相關的索賠在 2021 年增加了 31%，大多數都是電視螢幕破了

2 月 14 日訊息，一個更有趣的跡象表明，VR 頭戴裝置似乎越來越受歡迎了。保險公司 Aviva 表示，涉及 VR 頭戴裝置的家庭內容索賠在 2021 年增加了 31%，自 2016 年以來總體增長了 68%。2021 年，VR 的平均索賠相關的

JavaScript 1103 增加了

1.7 事件和事件物件

1.8 滑鼠事件

1.9 鍵盤事件

1.10 框架/物件（Frame/Object）事件

1.11 表單事件

1.12 事件冒泡

相關推薦