聚焦CSS2018工業互聯網浪潮下的安全新探討

新網8月29日電 28日下午，由騰訊公司主辦、工業互聯網產業聯盟承辦的第四屆互聯網安全領袖峰會(Cyber Security Summit2018,簡稱CSS2018)工業互聯網分論壇在北京召開。本屆工業互聯網安全分論壇邀請到工信部網絡安全管理局，中國船舶工業集團有限公司、科技委委員、信息安全學科帶頭人丁宇征，中控科技集團、寧波工業互聯網研究院創始人褚健教授，中國信息通信研究院、安全所副主任柯皓仁，綠盟科技高級產品總監王曉鵬，騰訊安全副總裁方斌，中國信通院安全所副所長謝瑋等各界嘉賓，圍繞工業互聯網安全行業解決方案、創新技術跨界融合、工業互聯網應用安全等議題展開討論。

工業互聯網作為新一代信息技術與制造業深度融合的新興業態和應用模式，其安全性更是在產業智能制造轉型中起到至關重要的驅動作用。數字經濟時代，信息安全已經不只是一種基礎能力，還是產業發展、社會正常運轉的驅動力，對于工業互聯網的發展現狀來說，安全則是保障產業健康發展的前置條件。會上，來自政府、企業、機構的專家和學者圍繞“工業互聯網浪潮下安全新探討”主題展開了深入研討。旨在通過技術引領更多不同方向、不同領域的創新發展。

機遇與挑戰并存工業互聯網成數字時代物聯網新入口

隨著全球新一輪科技革命蓬勃興起，工業互聯網作為新一代制造技術的產物，被眾多業內人士稱為物聯網新入口，在未來社會發展中將成為重要成分，日益成為新工業革命的關鍵支撐?；诠I互聯網開發、互聯、跨域的特點，安全已經成為工業互聯網發展的前提和基礎，加強工業互聯網安全保障已經成為工業信息安全工作的前沿與重點。

但在工業互聯網的發展過程中也面臨著諸多安全風險?！霸O備智能化帶來的設備安全；數據的開放流動與共享帶來的數據安全；控制環境開放化帶來的控制安全；網絡IP化、無線化及組網靈活化帶來的網絡安全；應用范圍的擴大帶來的應用安全”工業互聯網中國船舶工業集團有限集團科技委委員、信息安全學科帶頭人丁宇征在論壇演講《架構新體系迎接工業互聯網安全新挑戰》中深入剖析了工業互聯網安全挑戰。

工業互聯網中國船舶工業集團有限集團科技委委員、信息安全學科帶頭人丁宇征

對此，來自綠盟科技高級產品總監王曉鵬也在會上提出了保障工業互聯網安全的建議，王曉鵬在演講《工業新業態下的安全思考》中指出：“安全驅動力一直在不斷變化，風險如影隨形。構建工業互聯網安全體系則需要從邊界安全、安全評估、業務感知、業務防護與安全運營五大項入手。全行業應共同構建起健康完善的工業互聯網安全建設體系，以此來應對未來的各項挑戰?！?/p>

提高安全保障能力加強工業互聯網安全建設體系化

面對即將到來的數字時代和更多未知的安全威脅，如何快速構建起工業互聯網安全體系成為工業互聯網行業亟待解決的問題。在本屆工業互聯網安全分論壇上，騰訊安全副總裁方斌帶來了有關“筑牢安全防線：新時期下的工業互聯網安全探索”的主題演講，分享騰訊安全在新時期的新探索。方斌表示，騰訊將堅持開放、合作、共享，推動工業互聯網發展的戰略，以騰訊“安全大腦”為核心，持續在工業互聯網安全領域展開探索和實踐。據方斌介紹，騰訊“安全大腦”融合AI、大數據、移動互聯網、云計算、物聯網等新興技術，整合騰訊安全聯合實驗室和眾多安全專家，結合騰訊近20年安全經驗積累，對海量安全數據進行收集、分析、處理，從而提供安全態勢感知、溯源分析、風險趨勢預測、智能化輔助決策、安全協同處置等智慧安全能力，是騰訊著力打造智慧安全的核心引擎。

“工業互聯網安全仍是一個相對全新的安全領域，具備高度復雜性和前沿性，單一企業難以提供全鏈路、全流程、全天候的工業互聯網安全能力，開放、共享、合作，已經成為網絡安全空間新形勢下的共識。未來，騰訊將繼續發揮自身優勢、開放安全能力、聯動行業力量，全面提升工業互聯網安全防護水平，共建工業互聯網安全新生態?！狈奖笤跁险f到。

騰訊安全副總裁方斌

同時，中控科技集團、寧波工業互聯網研究院創始人褚健教授與中國信息通信研究院安全所副主任柯皓仁也以演講《工業控制安全問題及實例分析》與《工業互聯網安全行業解決方案實踐分析》也為工業互聯網安全體系建設提供了新的思路。褚健教授表示，目前工業化發展水平層次不齊，中國具備“智能制造發展基礎”的企業僅為5%，未來，安全將成為智能制造最重要的保障。同時，柯皓仁主任也在會上表示，工業互聯網安全正在面臨新要求、新挑戰、新發展，國家高度重視工業互聯網發展，出臺工業互聯網安全指導文件，明確并落實企業主體責任，安全成為工業互聯網的關鍵要素。

除主題演講外，與會嘉賓們圍繞“工業互聯網加速落地，如何促進安全生產力升級轉化”的圓桌論壇環節中，分別從不同層面、不同行業、不同視角對分享了各自在信息化與工業化深度融合推進中的諸多進展，對工業互聯網安全與生產力升級轉化安全的看法以及對未來工業互聯網安全部署的建議，以全新跨界視角共商中國工業互聯網安全體系建設。

在數字經濟時代，信息安全已經不只是一種基礎能力，還是產業發展、社會正常運轉的驅動力。CSS始終關注全球前沿安全，除工業互聯網安全分論壇外，CSS2018還推出金融安全分論壇、AE50 安全產學研論壇、P16基礎實施安全領袖圓桌等九大分論壇，匯聚全球行業大咖，共同探索安全未來，拉動全行業視線聚焦安全領域最前沿動態，搭建網安尖端交流新平臺。

022年7月21日，世界自然保護聯盟（IUCN）發表的全球鱘魚重評估報告顯示，世界上剩余的26種鱘魚中，100%的物種現在面臨滅絕的風險，而2009年的比例是85%。這些評估是基于精確的計算，顯示它們在過去三代中的下降速度比以前想象的要快。中國生物多樣性保護與綠色發展基金會（簡稱中國綠發會、綠會）國際部注意到，此次更新中非常令人心痛的是——宣布了中國白鱘（Psephurus gladius）的滅絕。

圖源：IUCN紅色名錄

白鱘曾經的分布范圍，現在已經滅絕

此次IUCN紅色名錄更新、鱘魚物種重評估，正式宣布了中國白鱘（Psephurus gladius）的滅絕。

鱘魚常常以其巨大的尺寸而聞名。四川漁民諺語稱“千斤臘子萬斤象”中，后者，就是白鱘。作為世界上最大的淡水魚之一，白鱘是長江流域和我國近海特有的魚類，它們是溯河魚類，春季溯江產卵。因此，江河湖海的天然連通性（connectivity），是該物種生存、繁衍的重要因素。

此前，去年9月，中國綠發會國際部曾經發布了一篇《聯合國最新報告評出2020/2021十大災難事件，長江白鱘滅絕登上榜》。聯合國機構參與發布的一份報告，分析了2020/2021年發生的10起相互關聯的災難。它們極具代表性，背后反映的問題已經、或未來將會改變世界各地人們的生活。這些災難包括：亞馬遜野火、北極熱浪、貝魯特爆炸、越南中部洪水、中國白鱘滅絕、新冠病毒疫情大流行、安風颶風、沙漠蝗蟲爆發、大堡礁珊瑚白化、德克薩斯寒潮等等。

2021年9月份的該報告曾經指出：雖然過度捕撈和污染起到了加速作用，但它的消亡在很大程度上可歸因于中國白鱘自然棲息地——長江中的多重水壩建設?！肮撞闹械淖詈笠活w釘子”是1981年葛洲壩的修建，此舉立竿見影地將中國白鱘從其唯一的產卵地（位于更遠的上游）切斷。

雖然野生捕獲的淡水魚為全世界數億人提供了糧食安全和生計，但中國的白鱘已經不能再提供了。那份報告顯示，盡管水壩不是這些魚類滅絕的唯一原因，但它們起著重要作用。自20世紀50年代以來，全世界已經建造了40000多座大壩，還有3700多個大壩項目尚待完成。其中許多項目計劃在被視為生物多樣性熱點的地區進行，包括亞馬遜河、剛果河和湄公河。據估計，這些水壩將改變全世界93%的河流流量，這意味著它們對全球幾乎所有淡水魚棲息地都有影響。

2021年聯合國一份十大災難事件報告

而2022年7月21日IUCN發布的最新報告，再次把白鱘滅絕背后的生物多樣性危機——我們當下所處的第六次生物大滅絕——擺到了人們眼前。

白鱘并不“孤獨”。此外在僅存的鱘魚物種中，長江鱘（Acipenser dabryanus）在世界自然保護聯盟（IUCN）瀕危物種紅色名錄中，從“極度瀕?！保–R）升級變為“野外滅絕”（extinct in the wild）；17個物種現在是極度瀕危，3個是瀕危，5個是易危。

越來越多鱘魚在步其后塵。比如一種英文名叫“The beluga sturgeon”的極度瀕危的歐洲鰉（又稱為Huso huso）可長到8米，重達1700公斤，幾個世紀以來，這些鱘魚因其肉和魚子醬的市場需求而被過度捕撈。盡管受到了CITES等國際法的保護，偷獵仍然影響著這些物種中的一半以上；加強對非法銷售鱘魚肉和魚子醬的法規的執行，對于阻止進一步的衰退至關重要。

大壩，影響了所有遷徙到繁殖地的鱘魚物種，而氣候變化導致的河流變暖，則進一步破壞了鱘魚的繁殖。淡水生態系統的恢復和建立有效的魚道，再加上restocking，已經證明對極度瀕危的納氏鱘（Acipenser naccarii）等物種有效，是支持全世界范圍內鱘魚長期生存的目前關鍵措施。

世界自然保護聯盟瀕危物種紅色名錄（IUCN Redlist）現在包括147,517個物種，其中41,459個物種面臨滅絕的威脅。

"淡水物種的多樣性支撐著我們的淡水生態系統和我們整個星球的健康，"Re:wild淡水魚保護經理Harmony Patricio說。"今天發布的關于世界鱘魚狀況的新聞應該成為對鱘魚生活的湖泊和河流的健康狀況下降的紅色警報。

整理 | Xiaoai

編輯 | 綠茵

責編 |

日期 |2022年7月21日

【拓展閱讀】
爭鳴&研討：鄱陽湖水利樞紐（建閘）工程討論會召開 | 14萬人在線參加
http://www.cbcgdf.org/NewsShow/4854/15104.html
聚焦黑山峽水利工程建設，歡迎爭鳴 | “水利工程建設與生態安全”討論會1月26日召開
http://www.cbcgdf.org/NewsShow/4936/18879.html
中國綠發會：聯合國最新報告評出2020/2021十大災難事件，長江白鱘滅絕登上榜
https://baijiahao.baidu.com/s?id=1710621517602847687

#白鱘#

見的事件分類

●我們在寫頁面的時候經常用到的一些事件
●大致分為幾類，瀏覽器事件 / 鼠標事件 / 鍵盤事件 / 表單事件 / 觸摸事件
●不需要都記住，但是大概要知道
鼠標事件
●click ：點擊事件
●dblclick ：雙擊事件
●contextmenu ：右鍵單擊事件
●mousedown ：鼠標左鍵按下事件
●mouseup ：鼠標左鍵抬起事件
●mousemove ：鼠標移動
●mouseover ：鼠標移入事件
●mouseout ：鼠標移出事件
●mouseenter ：鼠標移入事件
●mouseleave ：鼠標移出事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>

    <div>
        <p></p>
    </div>

    <script>
        /*
          鼠標事件
            + 就是依賴行為觸發的事件
            + over 和 out 是一套
              => 在移入和移出后代元素的時候也會觸發
            + enter 和 leave 是一套
              => 在移入和移出后代元素的時候不會觸發

          1. click: 鼠標左鍵單擊
          2. dblclick: 鼠標左鍵雙擊
          3. contextmenu: 鼠標右鍵單擊
          4. mousedown: 鼠標按鍵按下
          5. mouseup: 鼠標抬起事件
          6. mousemove: 鼠標移動事件
          7. mouseover: 鼠標移入事件
          8. mouseout: 鼠標移出事件
          9. mouseenter: 鼠標移入事件
          10. mouseleave: 鼠標移出事件
          11. ...
        */

    // 0. 獲取元素
    var box = document.querySelector('div')

    // 1.
    // 有鼠標左鍵單擊行為發生在 box 身上的時候觸發
    box.onclick = function () { console.log('鼠標左鍵單擊') }

    // 2.
    // 有鼠標左鍵雙擊行為發生在 box 身上的時候觸發
    // 你想觸發一個雙擊行為, 必須要由兩個單擊行為組成
    box.ondblclick = function () { console.log('鼠標左鍵雙擊') }

    // 3.
    box.oncontextmenu = function () { console.log('鼠標右鍵單擊') }

    // 4.
    box.onmousedown = function () { console.log('按鍵按下了') }

    // 5.
    box.onmouseup = function () { console.log('按鍵抬起了') }

    // 6.
    box.onmousemove = function () { console.log('鼠標移動了') }

    // 7.
    box.onmouseover = function () { console.log('鼠標移入') }

    // 8.
    box.onmouseout = function () { console.log('鼠標移出') }

    // 9.
    box.onmouseenter = function () { console.log('鼠標又移入了') }

    // 10.
    box.onmouseleave = function () { console.log('鼠標又移出了') }

    </script>
</body>

</html>

鍵盤事件

●keyup ：鍵盤抬起事件
●keydown ：鍵盤按下事件
●keypress ：鍵盤按下再抬起事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>

    <input type="text">

    <script>
        /*
          鍵盤事件
            + 所有元素都可以綁定鍵盤事件, 但是不是所有元素都能觸發
            + 一般綁定在 window 或者 document 或者 可選中元素 身上

          1. keydown: 鍵盤按下事件
            => 鍵盤上任何一個按鍵按下都會觸發
          2. keyup: 鍵盤抬起事件
          3. keypress: 鍵盤鍵入事件
            => 按鍵按下的時候觸發
            => 但是只有可以鍵入內容的按鍵和 回車鍵 會觸發
        */

        // 0. 獲取元素
        var inp = document.querySelector('input')

        // 1.
        inp.onkeydown = function () { console.log('鍵盤按下了') }

        // 2.
        inp.onkeyup = function () { console.log('按鍵抬起了') }

        // 3.
        inp.onkeypress = function () { console.log('鍵盤鍵入內容了') }
    </script>
</body>

</html>

表單事件

●focus：聚焦（獲取焦點）以后觸發
●blur：失去焦點以后觸發
●change : 表單內容改變事件，需要內容改變才觸發
●input : 表單內容輸入/刪除時觸發該事件
●reset：表單重置事件。事件需要綁定給 form 標簽。由 form 標簽內的 reset 按鈕觸發
●submit : 表單提交事件。事件需要綁定給 form 標簽。由 form 標簽內的 submit 按鈕觸發

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <!--
    form 標簽的重置行為
      + 讓該 form 標簽內所有的文本框內容清空
    form 標簽的提交行為
      + 會采集該 form 標簽內文本框的內容, 進行提交到指定位置
  -->
  <form action="">
    <input type="text">

    <!--
      當你點擊這個按鈕的時候
      會讓 form 標簽發生重置行為
    -->
    <input type="reset">

    <!--
      當你點擊這個按鈕的揮手
      回讓 form 標簽發生提交行為
    -->
    <input type="submit">
  </form>

  <script>
    /*
      表單事件
        + 依賴表單元素的行為觸發的事件

      1. focus: 聚焦事件
      2. blur: 失焦事件
      3. change: 改變事件
        => 保證你聚焦和失焦的時候, 內容不一致才會觸發
        => 時機: 失焦以后
      4. input: 輸入事件
        => 隨著輸入和刪除內容實時觸發
      5. reset: 表單重置事件
        => 事件需要綁定給 form 標簽
        => 通過點擊 重置 按鈕觸發
      6. submit: 表單提交事件
        => 事件需要綁定給 form 標簽
        => 通過點擊 提交 按鈕觸發
    */

    // 0. 獲取元素
    var inp = document.querySelector('input')
    var form = document.querySelector('form')

    // 1.
    inp.onfocus = function () { console.log('聚焦了') }

    // 2.
    inp.onblur = function () { console.log('失焦了') }

    // 3.
    inp.onchange = function () { console.log('改變了') }

    // 4.
    inp.oninput = function () { console.log('輸入內容了') }

    // 5.
    form.onreset = function () { console.log('表單重置了') }

    // 6.
    form.onsubmit = function () { console.log('表單提交了') }
  </script>
</body>

</html>

觸摸事件

●touchstart ：觸摸開始事件
●touchend ：觸摸結束事件
●touchmove ：觸摸移動事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>

    <div></div>

    <script>
        /*
          觸摸事件
            + 依賴屏幕觸摸行為觸發的事件

          1. touchstart: 觸摸開始, 手指接觸到屏幕瞬間
          2. touchmove: 觸摸移動, 手指在屏幕上移動
          3. touchend: 觸摸結束, 手指離開屏幕的瞬間
        */

        var box = document.querySelector('div')


        // 1.
        box.ontouchstart = function () { console.log('觸摸開始') }

        // 2.
        box.ontouchmove = function () { console.log('觸摸移動') }

        // 3.
        box.ontouchend = function () { console.log('觸摸結束') }
    </script>
</body>

</html>

拖拽事件

●在瀏覽器內元素發生了拖拽行為以后觸發的事件
拖拽元素的事件
1.dragstart 開始拖拽即將進入拖拽移動狀態的瞬間觸發
2.drag 拖拽移動拖拽元素在移動的時候實時觸發
3.dragend 拖拽結束拖拽元素放手的時候觸發
拖放元素事件
1.dragenter 拖拽元素進入拖放元素范圍的時候觸發(注意: 光標進入)
2.dragleave 拖拽元素離開拖放元素范圍的時候觸發(注意: 光標離開)
3.dragover 拖拽元素完全進入拖放元素范圍內觸發
pEle.ondragover = function () {
// 一段取消影響的代碼
return false
}
4.drop 拖拽元素在拖放元素內放手的時候觸發

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
      background-color: skyblue;

      position: absolute;
      left: 0;
      top: 0;

      transition: all 1s linear;
    }

    p {
      width: 300px;
      height: 300px;
      background-color: orange;

      position: absolute;

      left: 500px;
      top: 500px;
      transition: all 1s linear;
    }
  </style>
</head>
<body>

  <div draggable="true"></div>
  <p></p>

  <script>

    // 獲取元素
    var divEle = document.querySelector('div')
    var pEle = document.querySelector('p')

    // 拖拽元素的事件
    // 1. dragstart   開始拖拽
    //    即將進入拖拽移動狀態的瞬間觸發
    divEle.ondragstart = function () { console.log('你要把我拖走了') }

    // 2. drag   拖拽移動
    //    拖拽元素在移動的時候實時觸發
    divEle.ondrag = function () { console.log('你拖著我正在走') }

    // 3. dragend   拖拽結束
    //    拖拽元素放手的時候觸發
    divEle.ondragend = function () { console.log('你放手了') }


    // 拖放元素事件
    // 4. dragenter   拖拽元素進入拖放元素范圍的時候觸發(注意: 光標進入)
    pEle.ondragenter = function () { console.log('啊, 你把它拖進來了 !! ^_^') }

    // 5. dragleave   拖拽元素離開拖放元素范圍的時候觸發(注意: 光標離開)
    pEle.ondragleave = function () { console.log('你又把他帶走了') }


    // 6. dragover    拖拽元素完全進入拖放元素范圍內觸發
    pEle.ondragover = function () {
      // 一段取消影響的代碼
      return false
    }

    // 7. drop   拖拽元素在拖放元素內放手的時候觸發
    //    注意: 需要在 dragover 事件內進行阻止默認行為
    //    drop 事件會被 dragover 事件影響, 你想觸發 drop 事件, 就需要消除 dragover 事件的影響
    //    需要給元素綁定一個 dragover 事件, 并且在該事件內取消影響
    pEle.ondrop = function () { console.log('你在我身上放手了') }
  </script>
</body>
</html>

事件對象

●什么是事件對象？
●就是一個對象數據類型, 記錄了本次事件的所有信息
●也就是當你觸發了一個事件以后，對該事件的一些詳細的描述信息。就存儲在事件對象中
●例如：
○你觸發一個點擊事件的時候，是點擊的哪個標簽
○你觸發一個點擊事件的時候，你點在哪個位置了，坐標是多少
○你觸發一個鍵盤事件的時候，你按的是哪個按鈕
○...
●每一個事件都會有一個對應的對象來描述這些信息，我們就把這個對象叫做事件對象
●瀏覽器給了我們一個黑盒子，叫做 window.event，就是對事件信息的所有描述
○比如點擊事件
○你點在了 0，0 位置，那么你得到的這個事件對象里面對應的就會有這個點位的屬性
○你點在了 10, 10 位置，那么你得到的這個事件對象里面對應的就會有這個點位的屬性
○...

oDiv.onclick = function () {
  console.log(window.event.X軸坐標點信息)
  console.log(window.event.Y軸坐標點信息)
}

●這個玩意很好用，但是一般來說，好用的東西就會有兼容性問題
●在 IE低版本里面這個東西好用，但是在高版本IE 和 Chrome 里面不好使了
●我們就得用另一種方式來獲取事件對象
●在每一個事件處理函數的行參位置，默認第一個就是事件對象

oDiv.onclick = function (e) {
  // e 就是和 IE 的 window.event 一樣的東西
  console.log(e.X軸坐標點信息)
  console.log(e.Y軸坐標點信息)
}

●綜上所述，我們以后在每一個事件里面，想獲取事件對象的時候，都用兼容寫法

oDiv.onclick = function (e) {
  e = e || window.event
  console.log(e.X軸坐標點信息)
  console.log(e.Y軸坐標點信息)
}

事件對象內的信息--鼠標事件

●剛才即然說了，可以獲取到坐標點，那么接下來我們就學習一下怎么獲取坐標點
●我們的每一個點擊事件的坐標點都不是一對，因為要有一個相對的坐標系
●例如：
○相對事件源（你點擊的元素）
○相對頁面
○相對瀏覽器窗口
○...
●因為都不一樣，所以我們獲取的事件對象里面的屬性也不一樣
相對于點擊的元素來說
●offsetX 和 offsetY
●是相對于你點擊的元素的邊框內側開始計算

<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    width: 300px;
    height: 300px;
    padding: 20px;
    border: 10px solid #333;
    margin: 20px 0 0 30px;
  }
</style>
<body>
  <div></div>

  <script>
    var oDiv = document.querySelector('div')

    // 注冊點擊事件
    oDiv.onclick = function (e) {
      // 事件對象兼容寫法
      e = e || window.event

      console.log(e.offsetX)
      console.log(e.offsetY)
    }
  </script>
</body>

相對于瀏覽器窗口點擊的坐標點

●clientX 和 clientY
●是相對于瀏覽器窗口來計算的，不管你頁面滾動到什么情況，都是根據窗口來計算坐標

<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    width: 2000px;
    height: 2000px;
  }

  div {
    width: 300px;
    height: 300px;
    padding: 20px;
    border: 10px solid #333;
    margin: 20px 0 0 30px;
  }
</style>
<body>
  <div></div>

  <script>
    var oDiv = document.querySelector('div')

    // 注冊點擊事件
    oDiv.onclick = function (e) {
      // 事件對象兼容寫法
      e = e || window.event

      console.log(e.clientX)
      console.log(e.clientY)
    }
  </script>
</body>

相對于頁面點擊的坐標點

●pageX 和 pageY
●是相對于整個頁面的坐標點，不管有沒有滾動，都是相對于頁面拿到的坐標點

<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    width: 2000px;
    height: 2000px;
  }

  div {
    width: 300px;
    height: 300px;
    padding: 20px;
    border: 10px solid #333;
    margin: 20px 0 0 30px;
  }
</style>
<body>
  <div></div>

  <script>
    var oDiv = document.querySelector('div')

    // 注冊點擊事件
    oDiv.onclick = function (e) {
      // 事件對象兼容寫法
      e = e || window.event

      console.log(e.pageX)
      console.log(e.pageY)
    }
  </script>
</body>

事件對象內的信息--鍵盤事件

●剛才了解了一下鼠標事件，現在來聊聊鍵盤事件
●我們在鍵盤事件里面最主要的就是要做兩個事情
○判斷點擊的是哪個按鍵
○有沒有組合按鍵，shift + a / ctrl + b / ...
●我們先要明確一個問題，就是是不是所有元素都可以綁定鍵盤事件
○我們說事件有一個關鍵的東西是，該事件是由誰來觸發的
○一個 div 元素在頁面上，我怎么能讓一個鍵盤事件觸發在 div 上
○所以說，我們一般只給能在頁面上選中的元素（表單元素）和 document 來綁定鍵盤事件

document.onkeyup = function () { // code.. }
oInput.onkeyup = function () { // code.. }

確定按鍵

●我們的鍵盤上每一個按鍵都有一個自己獨立的編碼
●我們就是靠這個編碼來確定我們按下的是哪個按鍵的
●我們通過事件對象.keyCode 或者事件對象.which 來獲取
●為什么要有兩個呢，是因為 FireFox2.0 不支持 keycode 所以要用 which

document.keyup = function (e) {
  // 事件對象的兼容寫法
  e = e || window.event

  // 獲取鍵盤碼的兼容寫法
  var keyCode = e.keyCode || e.which

  console.log(keyCode)
}

常見的鍵盤碼（了解）

●8：刪除鍵（delete）
●9：制表符（tab）
●13：回車鍵（ebter）
●16：上檔鍵（shift）
●17： ctrl 鍵
●18： alt 鍵
●27：取消鍵（esc）
●32：空格鍵（space）
●...

組合按鍵

●組合案件最主要的就是 alt / shift / ctrl 三個按鍵
●在我點擊某一個按鍵的時候判斷一下這三個鍵有沒有按下，有就是組合了，沒有就是沒有組合
●事件對象里面也為我們提供了三個屬性
○altKey ：alt 鍵按下得到 true，否則得到 false
○shiftKey ：shift 鍵按下得到 true，否則得到 false
○ctrlKey ：ctrl 鍵按下得到 true，否則得到 false
○metakey：win鍵按下是true，否則是false
●我們就可以通過這三個屬性來判斷是否按下了

document.onkeyup = function (e) {
  e = e || window.event
  keyCode = e.keyCode || e.which

  if (e.altKey && keyCode === 65) {
    console.log('你同時按下了 alt 和 a')
  }
}

案例——實時顯示坐標點位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <h1>
        X 軸的坐標位置是 : <span class="x">0</span> <br>
        Y 軸的坐標位置是 : <span class="y">0</span>
    </h1>

    <script>
        // 0. 獲取元素
        var xBox = document.querySelector('.x')
        var yBox = document.querySelector('.y')

        // 1. 給 document 綁定 鼠標移動 事件
        document.onmousemove = function(e) {
            // 處理事件對象兼容
            e = e || window.event

            // 2. 拿到 x 和 y 的坐標點
            var x = e.pageX
            var y = e.pageY

            // 3. 給對應的元素內的文本進行賦值
            xBox.innerText = x
            yBox.innerText = y
        }
    </script>
</body>

</html>

案例——鼠標跟隨案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            margin: 100px;
        }

        li {
            width: 500px;
            height: 60px;
            position: relative;
            border: 1px solid #333;
            margin-bottom: 20px;
            font-size: 30px;
            background-color: #fff;
        }

        li>p {
            width: 300px;
            height: 200px;
            background-color: pink;
            position: absolute;
            left: 800px;
            display: none;
            z-index: 999;
        }
    </style>
</head>

<body>

    <ul>
        <li>我是標題1
            <p>我是標題1的說明文件1</p>
        </li>
        <li>我是標題2
            <p style="background-color: skyblue;">我是標題2的說明文件2</p>
        </li>
        <li>我是標題3
            <p style="background-color: orange;">我是標題3的說明文件3</p>
        </li>
    </ul>

    <script>
        // 1. 獲取所有 li 綁定事件
        var lis = document.querySelectorAll('ul > li')

        // 2. 循環遍歷 lis
        lis.forEach(function(item) {
            // item 就是每一個 li 標簽
            item.onmouseover = overHandler

            item.onmouseout = outHandler

            item.onmousemove = moveHanlder
        })

        // 把事件處理函數單獨定義在外面
        // 3.鼠標移入的事件處理函數
        function overHandler() {
            this.firstElementChild.style.display = 'block'
        }
        // 4.鼠標移出的事件處理函數
        function outHandler() {
            this.firstElementChild.style.display = 'none'
        }
        // 5.鼠標移動的事件處理函數
        function moveHanlder(e) {
            // 6.處理事件對象兼容
            e = e || window.event

            var x = e.offsetX + 5
            var y = e.offsetY + 5

            // 7. 給對應的 p 標簽進行賦值
            this.firstElementChild.style.left = x + 'px'
            this.firstElementChild.style.top = y + 'px'
        }
    </script>
</body>

</html>

案例——拖拽案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>

<body>

    <div></div>

    <script>
        // 獲取元素
        var div = document.querySelector('div')
        // 提前準備一個變量當做開關
        var flag = false
        // 鼠標按下
        div.onmousedown = function() {
            // console.log('盒子可以一起走')
            // 打開開關
            flag = true
        }
        // 鼠標抬起
        div.onmouseup = function() {
            // console.log('盒子自己呆著')
            flag = false
        }
        // 鼠標移動
        document.onmousemove = function(e) {
            // 開關判斷
            if (flag === false) return

            // 處理事件對象兼容
            e = e || window.event

            var x = e.clientX - 100
            var y = e.clientY - 100

            // 賦值給 div
            div.style.left = x + 'px'
            div.style.top = y + 'px'
        }
    </script>
</body>

</html>

案例——拖拽邊界限定案例

在線咨詢

上一篇：CSS盒子模型怎么畫？詳細教程帶你繪制模型圖
下一篇：HTML 文本格式化

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商