JavaScript事件对象

已于 2022-05-26 17:43:08 修改
阅读量431 收藏 2
点赞数 1
分类专栏： javascript学习笔记 文章标签： javascript 前端
于 2022-05-26 17:41:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61716556/article/details/124972892
版权

事件对象是什么？

事件对象表示事件的状态。由浏览器创建，具有鼠标位置坐标，事件元素位置坐标，元素事件是否冒泡等。

获取事件对象

当事件触发时，事件对象会作为参数传递给事件响应函数。我们定义一个形参就可以获得事件对象(使用arguments也可以获取)。即使不写形参，在事件响应函数中也可以直接使用event获取事件对象(亲测Edge，谷歌，火狐可以)。

div.onclick=function(){console.log(event); console.log("box响应点击");}

IE浏览器即将退役，在此不再写兼容IE浏览器需要的获取事件方式。如有兴趣可以自行了解。

事件对象的属性和方法

属性

event.target 返回触发事件的对象。与this不同，this指向绑定事件的对象。

<!DOCTYPE html>
<html lang="zh-Hans">
<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>测试</title>
  <style>
    #box{
      width:200px;
      height: 200px;
      background-color: #ccc;
    }
    #son{
      width: 150px;
      height: 150px;
      background-color: #0f0;
    }
    #inner{
      width: 100px;
      height: 100px;
      background-color: #0ff;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="son">
      <div id="inner"></div>
    </div>
  </div>
  <script>
    var box=document.getElementById("box");
    box.onclick=function(){
      console.log(event.target);
      console.log(this);
    }
  </script>
</body>
</html>

当点击最小元素时，可以通过输出内容看出两者的差别。前者是id为inner的元素，后者是id为box的元素。

event,srcElement 上一个属性的非标准别称。可以理解为ie浏览器的event.target。虽然其他浏览器也支持这个属性，但应避免使用这个非标准属性(说不定哪一天就废弃了)。

event.type 返回事件的类型。只读。eg:click事件会返回click。

event.currentTarget 指向绑定事件的元素，效果和this一样（能使用this也可以使用这个属性）。老版本的ie不兼容。

event.cancelable 返回一个布尔值，指定事件是否可以取消。可以取消返回true，反之返回false。

针对点击，提交等操作一般可以取消。我们可以使用事件的preventDefault方法来取消事件。 

    var box=document.getElementById("box");
    box.onclick=function(){
      console.log(event.cancelable);
    }

 click事件就是可以取消的。输出值为true。

event.cancelBubble 可修改的布尔值。将这个属性设置为true可以阻止事件冒泡传递和捕获传递。也可以理解为阻止事件传递。

<!DOCTYPE html>
<html lang="zh-Hans">
<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>测试</title>
  <style>
    #box{
      width:200px;
      height: 200px;
      background-color: #ccc;
    }
    #son{
      width: 150px;
      height: 150px;
      background-color: #0f0;
    }
    #inner{
      width: 100px;
      height: 100px;
      background-color: #0ff;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="son">
      <div id="inner"></div>
    </div>
  </div>
  <script>
    var box=document.getElementById("box");
    var son=box.children[0];
    var inner=son.children[0];
    // box.onclick=function(){
    //   console.log("box响应点击");
    // }
    // son.onclick=function(){
    //   console.log("son响应点击");
    // }
    // inner.onclick=function(){
    //   event.cancelBubble=true;
    //   console.log("inner响应点击");
    // }
    box.addEventListener("click",function(){event.cancelBubble=true;console.log("box响应点击")},true);
    son.addEventListener("click",function(){console.log("son响应点击")},true);
    inner.addEventListener("click",function(){console.log("inner响应点击")},true)
  </script>
</body>
</html>

这里点击内部的inner 事件就不会再传递到其他元素。不论是冒泡还是捕获传递。

event.bubbles 返回一个布尔值，说明该事件是否可以冒泡。例如onclick返回真，onmouseenter返回假。这个属性与是否使用addEventListener中的捕获传递无关。

<!DOCTYPE html>
<html lang="zh-CN">
<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>测试网页</title>
</head>
<body>
    <p>点击按钮查看 onclick 事件是否为冒泡事件。</p>
    <button>试一试</button>
    <script>
    var btn=document.getElementsByTagName("button")[0];
    // btn.addEventListener("mouseenter",function(){alert(event.bubbles);},true);//输出为假
    // btn.addEventListener("click",function(){console.log(event.bubbles)},false);//输出为真
    </script>
</body>
</html>

event.defaultPrevented 返回一个布尔值，表示该事件对象是否调用了preventDefault()方法。

<!DOCTYPE html>
<html lang="zh-Hans">
<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>测试</title>
  <style>
    #box{
      width:200px;
      height: 200px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="box">
  </div>
  <input type="text" name="" id="">
  <script>
    var box=document.getElementById("box");
    var btn=box.nextElementSibling;
    box.addEventListener("click",function(){
      if(btn.value!=""){
        event.preventDefault();
      }
      console.log(event.defaultPrevented);
      console.log("box响应点击");
      box.style.backgroundColor="rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
    },true);
  </script>
</body>
</html>

 实例中如果输入不为空字符串，就会启用preventDefault方法。而后就会输出defaultPrevent的值。事件函数实现了点击切换一个随机背景颜色的效果。

event.istrusted 返回一个布尔值，表示事件是否可信。 (使用范围并不广泛)

当事件是由用户创建的时，返回值为true(当然信任开发者了)。当事件是由脚本创建，修改，通过dispatchEvent派发时，返回值为false。

event.eventPhase 表示事件流当前处于哪一阶段。更多细节可到

图片来自MDN 

event.returnValue 返回一个布尔值。表示事件的默认操作是否被阻止。一般为true。设置为false时可以起到阻止默认操作的作用。

    a.onclick=function(){
      event.returnValue=false;//不会进行页面跳转
    }

也可以使用preventDefault方法阻止，然后输出这个属性检测效果。

    var box=document.getElementById("box");
    var a=box.children[0];
    // box.addEventListener("click",function(){
    //   // event.preventDefault()//该语句调用就会阻止默认行为，阻止后下面的returnValue就为false
    //   console.log(event.returnValue);//不调用上面语句这里会输出true
    // },true);

event.timeStamp 返回事件发生时的时间戳（从文档加载到事件触发的毫秒数）。

<!DOCTYPE html>
<html lang="zh-Hans">
<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>测试</title>
  <style>
    #box{
      width:200px;
      height: 200px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="box">
    <a href="www.baidu.com">百度</a>
  </div>
  <script>
    window.onload=function(){
      console.log(event.timeStamp);
    }
    var box=document.getElementById("box");
    var a=box.children[0];
    a.onclick=function(){
      event.returnValue=false;
      console.log(event.timeStamp);
    }
  </script>
</body>
</html>

event.composed 返回一个布尔值，指定该事件是否可以从shadowDOM传递到一般的DOM

方法

event.preventDefault() 无参数，返回值为undefined。如果当前的默认事件可以阻止，该方法调用后就会阻止该默认事件发生。但是不影响这个事件的传递就是了。例如针对于超链接的阻止跳转。

a.onclick=function(){
      event.preventDefault();
      console.log(event.timeStamp);
    }

 阻止了默认事件的发生，但是不影响事件函数的触发。还是会输出时间戳，但是不会跳转页面。

event.stopImmediatePropagation() 使用该方法后，同一类型的其他事件监听器就不会执行，并且该方法也可以阻止事件的传递。

<!DOCTYPE html>
<html lang="zh-Hans">
<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>测试</title>
  <style>
    #box{
      width:200px;
      height: 200px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="box">
  </div>
  <script>
    var box=document.getElementById("box");
    box.addEventListener("click",function(){
      console.log("第一个执行");
    },false);
    box.addEventListener("click",function(){
      // event.stopImmediatePropagation();//不执行这一句的话就会顺序执行三个事件响应函数
      // 再执行document的点击函数
      console.log("第二个执行");
    },false);
    box.addEventListener("click",function(){
      console.log("第三个执行");
    },false);
    document.addEventListener("click",function(){
      console.log("domcument的响应函数");
    })
  </script>
</body>
</html>

event.stopPropagation() 该方法阻止事件的传递，不管是冒泡传递还是捕获传递都会阻止。

//获取元素部分
    var box=document.getElementById("box");
    var son=box.children[0];
    var inner=son.children[0];
    //绑定事件函数
    // box.onclick=function(){console.log("box响应点击");}
    // son.onclick=function(){console.log("son响应点击");}    
    // inner.onclick=function(){console.log("inner响应点击");}  
    box.addEventListener("click",function(event){event.stopPropagation();console.log("box响应点击");},true); 
    son.addEventListener("click",function(){console.log("son响应点击");},true);
    inner.addEventListener("click",function(){console.log("inner响应点击");},true);

这时阻止了事件进一步向下传递(向内部传递)。这里展示的是阻止捕获。

 这个方法也可以阻止事件冒泡。与上面不同的是需要将stopPropagation在内层的元素事件中使用。

    //获取元素部分
    var box=document.getElementById("box");
    var son=box.children[0];
    var inner=son.children[0];
    //绑定事件函数
    box.onclick=function(){console.log("box响应点击");}
    son.onclick=function(){console.log("son响应点击");}    
    inner.onclick=function(){event.stopPropagation();console.log("inner响应点击");}

 这里在冒泡传递的情况下，由inner元素向上传递事件，在起始的位置就被stopPropagation方法阻止冒泡。即使点击内层元素也只有一个元素响应事件。

event.composedPath() 方法，详细可见 。

以上就是本次学习内容的分享，本文参考MDN

部分废弃方法属性没有涉及(应该也不会再回来了)，部分属性方法使用频率低或不太好用，没有大篇幅展开叙述。

本文如有错误或不足之处，欢迎指正。

✪憑星月✪
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
理解JavaScript事件对象
10-22
主要为大家介绍了JavaScript事件对象，了解JavaScript事件
javascript 事件对象
qq_38358436的博客
08-23 71
btn.onclick = function (event) { // event 就是事件对象 var e = event || window.event; // window.event是兼容低版本IE的写法 } event 常见属性 属性 用途 clientX 光标相对于该网页的水平位置 clientY 光标相对于...
JavaScript事件对象.
从盲流子到程序员
12-15 145
window.onclick = function(ev) { //事件对象 var oEvent = ev || event; //兼容IE和谷歌. //ie=event 谷歌=ev alert(oEvent.clientX + ',' + oEvent.clientY); //event是事件对象, 可看鼠标左右中分别的事件 } ...
JavaScript事件对象深入详解
10-17
主要介绍了JavaScript事件对象,结合实例形式深入分析了javascript DOM、IE及其他浏览器相关事件对象操作技巧与注意事项,需要的朋友可以参考下
JavaScript 事件对象的实现
10-29
前我写过一篇关于JavaScript如何实现面向对象编程的文章。今天，我写这篇文章跟大家讨论一下，如何实现事件。
JavaScript 事件对象介绍
10-24
主要介绍了JavaScript 事件对象介绍,需要的朋友可以参考下
JavaScript事件对象event用法分析
10-18
主要介绍了JavaScript事件对象event用法,结合实例形式分析了事件对象event中常用的属性、方法、相关操作技巧与注意事项,需要的朋友可以参考下
JavaScript-事件对象
wujunlei1595848的博客
06-01 447
触发某个事件时会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。 事件的元素 事件的类型 其它与事件相关的信息 所有浏览器都支持event对象，但存在差异。 event对象在标准的现代浏览器中会作为参数传入到事件的事件处理函数。 DOM中的事件对象 属性/方法 类型 读写 说明 bubbles Boolean 只读 表明事件是否...
JavaScript之事件对象
smshuxue的专栏
11-10 638
JavaScript之事件对象…       基于不同浏览器开发的开发人员都知道，获取事件信息是很重要的。所以，会创建包含关于刚刚发生的事件的信息事件对象，包含的信息如下：引起事件的对象；事件发生时鼠标的信息；事件发生时键盘的信息；事件对象只在发生事件时才被创建，且只有事件处理函数才能访问。所有事件处理函数执行完毕后，事件对象就被销毁。 （一） 定位         在IE中，事件对象是
Javascript中的事件对象
Hoshizola的博客
03-20 191
1、事件对象 在DOM中发生事件时，所有相关信息都会被收集并存储在一个名为event的对象中。这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型、可能与特定事件相关的任何其他数据等。 2、 DOM事件对象 在DOM合规的浏览器中，event对象是传给事件处理程序的唯一参数。不管以DOM0还是DOM2指定事件处理程序，都会传入这个event对象。 DOM事件对象的属性和方法 currentTarget：当前事件处理程序所在的元素；target：事件目标 **在事件处理程序内部，this对象始终等
【JavaScript】一文了解事件对象
ztK63LrD的博客
07-26 471
详解事件对象
Event 对象
小超人日常码字
09-08 117
Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ target 返回触发此事件的元素（事件的目标节点）。 type 返回当前 Event 对象表示的事件的名称。 ...
JS事件对象
qq_48439911的博客
04-13 1700
什么是事件对象 eventTarget.onclick = function(event) {} eventTarget.addEventListener('click', function(event) {}） 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt ，现在一般写 e。 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它
JS的事件对象
demin3278的博客
02-19 93
一、什么是事件对象（黑匣子） 　　（一）事件： 　　　　onclick 　　　　ondblclick 　　（二）当绑定对象的事件被触发时，所发生的所有详细信息都会保存在一个地方，这个地方称为事件对象 　　　　 二、如何获取事件对象 　　（一）标准浏览器：给事件触发函数传递的第一个参数； 　　（二）IE浏览器：全局对象的属性window.event； 　　（三）兼容：ev...
JavaScript事件
最新发布
09-09
在JavaScript中，我们可以通过为需要事件处理的DOM元素对象添加事件和事件处理程序来实现事件的绑定。具体的实现方式是，使用DOM元素对象的属性来指定事件，并将对应的事件处理程序赋值给该属性。例如，DOM元素对象....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值