jQuery事件对象

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/02/ 12:53-->
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body {
      width: 2000px;
      height: 2000px;

    }
    .divClass {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      /*margin-top: 10px;*/
      position: relative;
      top: 100px;
      left: 100px;
    }
  </style>
</head>
<body>
    <div id="divId" class="divClass">
      <input type="button" value="我是按钮" id="buttonId"/>
      <br/><br/>
      <a href="https://www.baidu.com">百度一下，你就知道</a>
    </div>
</body>
</html>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    /**
     * 1.什么是 事件对象
     * 注册一个事件,系统就会帮我们生成一个 对象记录 这个事件 触发时候的 一些信息
     * 比如 触发事件 的时候 有没有 按住某个键,再比如 触发 这个事件的时候的一些 坐标信息....
     * jQuery中用 事件参数e 来获取.
     * jQuery的 事件对象 是对 原生js 事件对象 的一个封装,帮你处理好了 兼容性
     * 在IE8中, 原生获取的时候是 window.event
     */
    $('#divId').on('click', function (e) {
      // console.log(e);

      // 2.事件对象中有常用的三个坐标
      // console.log("screen " + e.screenX + ":" + e.screenY); // 触发点: 屏幕左上角的值
      // console.log("client " + e.clientX + ":" + e.clientY); // 触发点: client/可视区左上角的值
      // console.log("page " + e.pageX + ":" + e.pageY);       // 触发点: 页面左上角的值

      // 3.
      alert("我是 div的单击事件 ");

    });

    // 3.给按钮注册一个单击事件
    // $('#buttonId').on('click', function (e) {
    //   alert("我是按钮的 单击");
    //   e.stopPropagation(); // 阻止事件冒泡
    // });

    // 4.给a标签注册一个单击事件
    // $('a').on('click', function (e) {
    //   alert("我是 a标签 的 单击事件");
    //   // // 阻止 事件冒泡
    //   // e.stopPropagation();
    //   // // 阻止默认行为-阻止 a标签 的 默认跳转
    //   // e.preventDefault();
    //   return false; // 既能 阻止 事件冒泡, 又能阻止 默认行为
    // });

    // 5.给页面注册键盘按下事件
    $(document).on('keydown', function (e) {
      // e.keyCode能获取的是 哪个键
      console.log(e.keyCode);
    });

  });
</script>