js中的事件

最新推荐文章于 2023-04-23 17:34:34 发布
最新推荐文章于 2023-04-23 17:34:34 发布
阅读量6.1k 收藏 4
点赞数
分类专栏： 笔记 文章标签： 事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jim_Carrey/article/details/51483859
版权

今天想总结一下鼠标和键盘的事件

  • 常用事件
    • onclick事件
      • 鼠标点击事件,事件会在对象被点击时发生。
        浏览器支持 IE3/N2/O3
        请注意， onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。
    • ondbclick事件
      • 鼠标双击事件
      • 浏览器支持IE4/N4/O
      • 注释：ondblclick 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
    • onmousedown事件
      • 当在段落上按下鼠标按钮时执行一段 JavaScript（限于鼠标左/中键）
      • 浏览器支持IE4/N4/O
      • 注释：onmousedown 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
    • onmouseup事件
      • 鼠标按下后,抬起时触发的事件
      • 浏览器支持IE4/N4/O
      • 注释: onmouseup 属性不适用一下元素: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.
    • onmouseover事件
      • 鼠标移入事件(属性在鼠标指针移动到元素上时触发)
      • 浏览器支持IE4/N4/O3
      • 注释：onmouseover 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
    • onmousemove事件
      • 鼠标移动事件
      • 浏览器支持IE4/N4/O
      • 注释：每当用户把鼠标移动一个像素，就会发生一个 mousemove 事件。这会耗费系统资源去处理所有这些 mousemove 事件。因此请审慎地使用该事件。
    • onmouseout事件
      • 鼠标移出时的事件(事件会在鼠标指针移出指定的对象时发生)
      • 浏览器支持IE4/N4/O3*
    • onkeypress事件
      • 当键盘上某个键被按下并且释放时触发的事件
      • 注意 : 页面内必须有被聚焦的对象
      • 浏览器支持IE4/N4/O
      • 提示和注释
        浏览器差异：Internet Explorer 使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 使用 event.which。
    • onkeydown事件
      • 当键盘上某个按键被按下时触发的事件
      • 注意 : 页面内必须有被聚焦的对象
      • 浏览器支持IE4/N4/O
      • 提示和注释
        浏览器差异：Internet Explorer 使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 使用 event.which。
    • onkeyup事件
      • 当键盘上某个按键被按放开时触发的事件
      • 注意 : 页面内必须有被聚焦的对象
      • 浏览器支持IE4/N4/O
  • Window页面相关事件
    • onabout
      • 图片在下载时被用户中断
      • 浏览器支持 IE4/N3/O
    • onbeforeunload
      • 当页面的内容将要被改变时（刷新或关闭）触发的事件
        -浏览器支持 E4/N/O
      • 该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
        对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"。该信息不能删除。
        但你可以自定义一些消息提示与标准信息一起显示在对话框。
        注意： 如果你没有在 <body> 元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使用 returnValue 属性创建自定义信息(查看以下语法实例)。
        注意： 在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。
    • onerror
      • 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误
      • 事件会在文档或图像加载过程中发生错误时被触发。
        在装载文档或图像的过程中如果发生了错误，就会调用该事件句柄。
      • 浏览器支持 IE4/N3/O
      • 实例 1
        在本例中，如果装载图像时发生了错误，则显示一个对话框：
        <img src="image.gif" onerror="alert('The image could not be loaded.')" />
    • onload
      • 页面或图像加载完成后(包括外部文件引入完成)触发的事件
      • 浏览器支持 IE4/N2/O3
    • onmove
      • 浏览器的窗口被一栋时触发的事件
      • 浏览器支持 IE/N4/O
    • onresize
      • 浏览器支持 IE4/N4/O
    • onscroll
      • 浏览器滚动条位置发生变化时触发的事件
      • 浏览器支持 IE4/N/O
      • <script>/*这个是以前写过的一个导航小功能的js代码,用到的时候可以参考一下,不好意思这个Markdown不知道怎么缩进*/
        window.onscroll=function(){
        var c_nav=document.getElementById("jj_nav");
        var c_scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        if(c_scrollTop>=131){
        c_nav.style.position="fixed";
        c_nav.style.left="0";
        c_nav.style.top="0";
        c_nav.style.zIndex="999";
        }else{
        c_nav.style.position="static";
        }
        }
        </script>
    • onstop
      • 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被终端
      • 浏览器支持 IE5/N/O
    • onunload
      • 当前页面将改变时触发的事件
      • 浏览器支持 IE3/N2/O3

  • Form表单相关事件

    • onblur
      • 元素失去焦点时触发的事件[鼠标和键盘都可以触发]
      • 多用于input输入框
      • 浏览器支持 IE3/N2/O3
    • onchange
      • 当元素失去焦点并且页面内容改变时触发的事件
      • 浏览器支持 IE3/N2/O3
      • 支持该事件的 HTML 标签：
        <input type="text">, <select>, <textarea>
    • onfocus
      • 元素获得焦点时触发的事件
      • 多用于input输入框
      • 浏览器支持 IE3/N2/O3
    • onreset
      • 当表单中的reset按钮被激发时触发的事件
      • 浏览器支持 IE4/N3/O3
      • <input type="reset" value="Reset">
      • 在HTML5中不支持此事件
    • onsubmit
      • 表单提交事件,当submit按钮被点击时触发
      • 浏览器支持 IE3/N2/O3
    • onselect
      • 定义和用法
        onselect 属性在元素中的文本被选中时触发。
        onselect 属性可用于以下元素内：<input type="file">、<input type="password">、<input type="text">、<keygen> 以及 <textarea>.
    • oncontextmenu
      • HTML5里新增事件
      • 实例
        当用户在 <div> 元素 上右击鼠标时执行 JavaScript ：
        <div oncontextmenu="myFunction()" contextmenu="mymenu">
      • 定义和使用
        oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
        注意：所有浏览器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 浏览器支持。
    • onformchange
    • onforminput
    • oninput
      • 用户在输入时触发的事件
      • 该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
      • 提示： 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
    • oninvalid

  • 滚动字幕事件,这几个事件没接触过

    • onbounce
      • 在Marquee内的内容一栋至Marquee显示之外时触发的事件
      • 浏览器支持 IE4/N/O
    • onfinish
      • 当Marquee元素完成需要显示的内容后触发的事件
      • 浏览器支持 IE4/N/O
    • onstart
      • 当Marquee元素开始显示内容时触发的事件
      • 浏览器支持 IE4/N/O
  • 编辑事件
    • onbeforecopy
      • 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
      • 浏览器支持 IE5/N/O
    • onbeforecut
      • 当页面的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
      • 浏览器支持 IE5/N/O
    • onbeforeeditfocus
      • 当前元素将要进入编辑状态
      • 浏览器支持 IE5/N/O
    • onbeforepaste
      • 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件
      • 浏览器支持 IE5/N/O
    • onbeforeupdate
      • 当浏览者粘贴系统剪贴板中的内容时通知目标对象
      • 浏览器支持 IE5/N/O
    • oncontextmenu
      • 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
        [试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了]
      • 浏览器支持 IE5/N/O
    • oncopy
      • 当页面当前的被选择内容被复制后触发的事件
      • 浏览器支持 IE5/N/O
    • oncut
      • 当页面当前的被选择内容被剪切时触发的事件
      • 浏览器支持 IE5/N/O
    • ondrag
      • 当某个对象被拖动时触发的事件 [活动事件]
      • 浏览器支持 IE5/N/O
    • ondragdrop
      • 一个外部对象被鼠标拖进当前窗口或者帧
      • 浏览器支持 IE5/N4/O
    • ondragend
      • 当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了
      • 浏览器支持 IE5/N/O
    • ondragenter
      • 当对象被鼠标拖动的对象进入其容器范围内时触发的事件
      • 浏览器支持 IE5/N/O
    • ondragleave
      • 当对象被鼠标拖动的对象离开其容器范围内时触发的事件
      • 浏览器支持 IE5/N/O
    • ondragover
      • 当某被拖动的对象在另一对象容器范围内拖动时触发的事件
      • 浏览器支持 IE5/N/O
    • ondragstart
      • 当某对象将被拖动时触发的事件
      • 浏览器支持 IE4/N/O
    • ondrop
      • 在一个拖动过程中，释放鼠标键时触发的事件
      • 浏览器支持 IE5/N/O
    • onlosecapture
      • 当元素失去鼠标移动所形成的选择焦点时触发的事件
      • 浏览器支持 IE5/N/O
    • onpaste
      • 当内容被粘贴时触发的事件
      • 浏览器支持 IE5/N/O
    • onselect
      • 当文本内容被选择时的事件
      • 浏览器支持 IE4/N/O
    • onselectstart
      • 当文本内容选择将开始发生时触发的事件
      • 浏览器支持 IE4/N/O
  • 数据绑定
    • onafterupdate
      • 当数据完成由数据源到对象的传送时触发的事件
      • 浏览器支持 IE4/N/O
    • oncellchange
      • 当数据来源发生变化时
      • 浏览器支持 IE5/N/O
    • ondataavailable
      • 当数据接收完成时触发事件
      • 浏览器支持 IE4/N/O
    • ondatasetchanged
      • 数据在数据源发生变化时触发的事件
      • 浏览器支持 IE4/N/O
    • ondatasetcomplete
      • 当来子数据源的全部有效数据读取完毕时触发的事件
      • 浏览器支持 IE4/N/O
    • onerrorupdate
      • 当使用onBeforeUpdate事件触发取消了数据传送时，代替 onAfterUpdate事件
      • 浏览器支持 IE4/N/O
    • onrowenter
      • 当前数据源的数据发生变化并且有新的有效数据时触发的事件
      • 浏览器支持 IE5/N/O
    • onrowexit
      • 当前数据源的数据将要发生变化时触发的事件
      • 浏览器支持 IE5/N/O
    • onrowsdelete
      • 当前数据记录将被删除时触发的事件
      • 浏览器支持 IE5/N/O
    • onrowsinserted
      • 当前数据源将要插入新数据记录时触发的事件
      • 浏览器支持 IE5/N/O
    • onafterprint
      • 当文档被打印后触发的事件
      • 浏览器支持 IE5/N/O
    • onbeforeprint
      • 当文档即将打印时触发的事件
      • 浏览器支持 IE5/N/O
    • onfilterchange
      • 当某个对象的滤镜效果发生变化时触发的事件
      • 浏览器支持 IE4/N/O
    • onhelp
      • 当浏览者按下F1或者浏览器的帮助选择时触发的事件
      • 浏览器支持 IE4/N/O
    • onpropertychange
      • 当对象的属性之一发生变化时触发的事件
      • 浏览器支持 IE5/N/O
    • onreadystatechange
      • 当对象的初始化属性值发生变化时触发的事件
      • 浏览器支持 IE4/N/O
        这里写图片描述
        这里写图片描述
        这里写图片描述
        这里写图片描述
「已注销」
关注
专栏目录
javascript点击元素外部事件
liuhao9999的博客
03-04 1261
//声明需要点击元素外部事件的数组 var outsideClick=[{select:"#aa",callback:function(){alert(55555)}}] //全局的点击事件 document.addEventListener("click",function(e){ //每次点击循环所有数组项 for(var i=0,len=outsideClick.length;i<len;i++){ //判断点击的元素是否在需要外部事件元.
html文本框撤回修改内容,原生js实现HTML输入框撤销、重做功能
weixin_42348233的博客
06-16 1783
HTML代码：Document上一步(撤销)下一步(重做)JS代码：/*** 记录输入框的操作记录，可以进行上一步(撤销)或下一步(重做)操作**/const inputEl = document.querySelectorAll('#textarea')[0]const previousEl = document.querySelectorAll('#previous')[0]const nex...
梳理下常见的不冒泡事件
weixin_34384681的博客
04-14 757
⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 梳理下常见的不冒泡事件 UI 事件 load 异步 不冒泡 ❌ unload 不冒泡 ❌ abort 不冒泡 ❌ error 异步 不冒泡 ❌ select load、unload 这些资源加载的事件不冒牌也是容易理解
js--事件--事件循环
王欢的博客
11-07 997
关于事件写了一系列文章1.事件流（事件捕获和事件冒泡） http://blog.csdn.net/github_34514750/article/details/53067077 2.事件循环（event loop） 本文介绍事件循环 3.事件代理（(event delegation）1.js是单线程的？什么是同步异步？什么同步异步函数？什么是异步过程？什么是消息队列和事件循环 (event
js文档加载事件---
爱菜鸟高高飞
08-28 1904
1. 延迟调用read,,jQuery.holdReady $.holdReady(true); //延迟调用 $.getScript("myplugin.js", function() { $.holdReady(false); //释放,可再执行read }); 2.dom加载完成,后执行代码 $( handler ) $( document ).ready( ha...
Html DIV事件属性
u013028136的专栏
12-05 578
onactivate         当对象设置为活动元素时触发。         onafterupdate         当成功更新数据源对象中的关联对象后在数据绑定对象上触发。         onbeforeactivate         对象要被设置为当前元素前立即触发。         onbeforecopy         当选中区复制到系
JavaScript事件学习小结(五）js中事件类型之鼠标事件
11-22
JavaScript事件学习小结(五）js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结（一）事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结（四）event的公共成员...
JS中事件冒泡和事件捕获介绍
11-27
谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。 事件冒泡阶段：...
node.js中事件触发器events的使用方法实例分析
01-20
在Node.js中，事件触发器（events）是一个核心模块，它提供了一种处理异步编程的方式，基于事件驱动模型。事件驱动模型的核心是EventEmitter类，这个类允许对象发射（emit）事件并让其他对象监听（on）这些事件。...
javascript中传统事件与现代事件
12-10
大家都知道，IE中的现代事件绑定（attachEvent）与W3C标准的（addEventListener）相比存在很多问题， 例如：内存泄漏，重复添加事件并触发的时候是倒叙执行等。 下面是用传统事件的方法来处理封装事件的绑定： ...
实用性极强的XSS
最新发布
鹅子鱼的博客：很菜但是很好学的小菜鸟
04-23 1089
实用性极强的XSS绕过语句，请各位师傅继续评论区补充~~
html 拖拽坐标,HTML元素拖拽功能实现的完整实例
weixin_42365490的博客
05-31 611
1 需要了解的知识点1.1 offset(偏移量)定义：元素在屏幕上占用的所有的可见的空间。元素可见的大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小四个属性offsetHeight：元素正在垂直方向上占用的大小空间，单位为px，不包括margin值。只读属性。offsetWidth：元素在水平方向上占用的大小空间，单位为px，不包括margin值。只读属性。offsetLeft：元素...
Dhtml:用ondrag事件简单的实现鼠标拖动物件.
zgqtxwd的专栏
04-29 162
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
深度分析React源码中的合成事件
小陈的博客
02-15 447
说是讲React的合成事件，实际上讲了React的事件系统。React事件注册；* 事件监听；* 事件合成；* 事件派发；事件系统流程：1.在React代码执行时，内部会自动执行事件的注册；2.第一次渲染，创建fiberRoot时，会进行事件的监听，所有的事件通过委托在id=root的DOM元素上进行监听；3.在我们触发事件时，会进行事件合成，同类型事件复用一个合成事件类实例对象；4.最后进行事件的派发，执行我们代码中的事件回调函数；当然，由于篇幅问题，这里也是对React。
能冒泡的事件
weixin_33991727的博客
12-27 202
每个 event 都有一个event.bubbles属性，可以知道它可否冒泡。(ref：W3定义的Event Interface) 当然 W3 DOM Level 3 Events 的细则里已经附上这个表格了： Event Type Bubbling phase abort ✗ beforeinput ✔ blur ✗ click...
判断DIV内容更改(模拟 DIV　onchange)
热门推荐
程序员写的技术 FAQ 和杂文
06-24 1万+
判断DIV的内容改变的方法     近日，在帮朋友写一段小程序的时候，用到了iframe,在iframe返回值的时候，我用parent.InputText.value=returnValue;时，javascript报错，说是找不到InputText ，我看了一下在form里，有这么一个Input框，而且id,name都设定了。为什么不能返回值呢？或者说为什么不能接收值呢？于是我用div试了
判断DIV内容更改 模拟 DIV　onchange
ufryyfdf的博客
11-13 5669
判断DIV内容更改 模拟 DIV　onchange
理解JavaScript中的事件冒泡与阻止冒泡
本文主要探讨了JavaScript中的冒泡事件，通过一个具体的div弹窗事件示例，解释了事件冒泡的原理，并展示了如何通过`event.stopPropagation()`方法来阻止事件冒泡，以及`event.preventDefault()`方法防止默认行为的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值