js事件对象

最新推荐文章于 2024-02-19 15:43:50 发布
最新推荐文章于 2024-02-19 15:43:50 发布
阅读量132 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36744553/article/details/114966127
版权

JS事件

感谢:尚硅谷李立超老师的讲解

事件对象

  • 当事件的响应函数被触发时,浏览器每次都会将一个事件对象实参 传递进响应函数,可以通过arguments[0]获取,也可以定义一个形参

  • 在事件中对象中封装了当前事件相关的一切信息,比如,鼠标的坐标,键盘哪个按键被按下,鼠标滚轮滚动的方向

  • 在ie8中,响应函数被触发时,浏览器不会传递事件对象,在ie8及以下的浏览器中,是将事件对象作为window对象的属性保存的

所以为解决事件对象的兼容性通常写做 :event = event||window.event;

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

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

<body>

  <script>
    window.onclick = function (event) {
      console.log(arguments[0]);
      console.log(event);
      //ie8 中不会传递实参对象,因为ie中event是window的一个属性,所以e可能为undefined,兼容ie8及以下浏览器
      event = event || window.event;
    }
  </script>

</body>

</html>

在这里插入图片描述

事件的冒泡

  • 所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发

  • 在开发中大部分情况下的冒泡都是有用的.如果不希望发生事件冒泡可以通过事件对象来取消冒泡

event = event || window.event;
event.cancelBubble = true;//已废弃
event.stopPropagation();//建议使用

事件的委派

  • 指将事件统一绑定给元素的共同祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件
  • 事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能

事件的绑定

var btn = document.getElementById("btn");
btn.onclick = function(){
	console.log("点击了btn")
}

addEventListener()

  • 通过该方法也可以为事件对象绑定响应函数

    • 参数:

      1. 事件的字符串,不要on

      2. 回调函数,当事件触发时该函数会被调用

      3. 是否在捕获阶段触发事件,需要一个布尔值,一般都是false

    • 使用addEnventListener() 可以同时为一个元素的相同事件同时绑定多个响应函数,这样当事件被触发时,响应函数将会按照绑定顺序依次执行

    • 这个方法不支持IE8及以下的浏览器

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

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

  </style>
</head>

<body>
  <button id="btn">按钮</button>
  <script>
    var btn = document.getElementById("btn");

    btn.addEventListener("click", function () {
      console.log(1)
    }, false)

    btn.addEventListener("click", function () {
      console.log(2)
    }, false)

    btn.addEventListener("click", function () {
      console.log(3)
    }, false)
  </script>

</body>

</html>

在这里插入图片描述

attachEvent()

  • 在IE8中可以使用attchEvent() 来绑定事件
    • 参数:
      1. 事件的字符串,要on
      2. 回调函数
    • 这个方法也可以同时为一个事件绑定多个处理函数,不同的是它是后绑定的先执行,执行顺序和addEventListener()相反
<!DOCTYPE html>
<html lang="en">

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

  </style>
</head>

<body>
  <button id="btn">按钮</button>
  <script>
    var btn = document.getElementById("btn");

    btn.attachEvent("onclick", function () {
      console.log(1)
    })

    btn.attachEvent("onclick", function () {
      console.log(2)
    })

    btn.attachEvent("onclick", function () {
      console.log(3)
    })
  </script>

</body>

</html>

在这里插入图片描述

addEventListener 和 attachEvent 的兼容写法

  • 首先明确 addEventListener 和 attachEvent 的区别,this的指向不同,addEventListener 的this 指向的是事件对象,attachEvent 的this指向的是window
<!DOCTYPE html>
<html lang="en">

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

  </style>
</head>

<body>
  <button id="btn">按钮</button>
  <script>
    var btn = document.getElementById("btn");

    btn.addEventListener("click", function () {
      alert(this)
    }, false)
  </script>

</body>

</html>

在这里插入图片描述

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

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

  </style>
</head>

<body>
  <button id="btn">按钮</button>
  <script>
    var btn = document.getElementById("btn");

    btn.attachEvent("onclick", function () {
      alert(this)
    }, false)
  </script>

</body>

</html>

在这里插入图片描述

  • 兼容不同浏览器需要统一this的指向,通过call() 方法指定调用回调函数的对象为当前的事件对象
<!DOCTYPE html>
<html lang="en">

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

  </style>
</head>

<body>
  <button id="btn">按钮</button>
  <script>
    var btn = document.getElementById("btn");

    bind(btn, "click", function () {
      alert(this);
    })

    function bind(obj, eventStr, callback) {

      if (obj.addEventListener) {
        //大部分浏览器兼容的形式
        obj.addEventListener(eventStr, callback, false)
      } else {
        //ie8及以下
        obj.attachEvent("on" + eventStr, function () {
          callback.call(obj);
        })
      }
    }
  </script>

</body>

</html>

在这里插入图片描述

事件的传播

事件的传播的三个阶段

  1. 捕获阶段
    • 在捕获阶段时从最外层的祖先元素,向目标元素进行事件捕获,但是默认此时不会触发事件
  2. 目标阶段
    • 事件捕获到目标元素,捕获结束开始在目标元素上触发事件
  3. 冒泡阶段
    • 事件从目标元素向它的祖先元素传递,一次触发祖先元素上的事件

如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true,一般情况下我们不希望捕获阶段触发事件,所以这个参数一般都是false,这个值只控制事件执行的阶段,还是会向上冒泡

注:IE8及一下浏览器中没有捕获阶段

例:同时设置父元素和子元素的事件触发为捕获阶段,通过点击子元素时,可以看到,外层的父元素先响应了事件

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    #test {
      height: 200px;
      background-color: orangered;
    }
  </style>
</head>

<body>
  <div id="test">
    <button id="btn">按钮</button>
  </div>
  <script>
    var btn = document.getElementById("btn");

    var divTest = document.getElementById("test");

    btn.addEventListener("click", function () {
      console.log("点击了按钮!")
    }, true)

    divTest.addEventListener("click", function () {
      console.log("点击了div!")
    }, true)
  </script>

</body>

</html>

在这里插入图片描述

marloues
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习笔记之JS事件对象
10-24
JavaScript事件对象是当事件发生时，浏览器自动创建的一个包含事件相关信息的临时对象。它保存了事件发生时的各种信息，比如事件的类型、鼠标坐标、键盘按键信息等。通过事件对象，我们可以访问到触发事件的元素、...
JavaScript 事件对象的实现
10-29
综上所述，JavaScript事件对象的实现是基于构造函数、原型、this关键字以及函数的高阶特性构建的。这种实现方式使得在JavaScript中可以灵活地实现面向对象的编程，并且让开发者有能力根据应用需求创建自定义事件和...
JS事件对象
qq_48439911的博客
04-13 1732
什么是事件对象 eventTarget.onclick = function(event) {} eventTarget.addEventListener('click', function(event) {}） 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt ，现在一般写 e。 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它
JS的事件对象详解
qq_44741577的博客
02-01 1462
当事件被触发时（如onclick事件），浏览器会自动创建一个名为event的JavaScript对象，这个对象存在于window对象中。window.event(window可以省略)表示当前正在处理的事件的详细信息（如事件类型（等）、目标元素、鼠标位置、按键状态等）。JavaScript中的事件对象是一个非常有用的工具，可以在事件处理程序中访问和操作许多方面的事件信息。event.type - 获取事件类型（例如，“click”、"mousedown"等）。
JavaScript 事件对象
最新发布
qq_52265298的博客
02-19 1171
事件对象（Event Object）是在触发事件时被创建的对象，它包含了与事件相关的信息和属性。在 Web 开发中，事件对象通常用于处理用户与页面交互的各种事件，比如鼠标点击、键盘按下、表单提交等。事件对象提供了访问事件的详细信息的途径，开发人员可以通过事件对象来获取触发事件的元素、事件类型、鼠标位置、键盘按键信息等。通过访问事件对象的属性和方法，开发人员可以编写响应特定事件的 JavaScript 代码，实现页面交互和动态效果。
JavaScript事件对象参数
y516369的博客
08-11 1354
JavaScript事件对象参数
【js基础】事件对象
在热爱技术的路上一直前行。
05-26 4095
1.什么是事件对象 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。 简单理解：事件发生后，跟事件有关的一系列信息数据的集合都放到整个对象里面，这个对象就是事件对象event，它有很多属性和方法。 结果： 可以将代码中的event换成e，当我们注册事件时，event对象会被系统自动创建，并以此传递给事件处理函数。我们不需要传递实参。 2. 事件对象的兼容性方案 3. 事件对象的常见属性和方法 事件对象属性和方法 说明 e.target 返
有关javascript中事件对象e
qq_44718039的博客
11-15 2701
js中的事件对象e
JavaScript中的事件对象、事件对象的属性
slom_fxt的博客
02-02 577
JavaScript中的事件对象、事件对象的属性
js事件触发对象
kai_99的博客
07-01 209
js操作dom拿到事件对象后取元素的两种方式 ● e.target：触发事件的元素 ● e.currentTarget：绑定事件的元素
浅谈js中的事件对象及常用方法
热门推荐
object not found的博客
08-24 2万+
默认情况下，和clientX一样，如果元素中有定位属性，则基于该元素offsetParent的距离，如果元素自身有定位属性，则距离自身左侧/顶部的距离。a标签跳转，在网页中，有很多时候，我们需要借助a标签的特性，但是又不想发生任何跳转，我们就需要取消浏览器默认行为。事件对象是在所有的事件中都会自动生成的一个对象。诸如a标签跳转，表单提交，鼠标右键打开菜单，这些操作都是浏览器的默认行为。鼠标点击的位置，距离浏览器窗口左侧/顶部的距离。鼠标点击的位置距离屏幕左侧/顶部的距离。IE8的时候，是不能用这个e的。
Web基础——JavaScript之事件绑定与事件对象
威威的博客
01-12 1万+
目录1.事件的绑定2.事件的绑定（注意事项）3.失去焦点和获得焦点4.键盘事件5.鼠标事件6.表单事件7.页面加载事件8.下拉框事件9.事件对象10.currentTarget和target的区别11.事件的冒泡现象12.阻止事件冒泡的行为13.元素的默认行为14.事件捕获15.事件委托16.设置元素的自带属性以及设置元素的css样式17.开关案例18.排他思想19.图片跟随鼠标20.定位到搜索框 1.事件的绑定 <!DOCTYPE html> <html> <head&gt
JavaScript 事件对象介绍
10-24
JavaScript事件对象是JavaScript编程中的一个重要概念，它在事件处理中扮演着核心的角色。事件对象主要用于提供事件的上下文信息，允许开发者在事件处理函数中获取事件相关的详细信息，如事件类型、触发事件的元素、...
JavaScript事件学习小结（三）js事件对象
10-22
总的来说，JavaScript事件对象是前端开发中不可或缺的一部分，它使得开发者可以对用户的行为做出响应，实现丰富的交互效果。掌握事件对象的使用和原理，对于成为一名优秀的前端开发者至关重要。
前端使用RSA(jsencrypt.js)加密数据传递到后端解密失败
码码猿
08-26 8083
前端使用RSA加密数据传递到后端解密失败 前言: 做项目的时候,需要给三方app提供一个H5的登录页,要求前端对重要的数据进行RSA加密 前端使用的是vue框架,所以直接使用了jsencrypt.js //1.安装jsencrypt npm i jsencrypt //2.在main.js文件中引入 import JsEncrypt from 'jsencrypt' //3.新建一个名为jseUtil.js的文件 const publicKey = "";//后端提供的公钥 function
vue cli 生成不带.git文件的vue项目
码码猿
11-18 2784
使用vue cli 创建不带.git的项目 根据开发要求,版本控制需要使用svn,而不使用git,使用脚手架创建项目时增加 “- n” 选项即可 不带 -n 会生成.git文件 vue create test1 带 -n 不会生成.git 文件 vue create test2 -n 测试结果如下图: test1项目生成了.git文件 test2项目未生成.git文件 ...
css属性之padding和margin
码码猿
12-15 2686
css属性之padding和margin padding和margin的作用（重要） padding:内边距(影响盒子的大小) padding-top:上内边距 ; padding-right:右内边距;padding-bottom:下内边距 ;padding-left:左内边距 简写时: padding:10px 代表上下左右四个内边距相等都为10px ​ padding:10px 20px 代表上下内边距10px,左右内边距20px ​ padding:10px 20px 30px
js中的 json和eval函数
码码猿
03-18 2448
JSON 和 eval 函数 感谢:尚硅谷李立超老师的讲解 JSON 是什么? JSON就是一个特殊格式的字符串 ,这个字符串可以被任意语言识别,并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互 JSON和js对象的格式一样,只不过JSON字符串中的属性名必须加双引号,其他的和js的语法一致 //js对象 var obj = { name:"孙悟空", age:28, gender:"男" } //js的属性类型都是string类型的,同时去掉空格和换行,所以改写为 v
vue使用qrcodejs2生成二维码,安卓部分手机生成失败
码码猿
11-18 1589
vue使用qrcodejs2生成二维码,安卓手机生成失败 项目中需要使用qrcodejs2生成一个二维码,调试测试都ok,但是部署之后真机访问,始终无法生成二维码,debug之后发现问题如下: qrcodejs2 内获取安卓版本方法无法兼容9以上的版本 开发的手机版本号:“Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值