dom常用事件介绍

于 2022-12-13 14:09:01 发布
阅读量331 收藏 1
点赞数 1
分类专栏： JavaScript 文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43231248/article/details/128284463
版权

简言

dom常用事件介绍。

事件

Document: scroll event

文档视图或者一个元素在滚动时，会触发元素的 scroll 事件。由于 scroll 事件可被高频触发，事件处理程序不应该执行高性能消耗的操作，如 DOM 操作。而更推荐的做法是使用 requestAnimationFrame()、setTimeout()节流。
示例：

<!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>
<style>
  * {
    margin: 0;
    padding: 0;
  }
</style>

<body>
  <div style="height: 200vh;"></div>
  <script>
    let last_known_scroll_position = 0;
    let isCan = true
    function doSomething(scroll_pos) {
      // 根据滚动位置做的事
      if (window.innerHeight === scroll_pos) {
        alert('到底啦')
      }
      isCan = true

    }

    window.addEventListener('scroll', function (e) {
      last_known_scroll_position = window.scrollY;
      console.log(window);
      if (isCan) {
        window.requestAnimationFrame(function () {
          isCan = false
          doSomething(last_known_scroll_position);
        });
      }

    });
  </script>
</body>

</html>

Element: wheel event

滚轮（wheel）事件会在滚动鼠标滚轮或操作其它类似输入设备时触发。滚轮事件取代了已被弃用的非标准 mousewheel 事件。
语法

addEventListener('wheel', (event) => {});

onwheel = (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>滚轮</title>
</head>

<body>
  <div id="div" style="height:200vh">

  </div>
  <script>
    let divDom = document.querySelector('#div')
    divDom.addEventListener('wheel', (event) => {
      console.log(event);
      if (event.deltaY > 0) {
        console.log('向下滚动');
      } else {
        console.log('向上滚动');
      }
    }, {
      passive: true
    })
  </script>
</body>

</html>

fullscreenchange

fullscreenchange 事件当浏览器进入或离开全屏时触发。

Document.onfullscreenerror

Document.onfullscreenerror 属性是一个事件处理器用于处理 fullscreenchange 事件，在当前文档不能进入全屏模式，即使它被请求时触发。

示例：

<!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>
<style>
  /* 全屏样式 */
  body:fullscreen::backdrop {
    width: 100vw;
    height: 100vh;
    background-color: skyblue;
    color: #fff;
  }

  #id {
    width: 100px;
    height: 100px;
    background-color: #fff;
  }
</style>

<body>
  <div id="div">
    123
  </div>
  <button id="btn">全屏</button>
  <script>
    let flag = true
    //  全屏改变
    document.addEventListener("fullscreenchange", function (event) {
      if (document.fullscreenElement !== null) {
        console.log(document.fullscreenElement);
      }

    });
    document.addEventListener('fulscreenerror', (e) => {
      console.log('error:', e);
    })
    function click() {
      let btnDom = document.getElementById('btn')
      if (flag) {
        //  全屏
        flag = !flag
        btnDom.textContent = '退出全屏'
        document.body.requestFullscreen()

      } else {
        flag = !flag
        btnDom.textContent = '全屏'
        //  退出全屏
        document.exitFullscreen()
      }
    }
    document.getElementById('btn').addEventListener('click', click)
  </script>
</body>

</html>

拖动事件

事件描述
drag在用户拖动元素或选择的文本时每几百毫秒触发一次。
dragend在拖动操作结束（通过释放鼠标按钮或按下退出键））时触发。
dragenter在拖动的元素或选择的文本进入有效的放置目标时触发。
dragleave在拖动的元素或选择的文本离开有效的放置目标时触发。
dragover在拖动的元素或选择的文本在有效的放置目标时触发（每几百毫秒）。
dragstart在用户开始拖动元素或选择的文本时触发。
drop在元素或选择的文本被放置在有效的放置目标时触发。

示例：

<!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>
<style>
  #list {
    display: flex
  }

  #list img {
    width: 100px;
    height: 150px;
    margin: 0 10px;
  }

  #del_box {
    margin-top: 200px;
    width: 600px;
    height: 300px;
    line-height: 300px;
    border: 1px dotted skyblue;
    text-align: center;
    vertical-align: middle;
    color: #ccc;
  }
</style>

<body>
  <div>
    <input id="file" type="file" accept="image/*">
    <div>
      <h4>文件列表</h4>
      <div id="list">
      </div>
    </div>
    <div id="del_box">
      删除区域
    </div>
  </div>
  <script>
    //  添加图片
    const fileDOM = document.getElementById('file')
    const listDOM = document.getElementById('list')
    fileDOM.addEventListener('change', () => {
      let file = fileDOM.files[0]
      const item = document.createElement('div')
      const img = document.createElement('img')
      //  转换成blob流
      img.src = URL.createObjectURL(file)
      img.draggable = true
      item.appendChild(img)
      listDOM.appendChild(item)
    })

    //  拖动删除
    let isDel = false
    const delDOM = document.getElementById('del_box')
    listDOM.addEventListener('drop', (e) => {
      e.preventDefault();
    })
    delDOM.addEventListener('dragover', (e) => {
      e.preventDefault()
      // console.log('在拖动的元素或选择的文本在有效的放置目标时触发');
    })
    delDOM.addEventListener('dragleave', (e) => {
      e.preventDefault()
      if (isDel) isDel = false
    })
    delDOM.addEventListener('dragenter', (e) => {
      e.preventDefault()
      if (!isDel) {
        isDel = true
      }
    })

    //  绑定在祖先元素就行，利用冒泡捕获机制  （事件委托）
    listDOM.addEventListener('dragend', (e) => {
      console.log('拖动结束');
      if (isDel) {
        listDOM.removeChild(e.target.parentNode)
        isDel = false
      }
    })
    listDOM.addEventListener('drag', (e) => {
      console.log('drag，在拖动');

    })


  </script>
</body>

</html>

键盘事件

** Element: keydown event**
在某个键被按下时触发。
Element: keyup event
keyup 事件在按键被松开时触发。
keydown 和 keyup 事件提供指出哪个键被按下的代码，而 keypress 指出哪些字符被输入。例如，小写字母“a”在 keydown 和 keyup 时会被报告为 65，但在 keypress 时为 97。所有事件均将大写字母“A”报告为 65。
示例：

<input placeholder="Click here, then press and release a key." size="40">
<p id="log"></p>


const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('keyup', logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

指针事件

事件描述
gotpointercapture在使用 setPointerCapture() 捕获元素时触发。gotpointercapture 事件是 GlobalEventHandlers 的属性，这个事件返回 gotpointercapture 类型的事件操作。
lostpointercapture在捕获指针释放时触发。
pointercancel在指针事件取消时触发。
pointerdown在指针变为活动状态时触发。
pointerenter在指针移入到元素或其子元素之一的命中测试边界时触发。
pointerleave在指针移出元素的命中测试边界时触发。
pointerlockchange在指针被锁定或解锁时触发。
pointerlockerror在指针锁定失败时触发。
pointermove在指针坐标改变时触发。
pointerout在指针移出元素的命中测试边界（或其它原因）时触发。
pointerover在指针移入元素的命中测试边界时触发。
pointerup在指针不再活动时触发。
示例：
<!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>

  <div>
    <p id="p">这是一段文字!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
    <button onclick="clickBtn2()">锁定指针</button>
  </div>
  <script>
    const para = document.querySelector('p');

    para.addEventListener('gotpointercapture', () => {
      console.log('锁定!')
    });
    document.addEventListener('lostpointercapture', () => {
      console.log('释放!')
    });
    para.addEventListener('pointerdown', (event) => {
      console.log('按下', event);
      event.pointerId && para.setPointerCapture(event.pointerId);

    });
    para.addEventListener('pointermove', (event) => {
      console.log('指针移动');
    });
    para.addEventListener('pointerup', (event) => {
      console.log('指针不活动，抬起');
      document.exitPointerLock();
    });
    para.addEventListener('pointerover', (e) => {
      console.log('移入', e);
    })
    para.addEventListener('pointerleave', (e) => {
      console.log('移出pointerleave', e);
    })
    para.addEventListener('pointerout', (e) => {
      console.log('移出pointerout', e);
    })
    para.addEventListener('pointercancel', (event) => {
      console.log('取消指针');
    });
    document.addEventListener('pointerlockchange', () => {
      console.log('在指针被锁定或解锁时触发');
    })
    document.addEventListener('pointerlockerror', () => {
      console.log('锁定失败触发');
    })

    //  锁定指针
    function clickBtn2() {
      para.requestPointerLock();
    }
  </script>
</body>

</html>

触摸事件

事件描述
touchcancel在一个或多个接触点以特定于实现的方式中断（例如，创建了太多的接触点）时触发。
touchend在从接触面移除一个或多个接触点时触发。
touchmove在一个或多个接触点沿接触面移动时触发。
touchstart在向接触面放置一个或多个接触点时触发。

示例：

<!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>触摸事件</title>
  <style>
    #div {
      width: 100%;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div id="div">
  </div>
  <script>
    const divDOM = document.getElementById('div')
    divDOM.addEventListener('touchcancel', (e) => {
      console.log('在一个或多个接触点以特定于实现的方式中断（例如，创建了太多的接触点）时触发。', e);
    })
    divDOM.addEventListener('touchstart', (e) => {
      console.log('在向接触面放置一个或多个接触点时触发。', e);
    })
    divDOM.addEventListener('touchmove', (e) => {
      console.log('在一个或多个接触点沿接触面移动时触发。', e);
    })
    divDOM.addEventListener('touchend', (e) => {
      console.log('在从接触面移除一个或多个接触点时触发。', e);
    })
  </script>
</body>

</html>

利用canvas和触摸事件实现移动端练字帖案例：

<!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>触摸事件</title>
  <style>
    #handler {
      margin: 16px;
    }

    #canvas {
      width: 100%;
      height: 80vh;
      background-color: skyblue;
      touch-action: none;
    }
  </style>
</head>

<body>
  <h1 style="text-align: center;">练字帖</h1>
  <div id="handler">
    <button onclick="clearCanvas()">置空</button>
  </div>
  <canvas id="canvas">
  </canvas>
  <script>
    const canvasDOM = document.getElementById('canvas')
    //  获取canvas上下文对象
    const canvas = canvasDOM.getContext('2d')
    //  定义宽高
    canvasDOM.width = canvasDOM.clientWidth
    canvasDOM.height = canvasDOM.clientHeight
    //  线宽
    canvas.lineWidth = 5
    //  线连接类型
    canvas.lineJoin = 'round'

    //  触摸开始，
    canvasDOM.addEventListener('touchstart', (e) => {
      //  开启新路径
      canvas.beginPath()
      //  获取开始点
      const { clientX, clientY } = e.changedTouches[0]
      const { offsetLeft, offsetTop } = e.target
      const { x, y } = getXY(clientX, offsetLeft, clientY, offsetTop)
      // 开始画路径
      canvas.moveTo(x, y)
    })
    canvasDOM.addEventListener('touchmove', (e) => {
      //  获取移动点
      const { clientX, clientY } = e.changedTouches[0]
      const { offsetLeft, offsetTop } = e.target
      const { x, y } = getXY(clientX, offsetLeft, clientY, offsetTop)
      //  绘制
      canvas.lineTo(x, y)
      canvas.stroke();
    })
    canvasDOM.addEventListener('touchend', (e) => {
      //  获取结束点
      const { clientX, clientY } = e.changedTouches[0]
      const { offsetLeft, offsetTop } = e.target
      const { x, y } = getXY(clientX, offsetLeft, clientY, offsetTop)
      canvas.stroke();
    })

    function getXY(cx = 0, ol = 0, cy = 0, ot = 0) {
      return {
        x: cx - ol,
        y: cy - ot
      }
    }

    //  置空
    const clearCanvas = () => {
      canvas.clearRect(0, 0, canvasDOM.clientWidth, canvasDOM.clientHeight)
    }
  </script>
</body>

</html>

效果：
在这里插入图片描述

结语

结束了。

ZSK6
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
八、DOM（四） -- DOM事件2
weixin_45602227的博客
07-29 1604
一、滑轮滚动事件 +++ 绑定滚动事件(兼容谷歌、IE浏览器) elem.onmousewheel=function(){ } 绑定滚动事件 event.wheelDelta 只看正负，不看大小。向上滚>0 。向下滚<0 (通过该属性获取的是个数值,在不同的浏览器中获取的值是不同的。) +++ 绑定鼠标滚动事件(兼容火狐浏览器,火狐特有) elem.addE
（黑马程序员）JavaScript DOM和BOM第五天学习笔记之事件对象滚动事件和加载事件
LuShanGuoQiLin的博客
08-25 171
（黑马程序员）JavaScript DOM和BOM第五天学习笔记之事件对象滚动事件和加载事件
滚动加载事件-scroll、offset、client家族
qq_54201133的博客
06-06 521
滚动加载事件-scroll、offset、client家族
JS DOM编程笔记 - 滚动事件（十八）
小帅的编程笔记
11-03 2241
今天我们来学习如何在JavaScript中处理滚动事件，如何优化滚动事件的性能。 滚动事件简介 当我们滚动页面或者在某个元素上滚动时就会触发滚动事件，我们可以通过以下方式触发滚动事件 使用右侧滚动条 使用鼠标滚轮 点击锚点链接 调用JS函数 要监听滚动事件，使用addEventListener()方法，事件名称为scroll，代码如下： targetElement.addEventListener('scroll', (event) => { // 处理滚动事件 }); 或者给目标元素的on
javascript 事件处理机制
qq_36416878的博客
09-21 220
一直以为事件只有绑定了才会有，在一场面试被虐了，所以写文章好好记录下来。 <html> <head> <title>test</title> </head> <body> <div>点我</div> </body> </html> 这样一个结构，当点击div的时候， 捕获阶段：事件从window对象自上而下向目标节点传播的阶段； 目标阶段：真正的目标节点正在处理事件.
常用DOM整理
09-03
js在操作DOM中存在着许多跨浏览器方面的坑，本文花了我将近一周的时间整理，我将根据实例整理那些大大小小的“坑”。
JavaScript DOM常用操作代码汇总
10-15
主要介绍了JavaScript DOM常用操作代码汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js常用DOM方法详解
10-20
本文主要介绍了js常用的DOM方法，具有很好的参考价值，下面跟着小编一起来看下吧
DOM基础教程之事件类型
01-19
对于用户事件类型而言，最常用的是鼠标、键盘、浏览器。 1.鼠标事件： 鼠标的事件都频繁使用，下面例子就测试各种鼠标事件 代码如下: [removed]  function handle(oEvent) {  var disp = document....
jQuery随手笔记之常用的jQuery操作DOM事件
10-23
Dom是Document Object Model的缩写，意思是文档...DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件，本文给大家介绍jQuery随手笔记之常用的jQuery操作DOM事件，需要的朋友参考下
HTML DOM 事件
akuibpt23191的博客
07-13 540
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
操作元素之修改样式属性
leechoy
06-12 606
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
JavaScript Wheel Event - 使用JavaScript处理浏览器的鼠标滑轮事件
@奮 鬥@的专栏
07-18 1657
参考网址：点击打开链接 注册检测事件： {             if (isIE) {             //alert(document.attachEvent);             document.attachEvent('onmousewheel', stopFunc); //IE                 //document.addEvent
DOM系列之scroll系列
老__L的博客
07-30 719
scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
6-6 JS编程接口（点击事件、addEventListener、捕获与冒泡、阻止滚动）
前端知识库
05-01 544
DOM事件与事件委托 高频面试题目 1.点击事件 代码 <div class="爷爷"> <div class="爸爸"> <div class="儿子"> 文字 </div> </div> </div> 给三个div分别添加时间监听 fnYe/fnBa/fnEr 提问1：点击了谁？ 1.点击文字，算不算点击儿子？ 2.点击文字，算不算点击爸爸？ 3.点击文字，算不算点击爷爷？ 答：都算 提问
事件类型2（DOM事件绑定、以及滚轮事件）
qq_52908359的博客
05-25 390
1.UI事件（不一定与用户操作有关的事件） （1）.load当页面完全加载后在window上触发，图片也可以触发load事件； （2）.resize当窗口大小变化时window上触发（除火狐外其他浏览器窗口变化1像素时就触发事件，而火狐是在用户停止调整窗口大小时才会触发。不建议在此时中加入大计算量代码。因为可能频繁执行，导致浏览器速度便面。另外窗口最大最小也会触发事件） （3）.scroll当用户滚动带滚动条元素中的内容时，在该元素上面触发 ...
鼠标滚轮的兼容写法
kongjiea笔记
03-10 2194
var addMouseWheelHandler = function(){ if (document.addEventListener) { document.addEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper document.addE
js 鼠标滚轮事件
sunshine08_07的博客
01-17 2632
总结一下滑动鼠标滚轮，可以左右切换图片。在网上找的资料，自己进行修改逻辑，完成。<script> var scrollFunc = function (e) { var direct = 0; e = e || window.event; if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
DOM常用事件
zxn200125的博客
11-24 1000
什么是事件，DOM的常用事件有哪些
html dom常用方法大全
最新发布
07-17
以下是HTML DOM中常用的一些方法： 1.ById(id)：通过元素的id属性获取元素。 2. getElementsByTagName(tagName)：通过元素的标签名获取元素集合。 3. getElementsByClassName(className)：通过元素的类名获取元素...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZSK6

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值