20.处理事件

最新推荐文章于 2022-10-17 13:44:19 发布

我以为自己很帅

最新推荐文章于 2022-10-17 13:44:19 发布

阅读量106

点赞数

分类专栏： js web前端文章标签： javascript html html5

本文链接：https://blog.csdn.net/unlockmyname/article/details/119955106

版权

web前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

19 篇文章 0 订阅

订阅专栏

javascript基础

事件的三个阶段

捕获阶段: 事件从外层往里执行
当前目标阶段
冒泡阶段: 事件从里向外执行

事件对象.eventPhase属性可以查看事件触发时所处的阶段

注意: box.onclick  
     box.attachEvent    只有冒泡事件

##冒泡的作用(常用)

事件委托:原理事件冒泡

事件里面的默认参数,或者事件对象e/或者a 表示

当事件发生时,可以获取与事件相关的数据

e.target 表示真正出发事件的对象

<body>
  <ul id="ul">
    <li>西施</li>
    <li>貂蝉</li>
    <li>昭君</li>
    <li>凤姐</li>
    <li>芙蓉姐姐</li>
  </ul>
  <script>
    // 事件委托： 原理事件冒泡
    var ul = document.getElementById('ul');
    ul.onclick = function (e) {
      // e 事件参数（事件对象）: 当事件发生的时候，可以获取一些和事件相关的数据
      // 获取到当前点击的li
      // e.target 是真正触发事件的对象
      // console.log(e.target);
      // 让当前点击的li高亮显示
      e.target.style.backgroundColor = 'red';
    }
  </script>
</body>
作用:可以直接简化代码,这样做就不用像以前那样,给每个li都注册事件
     采用事件冒泡呢,就只需要给父级元素设置注册事件,单后通过e.target获取被点击li

事件的属性和方法

event.type 获取事件类型
e.eventPhase 获取事件的阶段(返回的是一个数值,了解)
clientX/clientY 所有浏览器都支持，窗口位置有兼容性问题(常用)
pageX/pageY IE8以前不支持，页面位置有兼容性问题(常用)
event.target || event.srcElement 用于获取触发事件的元素 (事件委托,有兼容性问题)
e.currentTarget作用和this一样事件处理函数在在发生的对象
event.preventDefault() 取消默认行为

return false 也是取消默认行为的执行,用来取消冒泡事件(常用)

事件对象的属性:
  就比如说  btn.onclick
  我们给btn设置了点击一个事件,这个事呢,有很多属性,通过属性就能获取一些想要的数据
  e表示事件对象,e就有很多属性
  这里的e或者a(有浏览器兼容性问题)
  
  btn.onclick = function (e) {
    e = e || window.event;
  }

案例

跟着鼠标飞的天使

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      height: 1000px;
    }
    #ts {
      position: absolute;
    }
  </style>
</head>
<body>
  <img src="images/tianshi.gif" id="ts" alt="">
  <script>
    var ts = document.getElementById('ts');
    document.onmousemove = function (e) { 
      e = e || window.event;
      ts.style.left = e.pageX - 10 + 'px';
      ts.style.top = e.pageY - 10 + 'px';
    }
  </script>
</body>

获取鼠标在div内的坐标

box.offsetleft  盒子左偏移
box.ofeesettop  盒子上偏移
getPage(e).pageX-this.offsetLeft;  //getPage(e).pageX是兼容性处理函数事先定义好的
getPage(e).pageY- this.offsetTop; //getPage(e).pageY是兼容性处理函数事先定义好的

获取页面滚动的距离

  <style>
    body {
      height: 1000px;
    }
  </style>
</head>
<body>
  <script src="common.js"></script>
  <script>
    document.onclick = function (e) {
      e = e || window.event;
      console.log(getPage(e).pageX);
      console.log(getPage(e).pageY);

    }
// 获取鼠标在页面的位置，处理浏览器兼容性
   function getPage(e) {
      var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
      var pageY = e.pageY || e.clientY + getScroll().scrollTop;
      return {
        pageX: pageX,
        pageY: pageY
      }
    }
  </script>
</body>

阻止事件传播的方式

标准方式 event.stopPropagation();
IE低版本 event.cancelBubble = true; 标准中已废弃

##常用的鼠标和键盘事件

onmouseup 鼠标按键放开时触发
onmousedown 鼠标按键按下触发
onmousemove 鼠标移动触发
onkeyup 键盘按键按下触发
onkeydown 键盘按键抬起触发

我以为自己很帅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
20.处理事件

javascript基础事件的三个阶段捕获阶段: 事件从外层往里执行当前目标阶段冒泡阶段: 事件从里向外执行事件对象.eventPhase属性可以查看事件触发时所处的阶段注意: box.onclick box.attachEvent 只有冒泡事件##冒泡的作用(常用)事件委托:原理事件冒泡事件里面的默认参数,或者事件对象e/或者a 表示当事件发生时,可以获取与事件相关的数据e.target 表示真正出发事件的对象<body&gt
复制链接

扫一扫