jQuery_事件对象

jQuery_事件对象 | 学习笔记

2022-07-05 301

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 快速学习jQuery_事件对象

开发者学堂课程【jQuery开发教程：jQuery_事件对象】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/362/detail/4289

一、概要

1、 event.currentTarget ：

当前事件的监听者

2、 event.target ：

当前事件的目标

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
// 引入 jQuery
  <script src="jquery-2.2.1.min.js"></script>
</head>
<body>
  <div>
    <p>Click me</p>
  </div>
<script>
  $(function(){
// 选中 div ，添加点击事件
    $("div").on("click",function(e){
// 打印内容
      console.log($(e.currentTarget));//div 事件的监听者
      console.log($(e.target));//p 事件的目标
      console.log($(this));
  })
  })
</script>
</body>
</html>

效果截图：

打开后台 Console ，点击标签，15行打印的是 div ，16行打印的是 p 标签，17行打印的也是一个 div 。

图片1.png

3、event.delegateTarget ：

当前事件的委托者

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
// 引用 jQuery
  <script src="jquery-2.2.1.min.js"></script>
</head>
<body>
  <div>
    <p>click me</p>
  </div>
<script>
  $(function(){
// 选中 div ，绑定 on 事件
    $("div").on("click","p",function(e){
// 打印当前对象使用指针的内容
    console.log($(this).html());
// 添加样式
    ($(e.delegateTarget)).css("border","1px solid red");
  })
  })
</script>
</body>
</html>

效果截图：

打开后台，点击标签，打印的是它的内容，会出现一个红色的边框。

图片2.png

4、event.pageX ：

鼠标相当于文档左边缘的位置

5、 event.pageY ：

鼠标相当于文档上边缘的位置

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
// 引用jQuery
  <script src="jquery-2.2.1.min.js"></script>
  <style>
    #log{
      width: 300px;
      height: 300px;
      background-color: aquamarine;
  }
</style>
</head>
<body>
  <div id="log"></div>
<script>
  $(function(){
// 给鼠标移动事件
    $("#log").on("mousemove",function(e){
// 打印
    console.log("pagex="+e.pageX+" pagey"+e.pageY);
  })
  })
</script>
</body>
</html>

效果截图：

打开后台，鼠标在方块内移动，就会看到会打印出 pagex和

pagey。

图片3.png

6、 event.type ：

获取当前的事件类型

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
// 引用 jQuery
  <script src="jquery-2.2.1.min.js"></script>
  <style>
    #log{
      width: 300px;
      height: 300px;
      background-color: aquamarine;
    }
</style>
</head>
<body>
<div id="log"></div>
<script>
  $(function(){
  $("#log").on("click",function(e){
    console.log("pagex="+e.pageX+" pagey"+e.pageY);
    alert(e.type);
  })
  })
</script>
</body>
</html>

效果截图：

在方块内点击会弹出窗口。

图片4.png

7、event.preventDefault() ：

阻止默认事件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
// 引用 jQuery
  <script src="jquery-2.2.1.min.js"></script>
</head>
<body>
// 跳转到百度
  <a href="http://www.baidu.com">baidu</a>
<script>
  $(function(){
    $("a").click("click",function(e){
      e.preventDefault();
      alert("haha");
  })
  })
</script>
</body>
</html>

效果截图：

点击标签会弹出窗口，如果不阻止会跳转到百度页面。

图片5.png

8、 event.stopPropagation() ：

阻止冒泡事件，用法与7类似。

jQuery_事件对象 | 学习笔记