25-event

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

第二十五章event

event

event事件对象是伴随着事件触发而产生的一个内置对象，它存储了关于该事件的各种信息，比如鼠标位置、按键信息等等，同时也可以它也提供了很多控制事件传递的方法。

1.兼容

IE8以下使用全局event，其他浏览器使用事件函数的第一个参数，兼容写法类似于：

ele.onclick = function(ev){
    ev = ev || window.event;
};

2.鼠标位置

  • client

    clientX clientY鼠标到可视区的距离。

  • page

    pageX pageY 鼠标到文档的距离。

  • offset

    offsetX offsetY 鼠标到触发事件的元素的距离。

  • screen

    screenX screenY 鼠标到用户屏幕的距离。

  • 父级距离

    x y 鼠标到触发事件的元素的父级的距离。

3.阻止冒泡和阻止默认事件

  • 阻止冒泡

    事件会沿着DOM结构一层一层向上传递，这个过程称为事件冒泡。

    阻止冒泡的写法e.cancelBubble = true 或者 e.stopPropagation()。

  • 阻止默认事件

    浏览器中很多操作都有默认的行为，比如右键，我们称之为默认事件。

    阻止冒泡的写法e.returnValue = false 或者 e.preventDefault()。

4.DOM 2级事件

DOM的API也做过很多次的调整升级，在初始DOM和第二次升级DOM的时候，对绑定事件的方式做出了更新，初始DOM，也就是DOM 0级时规定事件的绑定方式为 on+事件名 的方式，也就是我们前面学习过的方式，DOM 2级时添加了一种新的绑定事件的方式：addEventListener ，低版本IE浏览器为：attachEvent。他们有对应的解除事件绑定的方式：removeEventListener 和 detachEvent。

  • 事件捕获

    DOM 2将事件明确的规定为 捕获阶段（从父级进入事件源），事件源阶段，冒泡阶段（从事件源往上层传递）。指定addEventListener 的第三个参数为true，即可添加一个捕获事件，它先于后两个阶段触发。

    实际来讲，应用价值并不是很大，一般情况下我们不需要指定一个捕获事件。

5.事件委托

当我们不得不给非常多的子元素添加相同事件时，或者希望后来添加的新子元素也拥有事件的时候，可以使用事件委托的形式，将事件定义在父节点上，然后通过 e.target（低版本IE使用e.srcElement）来获取真正触发事件的子元素（事件源），从而继续做出后续的操作。

6.ready事件

window.onload事件需要等到所有元素彻底加载完之后再触发，比如css、图片等，假设网络条件不好，或者页面中各种资源较多，这时候会导致后续的js代码很久很久之后才生效，影响用户体验。我们可以让js代码在DOM结构加载完后执行，而不必等所有资源加载完成：

window.onready = function (callback) {
    ///兼容FF,Google
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', function () {
            //console.log(document.readyState);
            document.removeEventListener('DOMContentLoaded',arguments.callee, false);
            callback();
        }, false)
    }
    //兼容IE
    else if (document.attachEvent) {
        document.attachEvent('onreadystatechange', function () {
            //console.log(document.readyState);
            if (document.readyState == "interactive") {
                document.detachEvent("onreadystatechange", arguments.callee);
                callback();
            }
        });
    }
};

//测试
//window.οnlοad= function(){ alert('onload');}
window.onready(
    function(){ alert('ok') }; 
);
  • event
<div id="wrap"></div>
  <script>
    /*
    * event 事件函数里面 的 关键词
    *   事件对象 -- 存储着和当前事件相关的一些信息
    * */
    /*document.onclick = function(){
      //低版本ie里面用event关键词
      console.log(event);
    };*/

    var oWrap = document.getElementById("wrap");

    console.log(1);

    //标准浏览器里面，事件函数的第一个形参代表事件对象
    /*document.onclick = function( e ){
      console.log(1);
      console.log(e);
    };*/

    //兼容写法
    oWrap.onclick = function(e){
      e = e || window.event;
      console.log(e);
    };

  </script>
  • 关于鼠标位置
<body style="height: 2000px">
  <div></div>
  <script>
    document.onclick = function(e){
      // console.log(e);

      //触发事件的时候鼠标指针距离可视区的位置
      console.log(e.clientX, e.clientY);

      //触发事件的时候鼠标指针距离文档的位置
      console.log(e.pageX, e.pageY);
    };
  </script>
</body>
  • 事件冒泡
  <style>
    *{margin:0;padding:0;font-family:"Microsoft Yahei";}
    #wrap{
      width: 300px;
      height: 300px;
      background-color: pink;
    }
    #nav{
      position: absolute;
      left: 400px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="wrap">
    <div id="nav"></div>
  </div>
  <script>
    /*
    * 冒泡
    *   事件默认是会一直向上传递的
    *
    * */

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

    wrap.onclick = function(){
      console.log("wrap被点击了");
    };
    nav.onclick = function(){
      console.log("nav被点击了");
    };

  </script>
</body>

点击warp：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zn2m2Zuw-1615990836409)(C:/Users/%E7%AB%B9%E9%9D%92%E6%9A%AE%E9%9B%A8/AppData/Roaming/Typora/typora-user-images/1591109660927.png)]

点击nav：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Cy30H7A-1615990836417)(C:/Users/%E7%AB%B9%E9%9D%92%E6%9A%AE%E9%9B%A8/AppData/Roaming/Typora/typora-user-images/1591109675014.png)]

  • 阻止冒泡
  <style>
    *{margin:0;padding:0;font-family:"Microsoft Yahei";}
    body{
      user-select: none;
    }
    #nav>ul li{
      overflow: hidden;
      float: left;
      width: 100px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      background-color: #f60;
      color: #fff;
      font-size: 12px;
      list-style: none;
      border-right: 1px solid white;
      cursor: pointer;
    }
    #nav>ul.first>li.show{
      height: auto;
    }
  </style>
</head>
<body>
  <div id="nav">
    <ul class="first">
      <li>
        裤子
        <ul>
          <li>内裤</li>
          <li>牛仔裤</li>
          <li>短裤</li>
        </ul>
      </li>
    </ul>
  </div>
  <script>

    /*
    * 阻止冒泡
    *
    * */

    let oLi = document.querySelector("#nav>ul>li");

    oLi.onclick = function(e){
      this.classList.add("show");

      //阻止冒泡
      e.stopPropagation();
      // e.cancelBubble = true;
    };

    document.onclick = function(){
      oLi.classList.remove("show");
    };
  </script>
  • 默认事件
 <style>
    *{margin:0;padding:0;font-family:"Microsoft Yahei";}
    .menu{
      display: none;
      position : fixed;
      z-index : 99999999;
      width : 200px;
      height : 300px;
      background-color : pink;
    }
  </style>
</head>
<body style="height: 2000px;">
  <div class="menu"></div>
  <script>

    /*
    * 阻止默认事件
    * */
    let menu = document.querySelector(".menu");
    //阻止右键菜单事件
    document.oncontextmenu = function(e){

      menu.style.cssText = `
        display : block;
        top : ${e.clientY}px;
        left : ${e.clientX}px;
      `;

      //阻止默认事件
      e.preventDefault();
    };

    //按键事件
    document.onkeydown = function(e){

      //如果按的是 F12，那么阻止默认事件
      if (e.key === "F12"){
        e.preventDefault();
      }
    };

  </script>
  • DOM二级事件
 <div id="wrap"></div>
  <script>
    /*
    *
    * DOM 2级事件
    *
    * */

    //DOM 0级事件
    /*
    document.onclick = function(){
      console.log(1)
    };/*
    //新事件会覆盖原来的事件
    document.onclick = function(){
      console.log(2);
    }; 
    //打印2
    */


    //DOM 2级事件 -- 事件函数并存，不会覆盖
    document.addEventListener("click",function(){
      console.log(2);
    });
    document.addEventListener("click",function(){
      console.log(3);
    }); 
    //打印 2
    //打印 3

  </script>

 <div id="wrap"></div>
  <script>
    /*
    *
    * DOM 2级事件
    *
    * */

    function clickEvent2(){
      console.log(2);
    }
    function clickEvent3(){
      console.log(3);
    }

    document.addEventListener("click",clickEvent2);
    document.addEventListener("click",clickEvent3);

    //取消二级事件
    document.removeEventListener("click",clickEvent2);
    //打印 3


    /*document.addEventListener("click",function(){
      console.log(2);
    });
    document.addEventListener("click",function(){
      console.log(3);
    });


    document.removeEventListener("click",function(){
      console.log(2);
    });*/



    // 低版本ie的2级事件写法
    // document.attachEvent(eName,eFn);
    // document.detachEvent(eName,eFn);

  </script>
皮卡卡卡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
从零开始学前端 - 34. JS事件对象Event详解
qq_39506551的博客
10-21 602
从零开始学前端 - 34. JS事件对象Event详解 一、什么是事件对象 Even 我们在前两篇文章中对 JS 中的事件做了一个整体的介绍，其中有一个 Event 属性对事件的作用十分重要，本篇文章我们就对它做一个详细的解读。 每一个事件触发时，都会产生一个与之对应的事件对象 event ，其中包含了触发事件的元素、键盘鼠标的状态、位置等等内容。   每当用户触发一个事件后，JS 就会自动生成一个 event 对象，根据触发事件的不同，这个对象包.
25 - Event Capture, Propagation, Bubbling and Once.rar
05-01
25 - Event Capture, Propagation, Bubbling and Once.rar
前端基础-事件对象
逍遥云恋
03-26 503
第4章 事件对象 4.1 概述 事件的触发，大部分情况下是用户的一种行为，也就是说，我们并不能确定用户什么时间触发； 而且，由于事件的传播机制，我们甚至不能确定事件具体触发在哪个节点；这是一件很不爽的事情； 如何解决呢？ 事件发生以后，系统会调用我们写好的事件处理程序 系统会在调用处理程序时，将事件发生时有关事件的一切信息，封装成一个对象， 作为参数传给监听函数(事件处理程序)，我们把这个对象称为...
【前端攻城师之JS基础】10事件对象
zbcwmq的博客
10-26 446
当事件被触发时，浏览器会调用响应函数，同时将一个事件对象作为实参传递给响应函数在事件对象中封装了当前事件相关的一切信息，包括鼠标的坐标，哪个按键被按下，鼠标滚轮滚的方向等可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做实参传递，而是作为window对象的属性保存，以下方法兼容IE8和其他浏览器元素.事件 = function(event){};元素.事件 = function(e){};
JS事件和DOM对象和BOM对象 (前端)
weixin_45464739的博客
11-13 261
JS事件和DOM对象和BOM对象以及表单 事件 ​ 事件(Event)是JavaScript应用跳动的心脏, 进行交互，使网页动起来。当我们与浏览器中Web页面 进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是Web浏览器中发生的事情，比如说某个Web页面加载完成，或者是用户滚动窗口或改变窗口大小。 通过使用JavaScript，你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。 作用 (1)验证用户输入的数据
JS 事件对象
小葵坤_易安的博客
03-12 306
在触发DOM上的某个事件时，会产生一个事件对象event，此对象包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。 所有浏览器都支持event对象，但支持方式不同。 只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event对象就会被销毁 一、DOM中的事件对象 1.兼容DOM的浏览器会将一个event对象传入到事件处理程序中 例：无论使用什么方法...
event_solution:2015-02-25 event_solution 开始
06-20
angular-seed — AngularJS 应用程序的种子这个项目是一个典型的 Web 应用程序的应用程序框架。 您可以使用它来快速引导您的 angular webapp 项目和这些项目的开发环境。 种子包含一个示例 AngularJS 应用程序，并...
curator-framework-5.0.0.jar
06-01
高级 API 极大地简化了 ZooKeeper 的使用。 org.apache.curator/curator-framework/5.0.0/curator-framework-5.0.0.jar
曙光DS800-G25存储技术白皮书.pdf
10-11
该界面提供了EventLog、指示灯告警、控制台告警、蜂鸣器告警、SNMP告警、邮件告警等多种告警机制。 知识点8：磁盘阵列技术规格 DS800-G25为集群多控制器存储架构，最大支持八个控制器集群。该技术规格包括控制器、...
Personal-Assistant
05-03
私人助理-2015-10-11：Brian使用bootstrap整理了网站...2015-09-25：杰基Added add event formCan get data from the event form (Scroll down to see the Save event button)Variables for the add event form dataho
Web前端开发笔记之JS回顾07——事件对象、事件流、事件委托
DRLDER的博客
04-02 169
事件对象是什么？ 其中client、offset，除了这两个外还有一个page，可以尝试下面的代码 Key触发事件： 事件流： 阻止冒泡的方法：https://jingyan.baidu.com/article/2c8c281d7e2b5e0008252a24.htmlhttps://jingyan.baidu.com/article/2c8c281d7e2b5e0008252a24.html 上面我给出来JQ的阻止方法，下面来看看JS的阻止方法： ...
JS事件对象
qq_45473786的博客
03-21 494
文章目录事件对象概念event常见属性clientX和clientY、screenX和screenY、pageX和pageY的区别图示示例示例一示例二 事件对象概念 比如onclick、onfocus、onmousedown、onmouseover…都称作事件对象 示例： btn.onclick = function(event){ //这里的event就是当前事件的对象...
【前端学习】JavaScript事件对象和属性
Dog Sun的博客
02-04 183
文章目录·高级浏览器的事件对象·对象·属性·offsetX offsetY·clientX clientY·pageX pageY·screenX screenY·IE浏览器中的事件对象·高级浏览器 IE浏览器兼容方式 当函数执行的时候，会产生一系列信息，浏览器会将这些信息收集起来并封装成对象传递到事件对象中。 ·高级浏览器的事件对象 ·对象 <!DOCTYPE html> <h...
前端学习（878）：什么是事件对象
歌谣的博客
04-17 301
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
JS事件对象、环境对象、回调函数 | 前端笔记（十四）
weixin_55901142的博客
05-02 152
/ console.log(checkAll.checked) // 得到 是 true 或者是 false。// 4. 遍历所有的小复选框 让小复选框的checked = 大复选框的 checked。// console.log(str.trim()) // 去除字符串左右的空格。// console.log(tx.value.length) 得到输入的长度。// console.log(tx.value) // 用户输入的内容。// 一定要写到点击里面，因为每次要获得最新的个数。
JS的事件对象详解
最新发布
qq_44741577的博客
02-01 1255
当事件被触发时（如onclick事件），浏览器会自动创建一个名为event的JavaScript对象，这个对象存在于window对象中。window.event(window可以省略)表示当前正在处理的事件的详细信息（如事件类型（等）、目标元素、鼠标位置、按键状态等）。JavaScript中的事件对象是一个非常有用的工具，可以在事件处理程序中访问和操作许多方面的事件信息。event.type - 获取事件类型（例如，“click”、"mousedown"等）。
JS 之 事件Event对象详解（属性、方法、自定义事件）
weixin_45092437的博客
06-10 8911
​ 事件event对象是指在浏览器中触发事件时，浏览器会自动创建一个event对象，其中存储了本次事件相关的信息，包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后，会自动将该对象作为参数传递给绑定的事件处理函数，我们可以在事件处理函数中通过访问event对象的属性和方法，来获取事件的相关信息，并做出后续的逻辑处理。
有关javascript中事件对象e
qq_44718039的博客
11-15 2575
js中的事件对象e
js - 事件对象
weixin_57135131的博客
11-10 1333
js 事件对象。
void MainWindow::mousePressEvent(QMouseEvent* event)//鼠標設置障礙物起始，終點 { if(event->button()==Qt::LeftButton&&mode==0)//障礙物 { int j=(event->y()-50)/25-1,i=(event->x()-200)/25; _MAP[i][j]=!_MAP[i][j]; update(); }，將鼠標點擊變爲框選
06-09
int j = (event->y() - 50) / 25 - 1; int i = (event->x() - 200) / 25; // 判断鼠标是否在地图区域内 if (i >= 0 && i < MAP_WIDTH && j >= 0 && j ) { // 记录下鼠标的起点，并将 isSelecting 标记为 true ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值