首页 > 其他分享 >js-DOM事件

js-DOM事件

时间:2023-04-20 09:35:06浏览次数:50  
标签:触发 鼠标 DOM 拖动 元素 js 事件 播放

1、介绍

事件,也可以说是信号,绑定到js代码。当事件发生时,对应的js代码将被执行。

HTML DOM 事件对象 | 菜鸟教程 (runoob.com)

2、三种声明方式

(1)在html元素中声明

<button onclick="alert(/xss/)">点击弹窗</button>

(2)js调用属性,赋值为匿名函数

document.getElementById('c').onclick=function(){
alert('abc')
}	

(3)js通过事件名称绑定匿名函数

document.getElementById('c').addEventListener('click',function(){
alert('abcd')
})

3、鼠标事件

鼠标事件需要鼠标与声明事件的元素进行交互,进出或在该元素区域内操作。如果是声明元素区域外,则不影响。

  • onclick 点击触发
  • oncontextmenu 点击鼠标右键打开上下文菜单时触发
  • ondblclick 双击触发
  • onmousedown 鼠标按下触发
  • onmouseenter 鼠标指针移动到元素上时触发
  • onmouseleave 鼠标移出元素时触发
  • onmousemouve 鼠标移动时触发
  • onmouseover 鼠标移到元素上时触发
  • onmouseout 鼠标移出元素时触发
  • onmouseup 鼠标松开时触发

4、键盘事件

  • onkeydown 某键盘按键按下
  • onkeypress 某键盘按键被按下并松开
  • onkeyup 某键盘按键被松开

5、框架事件

  • onabort 图像的加载被中断触发
  • onbeforeunload 即将离开页面(刷新或关闭)时触发
  • onerror 加载文档或图像错误时触发
  • onhashchange 当前url的锚部分发送修改时触发,即#后的部分
  • onload 文档或图像加载完成时触发
  • onpageshow 用户访问页面时触发
  • onpagehide 用户离开当前页面跳转另一个页面时触发
  • onresize 窗口或框架重新调整大小时触发
  • onscroll 文档被滚动时触发
  • onunload 用户退出页面时触发

6、表单事件

  • onblur 元素失去焦点时触发
  • onchange 表单内容发生改变时触发
  • onfocus 元素获取焦点时触发
  • onfocusin 元素即将获取焦点时触发
  • onfocusout 元素即将失去焦点时触发
  • oninput 元素获取用户输入时触发
  • onreset 表单重置时触发
  • onsearch 向搜索框input type=search输入文本时触发
  • onsubmit 表单提交时触发

7、剪切板事件

  • oncopy 拷贝元素内容时触发
  • oncut 剪切元素内容时触发
  • onpaste 在元素中粘贴内容时触发

8、打印事件

  • onafterprint 已经开始打印或者打印窗口已经关闭时触发
  • onbeforeprint 在页面即将开始打印时触发

9、拖动事件

  • ondrag 元素正在被拖动时触发
  • ondragend 完成元素拖动时触发
  • ondragenter 拖动的元素进行放置目标时触发
  • ondragleave 拖动元素离开放置目标时触发
  • ondragover 拖动元素在放置目标上时触发
  • ondragstart 开始拖动元素时触发
  • ondrop 拖动元素放置在目标区域时触发

10、多媒体事件

适用于audio、video标签

  • onabort 在视频/音频终止加载时触发
  • oncanplay 可以开始播放视频/音频时触发
  • oncanplaythrough 视频/音频可以正常播放且无需停顿和缓冲时触发
  • ondurationchange 视频/音频的时长发生变化时触发
  • onemptied 当前播放列表为空时触发
  • onended 视频/音频播放结束时触发
  • onerror 视频/音频数据加载期间发生错误时触发
  • onloadeddata 浏览器加载音视频当前帧时触发
  • onloadedmetadata 在指定音视频的元数据加载后触发
  • onloadstart 浏览器开始寻找指定音视频时触发
  • onpause 暂停时触发
  • onplay 开始播放时触发
  • onplaying 音视频暂停或者在缓冲后准备重新开始播放时触发
  • onprogress 浏览器下载指定的音视频时触发
  • onratechange 播放速度发生变化时触发
  • onseeked 用户重新定位音视频的播放位置后触发
  • onseeking 用户正则重新定位音视频的播放位置时触发
  • onstalled 浏览器获取媒体数据,但媒体数据不可用时触发
  • onsuspend 浏览器读取媒体数据中止时触发
  • ontimeupdate 当前的播放位置发生改变时触发
  • onvolumechange 音量发生改变时触发
  • onwaiting 由于要播放下一帧而需要缓冲时触发

11、动画事件

  • animationend 在css动画播放结束时触发
  • animationiteration 在css动画重复播放时触发
  • animationstart 在css动画开始播放时触发

12、过渡事件

  • transitionend 在css完成过渡后触发

13、其他事件

  • onmessage 通过对象接收到消息时触发,多用于websocket对象
  • ononline 浏览器开始在线工作时触发
  • onoffline 浏览器开始离线工作时触发
  • onpopstate 窗口的浏览历史(history对象)发生改变时触发
  • onshow 当menu元素在上下文菜单显示时触发
  • onstorage 当web storage更新时触发
  • ontoggle 用户打开或关闭details元素时触发
  • onwheel 鼠标滚轮在元素上下滚动时触发

标签:触发,鼠标,DOM,拖动,元素,js,事件,播放
From: https://www.cnblogs.com/wd404/p/17335617.html

相关文章

  • js-DOM元素操作
    注意,html从上往下解析,如果script在html元素之前,并且是直接执行,将获取不到元素,为null。需要使用window.onload事件声明,或者将js写在html元素后面1、innerText和innerHTML属性html元素调用innerText属性,可以获取元素内部的文本内容,也可以直接赋值文本内容读取,不包括指定元素本......
  • js全局属性和函数
    1、js全局属性Infinity:代表正无穷大的数值NaN:指示某个值不是数字undefined:指示未定义的值2、eval函数eval("x=10;y=20;document.write(x*y)")如果参数是一个表达式,eval()函数将执行表达式。如果参数是Javascript语句,eval()将执行Javascript语句。3、判断isFinite():检......
  • 浏览器执行js脚本
    1、四种基本的形式(1)script内部<script>alert('xss')</script>(2)script引入外部js文件<scriptsrc='check.js'></script><scriptsrc=https://www.freebuf.com/freebuf/2.1.0.cd254c064b386bee9d41.js></script>需要注意如果当前页面是......
  • nodejs命令
    npm常用命令:1.npminstallpackage_name:安装指定的Node.js模块。2.npmuninstallpackage_name:卸载指定的Node.js模块。3.npmupdatepackage_name:更新指定的Node.js模块到最新版本。4.npmsearchpackage_name:搜索指定名称的Node.js模块。5.npmlist:列出当前项......
  • js介绍
    1、介绍javascript,简称为js,是一种解释型脚本语言,一般在浏览器运行,被所有现代浏览器支持,在h5中,默认脚本就是js。当然,也可以在其他支持js解析的环境中允许,比如服务端的node.js。js主要可以分为四个部分:基本语法,与es强烈相关,提供支持。包括语法规范、数据类型、运算符、控制结构......
  • js控制结构
    1、if…elseif…else…if(15){alert('abc')}js存在强转bool类型其他与java语法相同2、switch3、while4、dowhile5、forvarlist=[12,22,'abc','ddd']for(leti=0;i<list.length;i++){alert(list[i])}6、增强for7、迭代......
  • js数据类型
    1、介绍js是弱类型语言。2、数值varx1=34.00;//使用小数点来写varx2=34;//不使用小数点来写vary=123e5;//123000003、字符串s='abc's1="abc"s2=/xss///输出/xss/,连同/字符4、布尔varx=true;vary=false;5、数组varcars=newArray......
  • js语法
    1、注释//单行注释/*多行注释*/2、关键字3、标识符由数字、字母和下划线组成,首字符不能是数字4、代码分行使用()包围结构控制提交,使用{}控制代码块5、文本分行不存在/分行,必须使用+......
  • js函数
    1、介绍js函数是通过关键字function进行定义。functionfunctionName(parameters){执行的代码}2、匿名函数函数作为一个变量使用。varx=function(a,b){returna*b};varz=x(4,3);3、参数个数functionp(x1,x2){console.log(x1)console.log(x2)}p(......
  • js类
    1、介绍js中具有和java类似的类声明和创建对象。classRunoob{constructor(name,url){this.name=name;this.url=url;}}letsite=newRunoob("菜鸟教程","https://www.runoob.com");2、类继承js中也使用关键字extends进行类继承3、static静态......