DOM操作-事件

已于 2022-11-22 17:30:50 修改
阅读量228 收藏
点赞数
分类专栏： DOM操作 javascript 文章标签： 前端 javascript
于 2022-11-19 11:37:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54244483/article/details/127934220
版权

目录

鼠标事件：

键盘事件：

表单事件：

window事件：

过渡动画事件：

动画监听：

过渡监听：

事件的添加与移除：

第一种方法：

第二种方法：

第三种方法：

鼠标事件：

鼠标点击左键触发：

onclick

鼠标双击左键触发：

ondblclick

鼠标右键触发：

oncontextmenu

鼠标弹起触发：

onmouseup

鼠标按下触发：

onmousedown

鼠标经过元素触发(会冒泡)：

onmouseover

鼠标离开元素触发：

onmouseout

鼠标经过元素触发(不会冒泡)：

onmouseenter

鼠标离开元素触发：

onmouseleave

鼠标在元素内移动触发：

onmousemove

鼠标滚轮滚动触发：

onwheel

键盘事件：

某个键盘按键按下：

onkeydown

某个键盘按键按下并松开：

onkeypress

某个键盘按键松开：

onkeyup

标签.onkeypress=function(event){
	console.log(event.key);			//获取键值
	console.log(event.keyCode);		//获取键的编码值
}

表单事件：

元素获得焦点触发(不会冒泡)：

onfocus

元素失去焦点触发：

onblur

元素获得焦点触发(会冒泡)：

onfocusin

元素失去焦点触发：

onfocusout

表单元素的内容改变时触发：

onchange

获取用户输入时触发：

oninput

用户向搜索域输入文本触发(按下Enter触发)：

onsearch

用户选取文本触发：

onselect

表单重置触发：

onreset

表单提交时触发：

onsubmit

window事件：

浏览器窗口的大小改变时触发

onresize

窗口内容滚动时触发

onscroll

页面html以及引入的各种资源(图片、css、js、音视频)加载完成时触发

onload

// resize：改变大小
// 窗口的大小改变时触发
window.onresize = function () {
    //window.innerWidth,window.innerHeight  
    //浏览器窗口的内宽高：可视区域宽高
    console.log(window.innerWidth,window.innerHeight);
};

// load：加载
// 页面html以及引入的各种资源(图片、css、js、音视频)加载完成时触发
window.onload = function () {
    console.log("加载完成");
};

window.innerWidth,window.innerHeight  
浏览器窗口的内宽高：可视区域宽高
详解可见：https://mp.csdn.net/mp_blog/creation/editor/127934808

过渡动画事件：​​​​​​​

动画监听：

        监听动画开始： animationstart

        监听动画结束： animationend

过渡监听：

        监听过渡开始： transitionstart

        监听过渡结束： transitionend

事件的添加与移除：

标签的事件监听，事件回调函数，this指向绑定的事件

第一种方法：

在开始标签中添加属性：

//html中
<body onclick="fn()">鼠标事件</body>

//js中
function fn() {
    //事件内容
}

第二种方法：

添加事件：

标签.onclick=function(){}

删除事件：1、2两种方法一样

标签.onclick=null

  1. 第三种方法：

  2. 添加事件：
标签.addEventListener("事件类型",function(){},true/false)

true; 监听捕获阶段的事件

false; 监听冒泡阶段的事件

删除事件：

标签.removeEventListener("事件类型", function(){})

Dsir66
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript Dom 绑定事件操作实例详解
12-13
本文实例讲述了JavaScript Dom 绑定事件操作JavaScript Dom 绑定事件操作。分享给大家供大家参考，具体如下： JavaScript Dom 绑定事件 // 先获取Dom对象，然后进行绑定 document.getElementById('xx').onclick ...
JavaScript事件 -绑定事件&鼠标事件&表单事件&键盘事件&UI事件
m0_62168050的博客
06-30 717
JavaScript事件 -绑定事件&鼠标事件&表单事件&键盘事件&UI事件
vue中引入mousedown事件和document的mousemove事件模拟table滚动条
热门推荐
github_39532240的博客
12-14 3万+
vue项目中需要模拟表格的滚动条效果，涉及的事件就是mousedown、mouseup、mousemove；其中mousedown事件是绑定在滚动条上的，但是mousemove和mouseup事件则应该是绑定在document上，这样才能很好地实现滚动条的拖动；   首先在组件methods中定义两个函数： 1、获取鼠标位置坐标： getPos(ev){ let scro
前端基础（二十一、DOM 绑定事件）
小鱼干儿的博客
02-17 258
二十一、DOM 绑定事件对鼠标操作对键盘操作其他 我们可以为DOM元素绑定一些事件，当事件发生时，执行对应的代码，常用事件如下： 对鼠标操作 onclick事件：鼠标左键点击完成时触发 oncontextmenu事件：鼠标右键点击时触发 event.preventDefault()：用来阻止默认行为，如阻止右键点击浏览器出现浏览器默认的菜单 <div id="div1"> 测试鼠标点击事件 </div> <script>
JavaScript——事件
Bb77_的博客
02-13 159
JavaScript——事件 事件流、事件监听器、事件对象
mouseover， mousedown才显示时dom的查看
weixin_34391854的博客
04-26 491
在现实研发过程中，我们经常需要借助chrome Devtool 查看页面的dom节点。但有的时候比较难找，经常被困扰者。 本篇文档就是对其中两个情况提供一下好的建议。 我们经常会这么写：会给dom节点上添加两个事件 mouseover和mouseout, 当鼠标悬浮节点时，显示某个dom节点，离开时这个节点消失。此时想看这个dom节点的样式就比较困难。 解决的方案：（1）找到当前页面绑定mous...
超文本浏览框全套DOM操作-易语言
06-13
在这个“超文本浏览框全套DOM操作”中，我们将探讨如何在易语言中利用DOM进行网页元素的选择、修改和事件处理。 1. **易语言HTML浏览器组件**：易语言中的HTML浏览器组件通常包含一个内嵌的Web引擎，如IE或Chromium...
dom4j-1.6.1
07-10
- 它不仅支持标准的DOM API，还提供了基于事件的SAX解析器和一个XPath实现，以满足不同场景的需求。 2. **主要特性** - **高性能**：DOM4J通过优化内存使用和提高解析速度，使其在处理大型XML文档时表现优秀。 -...
dom-to-pdf:为HTML DOM元素提供优化的PDF输出
03-13
3. **jQuery**：jQuery是一个广泛使用的JavaScript库，简化了DOM操作和事件处理。DOM-to-PDF可能利用jQuery来更方便地处理HTML元素和用户交互。 4. **局限性：** 当从HTML画布生成图像时，由于浏览器的限制，图像的...
DOM事件探秘篇
01-19
1.事件流 时间流— 描述的是从页面中接受事件的顺序。 （1）事件冒泡流。 事件最开始由最具体的元素（文档中嵌套层次最深的那个...（1）用于处理制定和删除事件处理程序的操作。 addEventListener（处理的事件名，事
DOM--事件操作
JJ_Smilewang的博客
05-30 991
1. 事件基础 JavaScript可以让我们创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解事件就是： 触发--- 响应机制。 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，用户点击某按钮时产生一个事件，然后去执行某些操作。 1.1 事件三要素 ① 事件源 （谁） ② 事件类型 （什么事件） ③ 事件处理程序 （做啥事） 1.2 案例解析 <body> <button>点击</button>.
js之DOM事件
m0_61547956的博客
04-22 3322
元素创建事件的两种方式 传统方式 on开头的事件，事件的唯一性，同一个元素同一个事件只能设置一个处理函数，后面的覆盖前面的，下列代码只弹出2。 var btns = document.querySelectorAll('button'); btns[0].onclick = function() { alert(1); } btns[0].onclick = function() { alert
DOM系列之DOM事件
老__L的博客
07-18 1489
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解：触发— 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
Javascript中的DOM操作事件
m0_56457325的博客
04-11 856
概念： DOM是指文档对象模型，是HTML和XML文档的编辑接口 HTMLDOM定义了访问和操作HTML文档的标准方法。 DOM以树结构表达HTML文档 Javascript分三个部分： ECMAScript标准：JS的基本的语法 DOM：documentobjectmodel文档对象模型操作页面的元素 BOM：BrowserobjectModel浏览器对象模型操作的是浏览器 DOM：文档对象模型 文档：把一个html文件看成是一个文档，由于万物皆对象...
JavaScript进阶之--DOM事件、动画（运动框架）
编程小菜鸟的笔记
08-29 653
一、事件流 二、事件处理程序 1、HTML事件：直接在标签里添加
dom+点击事件
qq_43944285的博客
05-27 396
enter //按enter进行搜索 $(document).on('keypress','.J_searchInput',function(e){ if (e.keyCode == 13) { var keyword=$(this).val(); if(keyword==''){ return false; }else{ var src=$(this).attr('src'); window.location = sr
js DOM 点击事件
iteye_17819的博客
07-24 319
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码 onclick=JavaScript  例子   当点击h1元素时，发生变化 &lt;h1 onclick="this.innerHTML='谢谢!'"&gt;请点击该文本&lt;/h1&gt;  调用函...
DOM事件 ————onclick篇，小总结
进一步，有一步的欢喜。
09-05 5311
创建事件，介绍三种方法： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;test DOM事件绑定&lt;/title&gt; &lt;/head&gt; &lt;!-- 方法一 --&a
前端DOM操作：点击鼠标切换事件
weixin_43797908的博客
06-13 1018
DOM也就是document文档的意思，标准叫法是文档对象模型。 一个HTML可以看成是一个文档，这个文档就是一个对象，那么我们可以通过DOM 来操作HTML页面中的所有的元素（element） getElementById:得到元素的属性通过ID获取，onclick鼠标点击 //点击按钮显示图片 <body> <input type="button" id="bt" v...
javascript事件和dom操作
最新发布
07-28
通过JavaScript事件和DOM操作，我们可以实现网页的交互功能，比如点击按钮弹出确认框、表单验证、动态修改网页内容等。 #### 引用[.reference_title] - *1* *3* [JavaScript基础: DOM操作中常用事件]...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值