jQuery事件对象




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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

在这里插入图片描述

相关阅读:
自考重庆工商大学难不难？
Creator3.x 绘制六边形
面试必备(背)--RocketMQ八股文系列
Spring Cloud Alibaba-Sentinel规则
【重学前端】003-JavaScript：正统的面向对象语言
Python中的Super详解
go 模板 ——动态数据和静态数据结合
java面试题-并发编程相关面试题
使用CFimagehost源码搭建无需数据库支持的PHP免费图片托管私人图床
idea 设置文件忽略git版本控制

原文地址：https://blog.csdn.net/beyondx/article/details/126121742