聚焦CSS2018工业互联网浪潮下的安全新探讨

新网8月29日电 28日下午，由腾讯公司主办、工业互联网产业联盟承办的第四届互联网安全领袖峰会(Cyber Security Summit2018,简称CSS2018)工业互联网分论坛在北京召开。本届工业互联网安全分论坛邀请到工信部网络安全管理局，中国船舶工业集团有限公司、科技委委员、信息安全学科带头人丁宇征，中控科技集团、宁波工业互联网研究院创始人褚健教授，中国信息通信研究院、安全所副主任柯皓仁，绿盟科技高级产品总监王晓鹏，腾讯安全副总裁方斌，中国信通院安全所副所长谢玮等各界嘉宾，围绕工业互联网安全行业解决方案、创新技术跨界融合、工业互联网应用安全等议题展开讨论。

工业互联网作为新一代信息技术与制造业深度融合的新兴业态和应用模式，其安全性更是在产业智能制造转型中起到至关重要的驱动作用。数字经济时代，信息安全已经不只是一种基础能力，还是产业发展、社会正常运转的驱动力，对于工业互联网的发展现状来说，安全则是保障产业健康发展的前置条件。会上，来自政府、企业、机构的专家和学者围绕“工业互联网浪潮下安全新探讨”主题展开了深入研讨。旨在通过技术引领更多不同方向、不同领域的创新发展。

机遇与挑战并存工业互联网成数字时代物联网新入口

随着全球新一轮科技革命蓬勃兴起，工业互联网作为新一代制造技术的产物，被众多业内人士称为物联网新入口，在未来社会发展中将成为重要成分，日益成为新工业革命的关键支撑。基于工业互联网开发、互联、跨域的特点，安全已经成为工业互联网发展的前提和基础，加强工业互联网安全保障已经成为工业信息安全工作的前沿与重点。

但在工业互联网的发展过程中也面临着诸多安全风险。“设备智能化带来的设备安全；数据的开放流动与共享带来的数据安全；控制环境开放化带来的控制安全；网络IP化、无线化及组网灵活化带来的网络安全；应用范围的扩大带来的应用安全”工业互联网中国船舶工业集团有限集团科技委委员、信息安全学科带头人丁宇征在论坛演讲《架构新体系迎接工业互联网安全新挑战》中深入剖析了工业互联网安全挑战。

工业互联网中国船舶工业集团有限集团科技委委员、信息安全学科带头人丁宇征

对此，来自绿盟科技高级产品总监王晓鹏也在会上提出了保障工业互联网安全的建议，王晓鹏在演讲《工业新业态下的安全思考》中指出：“安全驱动力一直在不断变化，风险如影随形。构建工业互联网安全体系则需要从边界安全、安全评估、业务感知、业务防护与安全运营五大项入手。全行业应共同构建起健康完善的工业互联网安全建设体系，以此来应对未来的各项挑战。”

提高安全保障能力加强工业互联网安全建设体系化

面对即将到来的数字时代和更多未知的安全威胁，如何快速构建起工业互联网安全体系成为工业互联网行业亟待解决的问题。在本届工业互联网安全分论坛上，腾讯安全副总裁方斌带来了有关“筑牢安全防线：新时期下的工业互联网安全探索”的主题演讲，分享腾讯安全在新时期的新探索。方斌表示，腾讯将坚持开放、合作、共享，推动工业互联网发展的战略，以腾讯“安全大脑”为核心，持续在工业互联网安全领域展开探索和实践。据方斌介绍，腾讯“安全大脑”融合AI、大数据、移动互联网、云计算、物联网等新兴技术，整合腾讯安全联合实验室和众多安全专家，结合腾讯近20年安全经验积累，对海量安全数据进行收集、分析、处理，从而提供安全态势感知、溯源分析、风险趋势预测、智能化辅助决策、安全协同处置等智慧安全能力，是腾讯着力打造智慧安全的核心引擎。

“工业互联网安全仍是一个相对全新的安全领域，具备高度复杂性和前沿性，单一企业难以提供全链路、全流程、全天候的工业互联网安全能力，开放、共享、合作，已经成为网络安全空间新形势下的共识。未来，腾讯将继续发挥自身优势、开放安全能力、联动行业力量，全面提升工业互联网安全防护水平，共建工业互联网安全新生态。”方斌在会上说到。

腾讯安全副总裁方斌

同时，中控科技集团、宁波工业互联网研究院创始人褚健教授与中国信息通信研究院安全所副主任柯皓仁也以演讲《工业控制安全问题及实例分析》与《工业互联网安全行业解决方案实践分析》也为工业互联网安全体系建设提供了新的思路。褚健教授表示，目前工业化发展水平层次不齐，中国具备“智能制造发展基础”的企业仅为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月份的该报告曾经指出：虽然过度捕捞和污染起到了加速作用，但它的消亡在很大程度上可归因于中国白鲟自然栖息地——长江中的多重水坝建设。“棺材中的最后一颗钉子”是1981年葛洲坝的修建，此举立竿见影地将中国白鲟从其唯一的产卵地（位于更远的上游）切断。

虽然野生捕获的淡水鱼为全世界数亿人提供了粮食安全和生计，但中国的白鲟已经不能再提供了。那份报告显示，尽管水坝不是这些鱼类灭绝的唯一原因，但它们起着重要作用。自20世纪50年代以来，全世界已经建造了40000多座大坝，还有3700多个大坝项目尚待完成。其中许多项目计划在被视为生物多样性热点的地区进行，包括亚马逊河、刚果河和湄公河。据估计，这些水坝将改变全世界93%的河流流量，这意味着它们对全球几乎所有淡水鱼栖息地都有影响。

2021年联合国一份十大灾难事件报告

而2022年7月21日IUCN发布的最新报告，再次把白鲟灭绝背后的生物多样性危机——我们当下所处的第六次生物大灭绝——摆到了人们眼前。

白鲟并不“孤独”。此外在仅存的鲟鱼物种中，长江鲟（Acipenser dabryanus）在世界自然保护联盟（IUCN）濒危物种红色名录中，从“极度濒危”（CR）升级变为“野外灭绝”（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小时内与您取得联系。

整合营销服务商