这篇文章主要介绍了html中浏览器中常用事件有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
当,</code>的值发生变化时触发。此外，打开 contenteditable 属性的元素，只要值发生变化，也会触发 input 事件。input 事件的一个特点，就是会连续触发，比如用户每次按下一次按键，就会触发一次input事件。</p><p>此类事件包括: keydown, keyup,</p>鼠标事件<p>select 事件当在<input>, <textarea>中选中文本时触发</p><p>change 事件当<input>, <select>, <textarea>的值发生变化时触发。它与 input 事件的大不同，就是不会连续触发，只有当全部修改完成时才会触发，而且input事件必然会引发change事件。具体来说，分成以下几种情况:</p><ul><li><p>激活单选框(radio)或复选框(checkbox)时触发。</p></li><li><p>用户提交时触发。比如，从下列列表(select)完成选择，在日期或文件输入框完成选择。</p></li><li><p>当文本框或textarea元素的值发生改变，并且丧失焦点时触发。</p></li><li><p>reset事件当表单重置(所有表单成员变回默认值)时由form元素触发。</p></li><li><p>submit事件当表单数据向服务器提交时由form元素触发。</p></li></ul>文档事件:beforeunload<p>beforeunload 事件当窗口将要关闭，或者 document 和网页资源将要卸载时触发。它可以用来防止用户不当心关闭网页。该事件的默认动作就是关闭当前窗口或文档。如果在监听函数中，调用了 event.preventDefault()，或者对事件对象的 returnValue 属性赋予一个非空的值，就会自动跳出一个确认框，让用户确认是否关闭网页。如果用户点击“取消”按钮，网页就不会关闭。监听函数所返回的字符串，会显示在确认对话框之中:</p><pre> window.addEventListener('beforeunload', function(event) { if(event.preventDefault){ event.preventDefault(); } else { event.returnValue = '你确认要离开吗？'; } });</pre>unload 与 load<p>unload 事件在窗口关闭或者 document 对象将要卸载时触发，发生在 window, body, frameset 等对象上面。它的触发顺序排在 beforeunload, pagehide 事件后面。unload 事件只在页面没有被浏览器缓存时才会触发，换言之，如果通过按下“前进/后退”导致页面卸载，并不会触发 unload 事件。当 unload 事件发生时，document 对象处于一个特殊状态。所有资源依然存在，但是对用户来说都不可见，UI互动(window.open, alert, confirm方法等)全部无效。这时即使抛出错误，也不能停止文档的卸载。</p><p>load事件在页面加载成功时触发，error事件在页面加载失败时触发。注意，页面从浏览器缓存加载，并不会触发load事件。</p><p>这两个事件实际上属于进度事件，不仅发生在 document 对象，还发生在各种外部资源上面。浏览网页就是一个加载各种资源的过程，图像(image), 样式表(style sheet), 脚本(script), 视频(video), 音频(audio), Ajax请求(XMLHttpRequest)等等。这些资源和document对象, window对象, XMLHttpRequestUpload对象，都会触发 load 事件和 error 事件。</p>pageshow 与 pagehide<p>pageshow事件，pagehide事件: 默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进/后退”按钮时，浏览器就会从缓存中加载页面。<br/>pageshow 事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码，可以放在这个事件的监听函数。第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load 事件不会触发，因为网页在缓存中的样子通常是 load 事件的监听函数运行后的样子，所以不必重复执行。同理，如果是从缓存中加载页面，网页内初始化的 JavaScript 脚本(比如 DOMContentLoaded 事件的监听函数)也不会执行。pageshow 事件有一个 persisted 属性，返回一个布尔值。页面第一次加载时，这个属性是false；当页面从缓存加载时，这个属性是true。</p><pre>document.onpageshow = function(event){} if(event.persisted){ //如果存缓存加载 } }</pre><p>同样的，将这个属性设为 true，就表示页面要保存在缓存中；设为 false ，表示网页不保存在缓存中，这时如果设置了 unload 事件的监听函数，该函数将在 pagehide 事件后立即运行。如果页面包含 frame ，则 frame 页面的 pageshow 事件和 pagehide 事件，都会在主页面之前触发。</p>DOMContentLoaded 和 readystatechange<p>DOMContentLoaded 事件当 HTML 文档下载并解析完成以后，就会在 document 对象上触发 DOMContentLoaded 事件。这时，仅仅完成了 HTML 文档的解析(整张页面的DOM生成)，所有外部资源(样式表, 脚本, iframe等等)可能还没有下载结束。也就是说，这个事件比 load 事件，发生时间早得多。注意，网页的 JavaScript 脚本是同步执行的，所以定义 DOMContentLoaded 事件的监听函数，应该放在所有脚本的最前面。否则脚本一旦发生堵塞，将推迟触发 DOMContentLoaded 事件。此外，IE8 不支持 DOMContentLoaded 事件，可以使用 readystatechange 事件代替。</p><p>readystatechange 事件发生在 Document 对象和 XMLHttpRequest 对象，当它的 readyState 属性发生变化时触发。</p>其他文档级事件<p>上面重点提到了 DOMContentLoaded, readystatechange, pageshow, pagehide, unload, load 和 beforeunload 事件，此外还有一下事件:</p><ul><li><p>onafterprint: 文档打印之后运行的脚本</p></li><li><p>onbeforeprint: 文档打印之前运行的脚本</p></li><li><p>onbeforeunload: 文档卸载之前运行的脚本(上文已涉及)</p></li><li><p>onerror: 在错误发生时运行的脚本</p></li><li><p>onhaschange: 当文档已改变时运行的脚本</p></li><li><p>onload: 页面结束加载之后触发(上文已涉及)</p></li><li><p>onmessage: 在消息被触发时运行的脚本</p></li><li><p>onoffline: 当文档离线时运行的脚本</p></li><li><p>ononline: 当文档上线时运行的脚本</p></li><li><p>onpagehide: 当窗口隐藏时运行的脚本(上文已涉及)</p></li><li><p>onpageshow: 当窗口成为可见时运行的脚本(上文已涉及)</p></li><li><p>onpopstate: 当窗口历史记录改变时运行的脚本</p></li><li><p>onredo: 当文档执行撤销（redo）时运行的脚本</p></li><li><p>onresize: 当浏览器窗口被调整大小时触发</p></li><li><p>onstorage: 在 Web Storage 区域更新后运行的脚本</p></li><li><p>onundo: 在文档执行 undo 时运行的脚本</p></li><li><p>onscroll: 事件在文档或文档元素滚动时执行脚本</p></li></ul>鼠标事件 与 MouseEvent对象<pre>new MouseEvent(typeArg, mouseEventInit);</pre><p>内置的鼠标事件包括:</p><ol><li><p>mousedown: 按下鼠标</p></li><li><p>mouseup: 鼠标抬起</p></li><li><p>click: 点击</p></li><li><p>dblclick: 双击</p></li><li><p>mousemove: 鼠标移动</p></li><li><p>mouseover: 鼠标移入，冒泡</p></li><li><p>mouseout: 鼠标移出，冒泡</p></li><li><p>mouseenter: 鼠标移入，不冒泡</p></li><li><p>mouseleave: 鼠标移出，不冒泡</p></li><li><p>contextmenu: 右键菜单</p></li><li><p>wheel: 滚轮事件</p></li></ol><p>其具有如下常用属性:</p><ul><li><p>altKey，ctrlKey，metaKey，shiftKey属性返回一个布尔值，表示鼠标事件发生时，是否按下某个键；</p></li><li><p>button 返回事件的鼠标键信息, 值为0(左键), 1或4(中键, 4为IE中的值)，2(右键)，可通过switch来选择执行分之)；</p></li><li><p>buttons 属性返回一个3个比特位的值，表示同时按下了哪些键</p></li><li><p>clientX，clientY 返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素</p></li><li><p>screenX，screenY 返回鼠标位置相对于屏幕左上角的坐标，单位为像素</p></li><li><p>movementX，movementY 返回一个位移，单位为像素，表示当前位置与上一个 mousemove 事件之间的距离，在数值上:</p></li></ul><p>currentEvent.movementX = currentEvent.screenX - previousEvent.screenX<br/>currentEvent.movementY = currentEvent.screenY - previousEvent.screenY</p><ul><li><p>relatedTarget属性返回事件的次要相关节点，即和target属性对应的节点，如: mouseout target 指将要离开的节点，relatedTarget 指将要进入的节点。对于那些没有次要相关节点的事件，该属性返回null</p></li><li><p>wheel 事件是与鼠标滚轮相关的事件，浏览器提供一个 WheelEvent 构造函数 new WheelEvent(typeArg, mouseEventInit)</p></li><li><p>deltaX: 返回一个数值，表示滚轮的水平滚动量</p></li><li><p>deltaY: 返回一个数值，表示滚轮的垂直滚动量</p></li><li><p>deltaZ: 返回一个数值，表示滚轮的Z轴滚动量</p></li><li><p>deltaMode: 返回一个数值，表示滚动的单位，适用于上面三个属性。0表示像素，1表示行，2表示页</p></li></ul>键盘事件 KeyboardEvent 对象<pre>构造函数 new KeyboardEvent(typeArg, KeyboardEventInit)</pre><p>键盘事件包括keydown(按下键盘时触发该事件)，keypress(只要按下的键并非Ctrl, Alt, Shift和Meta，就接着触发keypress事件), keyup(松开键盘时触发该事件)</p><ul><li><p>altKey，ctrlKey，metaKey，shiftKey: 返回一个布尔值，表示是否按下对应的键</p></li><li><p>key: 返回一个字符串，表示按下的键名。如果同时按下一个控制键和一个符号键，则返回符号键的键名</p></li><li><p>keyCode: 返回按键的 ASCII 码，注意: 这里是不区分大小写的，<code>A键</code>不论输出 A 还是 a keyCode 都是68。在 IE 中使用 witch 属性</p></li></ul>进度事件 ProgressEvent对象<pre>new ProgressEvent(type, { lengthComputable: aBooleanValue, // false as default loaded: aNumber, // 0 as default total: aNumber // 0 as default });</pre><p>进度事件用来描述一个事件进展的过程，比如XMLHttpRequest对象发出的HTTP请求的过程,<code><img></code>,<code><audio></code>,<code><video></code>,<code><style></code>,<code><link></code>加载外部资源的过程，包括下载和上传。通常包括以下事件:</p><ol><li><p>abort事件: 当进度事件被中止时触发。如果发生错误，导致进程中止，不会触发该事件。</p></li><li><p>error事件: 由于错误导致资源无法加载时触发，不会冒泡。error 事件的监听函数最好放在如 img 元素的 HTML 属性中。</p></li><li><p>load事件: 进度成功结束时触发。</p></li><li><p>loadstart事件: 进度开始时触发。</p></li><li><p>loadend事件: 进度停止时触发，发生顺序排在error事件abort事件load事件后面。loadend事件的监听函数可以用来取代abort事件/load事件/error事件的监听函数，loadend事件本身不提供关于进度结束的原因，但可以用它来做所有进度结束场景都需要做的一些操作。</p></li><li><p>progress事件: 当操作处于进度之中，由传输的数据块不断触发。</p></li><li><p>timeout事件: 进度超过限时触发</p></li></ol><p>这类事件具有以下属性:</p><ul><li><p>lengthComputable: 返回一个布尔值，表示当前进度是否具有可计算的长度。如果为false，就表示当前进度无法测量。</p></li><li><p>total: 返回一个数值，表示当前进度的总长度。如果是通过 HTTP 下载某个资源，表示内容本身的长度，不含 HTTP 头部的长度。如果 lengthComputable 属性为 false，则 total 属性就无法取得正确的值。</p></li><li><p>loaded: 返回一个数值，表示当前进度已经完成的数量。该属性除以total属性，就可以得到目前进度的百分比。</p></li></ul><pre>//进度计算 if (e.lengthComputable){ var percentComplete = e.loaded / e.total; }</pre>拖拽事件 DragEvent 对象<pre>new DragEvent(type, DragEventInit);</pre><p>拖拽指的是，用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。拖拽的对象有好几种，包括 Element 节点, 图片, 链接, 选中的文字等等。在 HTML 网页中，除了 Element 节点默认不可以拖拽，其他(图片, 链接, 选中的文字)都是可以直接拖拽的。为了让 Element 节点可拖拽，可以将该节点的 draggable 属性设为 true。draggable 属性可用于任何 Element 节点，但是图片(img 元素)和链接(a 元素)不加这个属性，就可以拖拽。对于它们，用到这个属性的时候，往往是将其设为 false，防止拖拽。注意，一旦某个 Element 节点的 draggable 属性设为 true，就无法再用鼠标选中该节点内部的文字或子节点了。</p><p>当Element节点或选中的文本被拖拽时，就会持续触发拖拽事件，包括以下一些事件:</p><ol><li><p>drag事件: 拖拽过程中，在被拖拽的节点上持续触发。</p></li><li><p>dragstart事件: 拖拽开始时在被拖拽的节点上触发，该事件的target属性是被拖拽的节点。通常应该在这个事件的监听函数中，指定拖拽的数据。</p></li><li><p>dragend事件: 拖拽结束时(释放鼠标键或按下escape键)在被拖拽的节点上触发，该事件的target属性是被拖拽的节点。它与dragStart事件，在同一个节点上触发。不管拖拽是否跨窗口，或者中途被取消，dragend事件总是会触发的。</p></li><li><p>dragenter事件: 拖拽进入当前节点时，在当前节点上触发，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下(drop)拖拽的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拽进入当前节点，也是在这个事件的监听函数中设置。</p></li><li><p>dragover事件: 拖拽到当前节点上方时，在当前节点上持续触发，该事件的target属性是当前节点。该事件与dragenter事件基本类似，默认会重置当前的拖拽事件的效果(DataTransfer对象的dropEffect属性)为none，即不允许放下被拖拽的节点，所以如果允许在当前节点drop数据，通常会使用preventDefault方法，取消重置拖拽效果为none。</p></li><li><p>dragleave事件: 拖拽离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。在视觉上显示拖拽离开当前节点，就在这个事件的监听函数中设置。</p></li><li><p>drop事件: 被拖拽的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下Escape键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拽数据，并进行相关处理。</p></li></ol><p>关于拖拽事件，有以下几点注意事项:</p><ol><li><p>拖拽过程只触发以上这些拖拽事件，尽管鼠标在移动，但是鼠标事件不会触发。</p></li><li><p>将文件从操作系统拖拽进浏览器，不会触发 dragStart 和 dragend 事件。</p></li><li><p>dragenter 和 dragover 事件的监听函数，用来指定可以放下(drop)拖拽的数据。由于网页的大部分区域不适合作为 drop 的目标节点，所以这两个事件的默认设置为当前节点不允许 drop。如果想要在目标节点上 drop 拖拽的数据，首先必须阻止这两个事件的默认行为，或者取消这两个事件。</p></li></ol><pre><p ondragover="return false"> //或 <p ondragover="event.preventDefault()"></pre><ol><li><p>拖拽事件用一个 DragEvent 对象表示，该对象继承 MouseEvent 对象，DragEvent 对象只有一个独有的属性 dataTransfer，其他都是继承的属性。dataTransfer 属性用来读写拖拽事件中传输的数据，所有的拖拽事件都有一个 dataTransfer 属性，用来保存需要传递的数据，这个属性的值是一个 DataTransfer 对象。拖拽的数据保存两方面的数据: 数据的种类(又称格式)和数据的值。数据的种类是一个MIME字符串，比如 text/plain 或者 image/jpg，数据的值是一个字符串;</p></li></ol><p>dataTransfer 对象的属性的值是一个对象，其中包括以下属性:</p><ul><li><p>dropEffect 属性: 设置放下(drop)被拖拽节点时的效果，可能的值包括 copy(复制被拖拽的节点), move(移动被拖拽的节点), link(创建指向被拖拽的节点的链接), none(无法放下被拖拽的节点)。设置除此以外的值，都是无效的。</p></li><li><p>effectAllowed 属性: 设置本次拖拽中允许的效果，可能的值包括 copy, move, link, copyLink, copyMove, linkMove, all, none, uninitialized(默认值，等同于 all)。如果某种效果是不允许的，用户就无法在目标节点中达成这种效果。</p></li><li><p>files 属性: 是一个 FileList 对象，包含一组本地文件，可以用来在拖拽操作中传送。如果本次拖拽不涉及文件，则属性为空的 FileList 对象。通过files属性读取拖拽文件的信息。如果想要读取文件内容，就要使用 FileReader 对象。</p></li><li><p>types 属性: 是一个数组，保存每一次拖拽的数据格式，如'text/uri-list'</p></li><li><p>setData() 方法: 用来设置事件所带有的指定类型的数据。它接受两个参数，第一个是数据类型，第二个是具体数据。如果指定的类型在现有数据中不存在，则该类型将写入types属性；如果已经存在，在该类型的现有数据将被替换。</p></li></ul><pre>event.dataTransfer.setData("text/plain", "Text to drag");</pre><ul><li><p>getData() 方法接受一个字符串(表示数据类型)作为参数，返回事件所带的指定类型的数据(通常是用 setData 方法添加的数据)。如果指定类型的数据不存在，则返回空字符串。</p></li></ul><pre>event.dataTransfer.getData(types[0]);</pre><ul><li><p>clearData() 方法接受一个字符串(表示数据类型)作为参数，删除事件所带的指定类型的数据。如果没有指定类型，则删除所有数据。如果指定类型不存在，则原数据不受影响。</p></li></ul><pre>event.dataTransfer.clearData("text/uri-list");</pre><ul><li><p>setDragImage() 可以用来自定义这张图片，它接受三个参数，第一个是img图片元素或者canvas元素，如果省略或为null则使用被拖动的节点的外观，第二个和第三个参数为鼠标相对于该图片左上角的横坐标和右坐标。</p></li></ul><pre>event.dataTransfer.setDragImage(img, 0, 0);</pre>触摸事件<pre> new Touch(touchInit);</pre><p>触摸事件包括以下5种:</p><ol><li><p>touchstart: 用户接触触摸屏时触发，它的 target 属性返回发生触摸的 Element 节点(IE10+中使用 mspointerdown 事件);</p></li><li><p>touchend: 用户不再接触触摸屏时(或者移出屏幕边缘时)触发，它的 target 属性与 touchstart 事件的 target 属性是一致的，它的 changedTouches 属性返回一个TouchList对象，包含所有不再触摸的触摸点(Touch对象)(IE10+中使用 mspointerup 事件);</p></li><li><p>touchmove: 用户移动触摸点时触发，它的 target 属性与 touchstart 事件的 target 属性一致。如果触摸的半径, 角度, 力度发生变化，也会触发该事件。(IE10+中使用 mspointermove 事件);</p></li><li><p>touchenter: 当触点进入某个 element 时触发。此事件没有冒泡过程。(IE10+中使用 mspointerover 事件);</p></li><li><p>touchleave: 当触点离开某个 element 时触发。此事件没有冒泡过程。(IE10+中使用 mspointerout 事件);</p></li><li><p>touchcancel: 当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):(IE10+中没有对应事件);</p></li></ol><ul><ol><li><p>由于某个事件取消了触摸: 例如触摸过程被一个模态的弹出框或电话打断;</p></li><li><p>触点离开了文档窗口，而进入了浏览器的界面元素, 插件或者其他外部内容区域;</p></li><li><p>当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch 对象被取消。</p></li></ol></ul><p>触摸 API 由三个对象组成。每个 Touch 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 element 描述。 TouchList 对象代表多个触点的一个列表。具体包括以下属性:</p><ul><li><p>identifier 属性: 表示touch实例的独一无二的识别符。它在整个触摸过程中保持不变(IE10+中使用 pointerId 属性);</p></li><li><p>screenX/screenY 属性: 分别表示触摸点相对于屏幕左上角的横坐标和纵坐标，与页面是否滚动无关;</p></li><li><p>clientX/clientY 属性: 分别表示触摸点相对于浏览器视口左上角的横坐标和纵坐标，与页面是否滚动无关;</p></li><li><p>pageX/pageY 属性: 分别表示触摸点相对于当前页面左上角的横坐标和纵坐标，包含了页面滚动带来的位移;</p></li><li><p>radiusX/radiusY 属性: 分别返回触摸点周围受到影响的椭圆范围的X轴和Y轴，单位为像素;</p></li><li><p>rotationAngle 属性: 表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间。指尖接触屏幕，触摸范围会形成一个椭圆，这三个属性就用来描述这个椭圆区域(IE10+中使用 rotation 属性);</p></li><li><p>force 属性: 返回一个0到1之间的数值，表示触摸压力。0代表没有压力，1代表硬件所能识别的大压力(IE10+中使用 pressure 属性,取值0 - 255);</p></li><li><p>target 属性: 返回一个Element节点，代表触摸发生的那个节点。当这个触点最开始被跟踪时(在 touchstart 事件中), 触点位于的HTML元素.哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 window 或 document 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.</p></li><li><p>altKey/ctrlKey/metaKey/shiftKey 都为只读属性: 返回一个布尔值，表示触摸的同时，是否按下某个键</p></li><li><p>changedTouches 属性: 返回一个 TouchList 对象，包含了由当前触摸事件引发的所有Touch对象(即相关的触摸点)。它包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 Touch 对象。只读属性。</p></li><li><p>targetTouches属性: 返回一个 TouchList 对象，包含了触摸的目标 Element 节点内部，所有仍然处于活动状态的触摸点。</p></li><li><p>touches 属性返回一个 TouchList 对象(类数组的对象)，包含了所有当前接触触摸平面的触点的 Touch 对象，无论它们的起始于哪个 element 上，也无论它们状态是否发生了变化。只读属性</p></li><li><p>type 属性: 指此次触摸事件的类型。</p></li><li><p>target属性: 此次触摸事件的目标 element 。这个目标元素对应 TouchEvent.changedTouches 中的触点的起始元素(在之后的事件类型中有说明)，但是请注意: 此次事件中其他的触点的起始元素可能有所不同。以防万一，应使用和每一个单独触点相关联的目标 。</p></li></ul><p>以下是 IE10+ 中的其他属性：</p><ul><li><p>hwTimestamp: 创建事件时间(毫秒);</p></li><li><p>isPrimary: 表示该时间是否是主事件;</p></li><li><p>pointerType: 取值自 event.MSPOINTER_TYPE_TOUCH, event.MAPOINTER_TYPE_PEN, event.MSPOINTER_TYPE_MOUSE, 表示触摸设备;</p></li><li><p>tilt[X|Y]: 笔的倾斜程度;</p></li></ul><p>举一个简单例子：</p><pre>function handleMove(evt) { evt.preventDefault(); // 阻止浏览器继续处理触摸事件，也阻止发出鼠标事件 var touches = evt.changedTouches; for (var i = 0; i < touches.length; i++) { var id = touches[i].identifier; var touch = touches.identifiedTouch(id); console.log(touch.pageX, touch.pageY); } }</pre><p>对于跨平台交互，我封装了一个 tap相关事件如下：</p><pre>//以下代码并未兼容低版本 IE function addTapListener(node, callback){ var startEvent = window.onmousedown ? window.onmspointerdown ? 'mspointerdow' : 'mousedown' : 'touchstart'; var event = window.onclick ? 'click' : 'touch'; var endEvent = window.onmouseup ? 'mouseup' : 'touchend'; node.addEventListener(startEvent, function(e){ var tap = document.createEvent('CustomEvent'); tap.initCustomEvent('tapstart', true, true, null); node.dispatchEvent(tap); }); node.addEventListener(event, function(e){ var tap = document.createEvent('CustomEvent'); tap.initCustomEvent('tap', true, true, null); node.dispatchEvent(tap); }); node.addEventListener(endEvent, function(e){ var tap = document.createEvent('CustomEvent'); tap.initCustomEvent('tapend', true, true, null); node.dispatchEvent(tap); }); node.addEventListener('tap', callback); }</pre><p>当然本文仅仅列举了一些常用事件，其实事件还有很多，本文会在必要的时候继续更新，但即便如此也不可能穷尽所有的事件，比如还有动画事件: animationstart, animation, animationend 等等。</p><p>感谢你能够认真阅读完这篇文章，希望小编分享的“html中浏览器中常用事件有哪些”这篇文章对大家有帮助，同时也希望大家多多支持<a href="https://www.cdcxhl.com/" target="_blank">创新互联建站</a>，关注创新互联网站制作公司行业资讯频道，更多相关知识等着你来学习!</p> <br> 当前名称：html中浏览器中常用事件有哪些-创新互联 <br> 浏览地址：<a href="http://scyingshan.cn/article/dopoii.html">http://scyingshan.cn/article/dopoii.html</a> </div> <div class="hot_new"> <div class="page_title clearfix"> <h3>其他资讯</h3> </div> <div class="news_list clearfix"> <ul> <li> <a href="/article/gpjihg.html">C#异常类有哪些</a> </li><li> <a href="/article/gpjgoo.html">如何理解K8s中GPU管理和DevicePl</a> </li><li> <a href="/article/gpjiph.html">Centos7.3部署LAMP架构动静分离</a> </li><li> <a href="/article/gpjihh.html">Backuppc配置三 centos6.3</a> </li><li> <a href="/article/gpjipg.html">怎么设置html的编码格式</a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- 底部信息 --> <div class="footer wow fadeInUp"> <div class="rowFluid"> <div class="span12"> <div class="container"> <div class="footer_content"> <div class="span4 col-xm-12"> <div class="footer_list"> <div class="span6"> <div class="bottom_logo"><img src="/Public/Home/images/ewm.jpg" alt="微信服务号二维码" /></div> </div> <div class="span6 col-xm-12"> <div class="quick_navigation"> <div class="quick_navigation_title">快速导航</div> <ul> <li><a href="http://www.cdhuace.com/huace.html" title="成都画册设计公司" target="_blank">成都画册设计公司</a></li><li><a href="https://www.cdcxhl.com/xiyun.html" title="西云服务器托管" target="_blank">西云服务器托管</a></li><li><a href="https://www.cdcxhl.cn/ " title="腾讯免备案空间" target="_blank">腾讯免备案空间</a></li><li><a href="http://seo.cdkjz.cn/" title="网络推广公司" target="_blank">网络推广公司</a></li><li><a href="http://chengdu.cdcxhl.com/" title="成都营销网站制作" target="_blank">成都营销网站制作</a></li><li><a href="http://www.cdhuace.com/" title="成都广告公司" target="_blank">成都广告公司</a></li><li><a href="http://chengdu.cdweb.net/weixinkaifa/" title="微信小程序公众号开发" target="_blank">微信小程序公众号开发</a></li> </ul> </div> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_link"> <div class="footer_link_title">友情链接</div> <ul id="frientLinks"> <a href="https://www.cdcxhl.com/" title="网站制作" target="_blank">网站制作</a> <a href="https://www.cdcxhl.com/" title="网站建设" target="_blank">网站建设</a> <a href="https://www.cdxwcx.com/tuiguang/" title="成都网络推广" target="_blank">网络推广</a> <a href="http://seo.cdkjz.cn/" title="成都网站推广" target="_blank">网站推广</a> <a href="https://www.cdcxhl.com/xiaochengx.html" title="成都微信小程序开发" target="_blank">小程序开发</a> <a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a> </ul> <div class="footer_link_title">网站建设</div> <ul id="frientLinks"> <li><a href="/">营山大橙子建站</a></li> <li><a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a></li> </ul> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_cotact"> <div class="footer_cotact_title">联系方式</div> <ul> <li><span class="footer_cotact_type">企业：</span><span class="footer_cotact_content">青羊区大橙子信息咨询工作室</span></li> <li><span class="footer_cotact_type">地址：</span><span class="footer_cotact_content">成都市青羊区太升南路288号</span></li> <li><span class="footer_cotact_type">电话：</span><span class="footer_cotact_content"><a href="tel:18980820575" class="call">18980820575</a></span></li> <li><span class="footer_cotact_type">网址：</span><span class="footer_cotact_content"><a href="/" title="营山网站建设">www.scyingshan.cn</a></span></li> </ul> </div> </div> </div> </div> </div> <div class="copyright"> <p>公司名称：青羊区大橙子信息咨询工作室 联系电话：18980820575</p> <p><a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">网站备案号：蜀ICP备2022028542号-24</a></p> <p>营山大橙子建站 营山网站建设 营山网站设计 营山网站制作 <a href="http://www.cdxwcx.cn/" target="_blank">成都做网站</a></p> </div> </div> </div> </div> </body> </html> <script> $(".technical_support_box_z_info_box img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>
</code>的值发生变化时触发。此外，打开 contenteditable 属性的元素，只要值发生变化，也会触发 input 事件。input 事件的一个特点，就是会连续触发，比如用户每次按下一次按键，就会触发一次input事件。</p><p>此类事件包括: keydown, keyup,</p>鼠标事件<p>select 事件当在<input>, <textarea>中选中文本时触发</p><p>change 事件当<input>, <select>, <textarea>的值发生变化时触发。它与 input 事件的大不同，就是不会连续触发，只有当全部修改完成时才会触发，而且input事件必然会引发change事件。具体来说，分成以下几种情况:</p><ul><li><p>激活单选框(radio)或复选框(checkbox)时触发。</p></li><li><p>用户提交时触发。比如，从下列列表(select)完成选择，在日期或文件输入框完成选择。</p></li><li><p>当文本框或textarea元素的值发生改变，并且丧失焦点时触发。</p></li><li><p>reset事件当表单重置(所有表单成员变回默认值)时由form元素触发。</p></li><li><p>submit事件当表单数据向服务器提交时由form元素触发。</p></li></ul>文档事件:beforeunload<p>beforeunload 事件当窗口将要关闭，或者 document 和网页资源将要卸载时触发。它可以用来防止用户不当心关闭网页。该事件的默认动作就是关闭当前窗口或文档。如果在监听函数中，调用了 event.preventDefault()，或者对事件对象的 returnValue 属性赋予一个非空的值，就会自动跳出一个确认框，让用户确认是否关闭网页。如果用户点击“取消”按钮，网页就不会关闭。监听函数所返回的字符串，会显示在确认对话框之中:</p><pre> window.addEventListener('beforeunload', function(event) { if(event.preventDefault){ event.preventDefault(); } else { event.returnValue = '你确认要离开吗？'; } });</pre>unload 与 load<p>unload 事件在窗口关闭或者 document 对象将要卸载时触发，发生在 window, body, frameset 等对象上面。它的触发顺序排在 beforeunload, pagehide 事件后面。unload 事件只在页面没有被浏览器缓存时才会触发，换言之，如果通过按下“前进/后退”导致页面卸载，并不会触发 unload 事件。当 unload 事件发生时，document 对象处于一个特殊状态。所有资源依然存在，但是对用户来说都不可见，UI互动(window.open, alert, confirm方法等)全部无效。这时即使抛出错误，也不能停止文档的卸载。</p><p>load事件在页面加载成功时触发，error事件在页面加载失败时触发。注意，页面从浏览器缓存加载，并不会触发load事件。</p><p>这两个事件实际上属于进度事件，不仅发生在 document 对象，还发生在各种外部资源上面。浏览网页就是一个加载各种资源的过程，图像(image), 样式表(style sheet), 脚本(script), 视频(video), 音频(audio), Ajax请求(XMLHttpRequest)等等。这些资源和document对象, window对象, XMLHttpRequestUpload对象，都会触发 load 事件和 error 事件。</p>pageshow 与 pagehide<p>pageshow事件，pagehide事件: 默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进/后退”按钮时，浏览器就会从缓存中加载页面。<br/>pageshow 事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码，可以放在这个事件的监听函数。第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load 事件不会触发，因为网页在缓存中的样子通常是 load 事件的监听函数运行后的样子，所以不必重复执行。同理，如果是从缓存中加载页面，网页内初始化的 JavaScript 脚本(比如 DOMContentLoaded 事件的监听函数)也不会执行。pageshow 事件有一个 persisted 属性，返回一个布尔值。页面第一次加载时，这个属性是false；当页面从缓存加载时，这个属性是true。</p><pre>document.onpageshow = function(event){} if(event.persisted){ //如果存缓存加载 } }</pre><p>同样的，将这个属性设为 true，就表示页面要保存在缓存中；设为 false ，表示网页不保存在缓存中，这时如果设置了 unload 事件的监听函数，该函数将在 pagehide 事件后立即运行。如果页面包含 frame ，则 frame 页面的 pageshow 事件和 pagehide 事件，都会在主页面之前触发。</p>DOMContentLoaded 和 readystatechange<p>DOMContentLoaded 事件当 HTML 文档下载并解析完成以后，就会在 document 对象上触发 DOMContentLoaded 事件。这时，仅仅完成了 HTML 文档的解析(整张页面的DOM生成)，所有外部资源(样式表, 脚本, iframe等等)可能还没有下载结束。也就是说，这个事件比 load 事件，发生时间早得多。注意，网页的 JavaScript 脚本是同步执行的，所以定义 DOMContentLoaded 事件的监听函数，应该放在所有脚本的最前面。否则脚本一旦发生堵塞，将推迟触发 DOMContentLoaded 事件。此外，IE8 不支持 DOMContentLoaded 事件，可以使用 readystatechange 事件代替。</p><p>readystatechange 事件发生在 Document 对象和 XMLHttpRequest 对象，当它的 readyState 属性发生变化时触发。</p>其他文档级事件<p>上面重点提到了 DOMContentLoaded, readystatechange, pageshow, pagehide, unload, load 和 beforeunload 事件，此外还有一下事件:</p><ul><li><p>onafterprint: 文档打印之后运行的脚本</p></li><li><p>onbeforeprint: 文档打印之前运行的脚本</p></li><li><p>onbeforeunload: 文档卸载之前运行的脚本(上文已涉及)</p></li><li><p>onerror: 在错误发生时运行的脚本</p></li><li><p>onhaschange: 当文档已改变时运行的脚本</p></li><li><p>onload: 页面结束加载之后触发(上文已涉及)</p></li><li><p>onmessage: 在消息被触发时运行的脚本</p></li><li><p>onoffline: 当文档离线时运行的脚本</p></li><li><p>ononline: 当文档上线时运行的脚本</p></li><li><p>onpagehide: 当窗口隐藏时运行的脚本(上文已涉及)</p></li><li><p>onpageshow: 当窗口成为可见时运行的脚本(上文已涉及)</p></li><li><p>onpopstate: 当窗口历史记录改变时运行的脚本</p></li><li><p>onredo: 当文档执行撤销（redo）时运行的脚本</p></li><li><p>onresize: 当浏览器窗口被调整大小时触发</p></li><li><p>onstorage: 在 Web Storage 区域更新后运行的脚本</p></li><li><p>onundo: 在文档执行 undo 时运行的脚本</p></li><li><p>onscroll: 事件在文档或文档元素滚动时执行脚本</p></li></ul>鼠标事件 与 MouseEvent对象<pre>new MouseEvent(typeArg, mouseEventInit);</pre><p>内置的鼠标事件包括:</p><ol><li><p>mousedown: 按下鼠标</p></li><li><p>mouseup: 鼠标抬起</p></li><li><p>click: 点击</p></li><li><p>dblclick: 双击</p></li><li><p>mousemove: 鼠标移动</p></li><li><p>mouseover: 鼠标移入，冒泡</p></li><li><p>mouseout: 鼠标移出，冒泡</p></li><li><p>mouseenter: 鼠标移入，不冒泡</p></li><li><p>mouseleave: 鼠标移出，不冒泡</p></li><li><p>contextmenu: 右键菜单</p></li><li><p>wheel: 滚轮事件</p></li></ol><p>其具有如下常用属性:</p><ul><li><p>altKey，ctrlKey，metaKey，shiftKey属性返回一个布尔值，表示鼠标事件发生时，是否按下某个键；</p></li><li><p>button 返回事件的鼠标键信息, 值为0(左键), 1或4(中键, 4为IE中的值)，2(右键)，可通过switch来选择执行分之)；</p></li><li><p>buttons 属性返回一个3个比特位的值，表示同时按下了哪些键</p></li><li><p>clientX，clientY 返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素</p></li><li><p>screenX，screenY 返回鼠标位置相对于屏幕左上角的坐标，单位为像素</p></li><li><p>movementX，movementY 返回一个位移，单位为像素，表示当前位置与上一个 mousemove 事件之间的距离，在数值上:</p></li></ul><p>currentEvent.movementX = currentEvent.screenX - previousEvent.screenX<br/>currentEvent.movementY = currentEvent.screenY - previousEvent.screenY</p><ul><li><p>relatedTarget属性返回事件的次要相关节点，即和target属性对应的节点，如: mouseout target 指将要离开的节点，relatedTarget 指将要进入的节点。对于那些没有次要相关节点的事件，该属性返回null</p></li><li><p>wheel 事件是与鼠标滚轮相关的事件，浏览器提供一个 WheelEvent 构造函数 new WheelEvent(typeArg, mouseEventInit)</p></li><li><p>deltaX: 返回一个数值，表示滚轮的水平滚动量</p></li><li><p>deltaY: 返回一个数值，表示滚轮的垂直滚动量</p></li><li><p>deltaZ: 返回一个数值，表示滚轮的Z轴滚动量</p></li><li><p>deltaMode: 返回一个数值，表示滚动的单位，适用于上面三个属性。0表示像素，1表示行，2表示页</p></li></ul>键盘事件 KeyboardEvent 对象<pre>构造函数 new KeyboardEvent(typeArg, KeyboardEventInit)</pre><p>键盘事件包括keydown(按下键盘时触发该事件)，keypress(只要按下的键并非Ctrl, Alt, Shift和Meta，就接着触发keypress事件), keyup(松开键盘时触发该事件)</p><ul><li><p>altKey，ctrlKey，metaKey，shiftKey: 返回一个布尔值，表示是否按下对应的键</p></li><li><p>key: 返回一个字符串，表示按下的键名。如果同时按下一个控制键和一个符号键，则返回符号键的键名</p></li><li><p>keyCode: 返回按键的 ASCII 码，注意: 这里是不区分大小写的，<code>A键</code>不论输出 A 还是 a keyCode 都是68。在 IE 中使用 witch 属性</p></li></ul>进度事件 ProgressEvent对象<pre>new ProgressEvent(type, { lengthComputable: aBooleanValue, // false as default loaded: aNumber, // 0 as default total: aNumber // 0 as default });</pre><p>进度事件用来描述一个事件进展的过程，比如XMLHttpRequest对象发出的HTTP请求的过程,<code><img></code>,<code><audio></code>,<code><video></code>,<code><style></code>,<code><link></code>加载外部资源的过程，包括下载和上传。通常包括以下事件:</p><ol><li><p>abort事件: 当进度事件被中止时触发。如果发生错误，导致进程中止，不会触发该事件。</p></li><li><p>error事件: 由于错误导致资源无法加载时触发，不会冒泡。error 事件的监听函数最好放在如 img 元素的 HTML 属性中。</p></li><li><p>load事件: 进度成功结束时触发。</p></li><li><p>loadstart事件: 进度开始时触发。</p></li><li><p>loadend事件: 进度停止时触发，发生顺序排在error事件abort事件load事件后面。loadend事件的监听函数可以用来取代abort事件/load事件/error事件的监听函数，loadend事件本身不提供关于进度结束的原因，但可以用它来做所有进度结束场景都需要做的一些操作。</p></li><li><p>progress事件: 当操作处于进度之中，由传输的数据块不断触发。</p></li><li><p>timeout事件: 进度超过限时触发</p></li></ol><p>这类事件具有以下属性:</p><ul><li><p>lengthComputable: 返回一个布尔值，表示当前进度是否具有可计算的长度。如果为false，就表示当前进度无法测量。</p></li><li><p>total: 返回一个数值，表示当前进度的总长度。如果是通过 HTTP 下载某个资源，表示内容本身的长度，不含 HTTP 头部的长度。如果 lengthComputable 属性为 false，则 total 属性就无法取得正确的值。</p></li><li><p>loaded: 返回一个数值，表示当前进度已经完成的数量。该属性除以total属性，就可以得到目前进度的百分比。</p></li></ul><pre>//进度计算 if (e.lengthComputable){ var percentComplete = e.loaded / e.total; }</pre>拖拽事件 DragEvent 对象<pre>new DragEvent(type, DragEventInit);</pre><p>拖拽指的是，用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。拖拽的对象有好几种，包括 Element 节点, 图片, 链接, 选中的文字等等。在 HTML 网页中，除了 Element 节点默认不可以拖拽，其他(图片, 链接, 选中的文字)都是可以直接拖拽的。为了让 Element 节点可拖拽，可以将该节点的 draggable 属性设为 true。draggable 属性可用于任何 Element 节点，但是图片(img 元素)和链接(a 元素)不加这个属性，就可以拖拽。对于它们，用到这个属性的时候，往往是将其设为 false，防止拖拽。注意，一旦某个 Element 节点的 draggable 属性设为 true，就无法再用鼠标选中该节点内部的文字或子节点了。</p><p>当Element节点或选中的文本被拖拽时，就会持续触发拖拽事件，包括以下一些事件:</p><ol><li><p>drag事件: 拖拽过程中，在被拖拽的节点上持续触发。</p></li><li><p>dragstart事件: 拖拽开始时在被拖拽的节点上触发，该事件的target属性是被拖拽的节点。通常应该在这个事件的监听函数中，指定拖拽的数据。</p></li><li><p>dragend事件: 拖拽结束时(释放鼠标键或按下escape键)在被拖拽的节点上触发，该事件的target属性是被拖拽的节点。它与dragStart事件，在同一个节点上触发。不管拖拽是否跨窗口，或者中途被取消，dragend事件总是会触发的。</p></li><li><p>dragenter事件: 拖拽进入当前节点时，在当前节点上触发，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下(drop)拖拽的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拽进入当前节点，也是在这个事件的监听函数中设置。</p></li><li><p>dragover事件: 拖拽到当前节点上方时，在当前节点上持续触发，该事件的target属性是当前节点。该事件与dragenter事件基本类似，默认会重置当前的拖拽事件的效果(DataTransfer对象的dropEffect属性)为none，即不允许放下被拖拽的节点，所以如果允许在当前节点drop数据，通常会使用preventDefault方法，取消重置拖拽效果为none。</p></li><li><p>dragleave事件: 拖拽离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。在视觉上显示拖拽离开当前节点，就在这个事件的监听函数中设置。</p></li><li><p>drop事件: 被拖拽的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下Escape键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拽数据，并进行相关处理。</p></li></ol><p>关于拖拽事件，有以下几点注意事项:</p><ol><li><p>拖拽过程只触发以上这些拖拽事件，尽管鼠标在移动，但是鼠标事件不会触发。</p></li><li><p>将文件从操作系统拖拽进浏览器，不会触发 dragStart 和 dragend 事件。</p></li><li><p>dragenter 和 dragover 事件的监听函数，用来指定可以放下(drop)拖拽的数据。由于网页的大部分区域不适合作为 drop 的目标节点，所以这两个事件的默认设置为当前节点不允许 drop。如果想要在目标节点上 drop 拖拽的数据，首先必须阻止这两个事件的默认行为，或者取消这两个事件。</p></li></ol><pre><p ondragover="return false"> //或 <p ondragover="event.preventDefault()"></pre><ol><li><p>拖拽事件用一个 DragEvent 对象表示，该对象继承 MouseEvent 对象，DragEvent 对象只有一个独有的属性 dataTransfer，其他都是继承的属性。dataTransfer 属性用来读写拖拽事件中传输的数据，所有的拖拽事件都有一个 dataTransfer 属性，用来保存需要传递的数据，这个属性的值是一个 DataTransfer 对象。拖拽的数据保存两方面的数据: 数据的种类(又称格式)和数据的值。数据的种类是一个MIME字符串，比如 text/plain 或者 image/jpg，数据的值是一个字符串;</p></li></ol><p>dataTransfer 对象的属性的值是一个对象，其中包括以下属性:</p><ul><li><p>dropEffect 属性: 设置放下(drop)被拖拽节点时的效果，可能的值包括 copy(复制被拖拽的节点), move(移动被拖拽的节点), link(创建指向被拖拽的节点的链接), none(无法放下被拖拽的节点)。设置除此以外的值，都是无效的。</p></li><li><p>effectAllowed 属性: 设置本次拖拽中允许的效果，可能的值包括 copy, move, link, copyLink, copyMove, linkMove, all, none, uninitialized(默认值，等同于 all)。如果某种效果是不允许的，用户就无法在目标节点中达成这种效果。</p></li><li><p>files 属性: 是一个 FileList 对象，包含一组本地文件，可以用来在拖拽操作中传送。如果本次拖拽不涉及文件，则属性为空的 FileList 对象。通过files属性读取拖拽文件的信息。如果想要读取文件内容，就要使用 FileReader 对象。</p></li><li><p>types 属性: 是一个数组，保存每一次拖拽的数据格式，如'text/uri-list'</p></li><li><p>setData() 方法: 用来设置事件所带有的指定类型的数据。它接受两个参数，第一个是数据类型，第二个是具体数据。如果指定的类型在现有数据中不存在，则该类型将写入types属性；如果已经存在，在该类型的现有数据将被替换。</p></li></ul><pre>event.dataTransfer.setData("text/plain", "Text to drag");</pre><ul><li><p>getData() 方法接受一个字符串(表示数据类型)作为参数，返回事件所带的指定类型的数据(通常是用 setData 方法添加的数据)。如果指定类型的数据不存在，则返回空字符串。</p></li></ul><pre>event.dataTransfer.getData(types[0]);</pre><ul><li><p>clearData() 方法接受一个字符串(表示数据类型)作为参数，删除事件所带的指定类型的数据。如果没有指定类型，则删除所有数据。如果指定类型不存在，则原数据不受影响。</p></li></ul><pre>event.dataTransfer.clearData("text/uri-list");</pre><ul><li><p>setDragImage() 可以用来自定义这张图片，它接受三个参数，第一个是img图片元素或者canvas元素，如果省略或为null则使用被拖动的节点的外观，第二个和第三个参数为鼠标相对于该图片左上角的横坐标和右坐标。</p></li></ul><pre>event.dataTransfer.setDragImage(img, 0, 0);</pre>触摸事件<pre> new Touch(touchInit);</pre><p>触摸事件包括以下5种:</p><ol><li><p>touchstart: 用户接触触摸屏时触发，它的 target 属性返回发生触摸的 Element 节点(IE10+中使用 mspointerdown 事件);</p></li><li><p>touchend: 用户不再接触触摸屏时(或者移出屏幕边缘时)触发，它的 target 属性与 touchstart 事件的 target 属性是一致的，它的 changedTouches 属性返回一个TouchList对象，包含所有不再触摸的触摸点(Touch对象)(IE10+中使用 mspointerup 事件);</p></li><li><p>touchmove: 用户移动触摸点时触发，它的 target 属性与 touchstart 事件的 target 属性一致。如果触摸的半径, 角度, 力度发生变化，也会触发该事件。(IE10+中使用 mspointermove 事件);</p></li><li><p>touchenter: 当触点进入某个 element 时触发。此事件没有冒泡过程。(IE10+中使用 mspointerover 事件);</p></li><li><p>touchleave: 当触点离开某个 element 时触发。此事件没有冒泡过程。(IE10+中使用 mspointerout 事件);</p></li><li><p>touchcancel: 当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):(IE10+中没有对应事件);</p></li></ol><ul><ol><li><p>由于某个事件取消了触摸: 例如触摸过程被一个模态的弹出框或电话打断;</p></li><li><p>触点离开了文档窗口，而进入了浏览器的界面元素, 插件或者其他外部内容区域;</p></li><li><p>当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch 对象被取消。</p></li></ol></ul><p>触摸 API 由三个对象组成。每个 Touch 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 element 描述。 TouchList 对象代表多个触点的一个列表。具体包括以下属性:</p><ul><li><p>identifier 属性: 表示touch实例的独一无二的识别符。它在整个触摸过程中保持不变(IE10+中使用 pointerId 属性);</p></li><li><p>screenX/screenY 属性: 分别表示触摸点相对于屏幕左上角的横坐标和纵坐标，与页面是否滚动无关;</p></li><li><p>clientX/clientY 属性: 分别表示触摸点相对于浏览器视口左上角的横坐标和纵坐标，与页面是否滚动无关;</p></li><li><p>pageX/pageY 属性: 分别表示触摸点相对于当前页面左上角的横坐标和纵坐标，包含了页面滚动带来的位移;</p></li><li><p>radiusX/radiusY 属性: 分别返回触摸点周围受到影响的椭圆范围的X轴和Y轴，单位为像素;</p></li><li><p>rotationAngle 属性: 表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间。指尖接触屏幕，触摸范围会形成一个椭圆，这三个属性就用来描述这个椭圆区域(IE10+中使用 rotation 属性);</p></li><li><p>force 属性: 返回一个0到1之间的数值，表示触摸压力。0代表没有压力，1代表硬件所能识别的大压力(IE10+中使用 pressure 属性,取值0 - 255);</p></li><li><p>target 属性: 返回一个Element节点，代表触摸发生的那个节点。当这个触点最开始被跟踪时(在 touchstart 事件中), 触点位于的HTML元素.哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 window 或 document 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.</p></li><li><p>altKey/ctrlKey/metaKey/shiftKey 都为只读属性: 返回一个布尔值，表示触摸的同时，是否按下某个键</p></li><li><p>changedTouches 属性: 返回一个 TouchList 对象，包含了由当前触摸事件引发的所有Touch对象(即相关的触摸点)。它包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 Touch 对象。只读属性。</p></li><li><p>targetTouches属性: 返回一个 TouchList 对象，包含了触摸的目标 Element 节点内部，所有仍然处于活动状态的触摸点。</p></li><li><p>touches 属性返回一个 TouchList 对象(类数组的对象)，包含了所有当前接触触摸平面的触点的 Touch 对象，无论它们的起始于哪个 element 上，也无论它们状态是否发生了变化。只读属性</p></li><li><p>type 属性: 指此次触摸事件的类型。</p></li><li><p>target属性: 此次触摸事件的目标 element 。这个目标元素对应 TouchEvent.changedTouches 中的触点的起始元素(在之后的事件类型中有说明)，但是请注意: 此次事件中其他的触点的起始元素可能有所不同。以防万一，应使用和每一个单独触点相关联的目标 。</p></li></ul><p>以下是 IE10+ 中的其他属性：</p><ul><li><p>hwTimestamp: 创建事件时间(毫秒);</p></li><li><p>isPrimary: 表示该时间是否是主事件;</p></li><li><p>pointerType: 取值自 event.MSPOINTER_TYPE_TOUCH, event.MAPOINTER_TYPE_PEN, event.MSPOINTER_TYPE_MOUSE, 表示触摸设备;</p></li><li><p>tilt[X|Y]: 笔的倾斜程度;</p></li></ul><p>举一个简单例子：</p><pre>function handleMove(evt) { evt.preventDefault(); // 阻止浏览器继续处理触摸事件，也阻止发出鼠标事件 var touches = evt.changedTouches; for (var i = 0; i < touches.length; i++) { var id = touches[i].identifier; var touch = touches.identifiedTouch(id); console.log(touch.pageX, touch.pageY); } }</pre><p>对于跨平台交互，我封装了一个 tap相关事件如下：</p><pre>//以下代码并未兼容低版本 IE function addTapListener(node, callback){ var startEvent = window.onmousedown ? window.onmspointerdown ? 'mspointerdow' : 'mousedown' : 'touchstart'; var event = window.onclick ? 'click' : 'touch'; var endEvent = window.onmouseup ? 'mouseup' : 'touchend'; node.addEventListener(startEvent, function(e){ var tap = document.createEvent('CustomEvent'); tap.initCustomEvent('tapstart', true, true, null); node.dispatchEvent(tap); }); node.addEventListener(event, function(e){ var tap = document.createEvent('CustomEvent'); tap.initCustomEvent('tap', true, true, null); node.dispatchEvent(tap); }); node.addEventListener(endEvent, function(e){ var tap = document.createEvent('CustomEvent'); tap.initCustomEvent('tapend', true, true, null); node.dispatchEvent(tap); }); node.addEventListener('tap', callback); }</pre><p>当然本文仅仅列举了一些常用事件，其实事件还有很多，本文会在必要的时候继续更新，但即便如此也不可能穷尽所有的事件，比如还有动画事件: animationstart, animation, animationend 等等。</p><p>感谢你能够认真阅读完这篇文章，希望小编分享的“html中浏览器中常用事件有哪些”这篇文章对大家有帮助，同时也希望大家多多支持<a href="https://www.cdcxhl.com/" target="_blank">创新互联建站</a>，关注创新互联网站制作公司行业资讯频道，更多相关知识等着你来学习!</p> <br> 当前名称：html中浏览器中常用事件有哪些-创新互联 <br> 浏览地址：<a href="http://scyingshan.cn/article/dopoii.html">http://scyingshan.cn/article/dopoii.html</a> </div> <div class="hot_new"> <div class="page_title clearfix"> <h3>其他资讯</h3> </div> <div class="news_list clearfix"> <ul> <li> <a href="/article/gpjihg.html">C#异常类有哪些</a> </li><li> <a href="/article/gpjgoo.html">如何理解K8s中GPU管理和DevicePl</a> </li><li> <a href="/article/gpjiph.html">Centos7.3部署LAMP架构动静分离</a> </li><li> <a href="/article/gpjihh.html">Backuppc配置三 centos6.3</a> </li><li> <a href="/article/gpjipg.html">怎么设置html的编码格式</a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- 底部信息 --> <div class="footer wow fadeInUp"> <div class="rowFluid"> <div class="span12"> <div class="container"> <div class="footer_content"> <div class="span4 col-xm-12"> <div class="footer_list"> <div class="span6"> <div class="bottom_logo"><img src="/Public/Home/images/ewm.jpg" alt="微信服务号二维码" /></div> </div> <div class="span6 col-xm-12"> <div class="quick_navigation"> <div class="quick_navigation_title">快速导航</div> <ul> <li><a href="http://www.cdhuace.com/huace.html" title="成都画册设计公司" target="_blank">成都画册设计公司</a></li><li><a href="https://www.cdcxhl.com/xiyun.html" title="西云服务器托管" target="_blank">西云服务器托管</a></li><li><a href="https://www.cdcxhl.cn/ " title="腾讯免备案空间" target="_blank">腾讯免备案空间</a></li><li><a href="http://seo.cdkjz.cn/" title="网络推广公司" target="_blank">网络推广公司</a></li><li><a href="http://chengdu.cdcxhl.com/" title="成都营销网站制作" target="_blank">成都营销网站制作</a></li><li><a href="http://www.cdhuace.com/" title="成都广告公司" target="_blank">成都广告公司</a></li><li><a href="http://chengdu.cdweb.net/weixinkaifa/" title="微信小程序公众号开发" target="_blank">微信小程序公众号开发</a></li> </ul> </div> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_link"> <div class="footer_link_title">友情链接</div> <ul id="frientLinks"> <a href="https://www.cdcxhl.com/" title="网站制作" target="_blank">网站制作</a> <a href="https://www.cdcxhl.com/" title="网站建设" target="_blank">网站建设</a> <a href="https://www.cdxwcx.com/tuiguang/" title="成都网络推广" target="_blank">网络推广</a> <a href="http://seo.cdkjz.cn/" title="成都网站推广" target="_blank">网站推广</a> <a href="https://www.cdcxhl.com/xiaochengx.html" title="成都微信小程序开发" target="_blank">小程序开发</a> <a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a> </ul> <div class="footer_link_title">网站建设</div> <ul id="frientLinks"> <li><a href="/">营山大橙子建站</a></li> <li><a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a></li> </ul> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_cotact"> <div class="footer_cotact_title">联系方式</div> <ul> <li><span class="footer_cotact_type">企业：</span><span class="footer_cotact_content">青羊区大橙子信息咨询工作室</span></li> <li><span class="footer_cotact_type">地址：</span><span class="footer_cotact_content">成都市青羊区太升南路288号</span></li> <li><span class="footer_cotact_type">电话：</span><span class="footer_cotact_content"><a href="tel:18980820575" class="call">18980820575</a></span></li> <li><span class="footer_cotact_type">网址：</span><span class="footer_cotact_content"><a href="/" title="营山网站建设">www.scyingshan.cn</a></span></li> </ul> </div> </div> </div> </div> </div> <div class="copyright"> <p>公司名称：青羊区大橙子信息咨询工作室 联系电话：18980820575</p> <p><a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">网站备案号：蜀ICP备2022028542号-24</a></p> <p>营山大橙子建站 营山网站建设 营山网站设计 营山网站制作 <a href="http://www.cdxwcx.cn/" target="_blank">成都做网站</a></p> </div> </div> </div> </div> </body> </html> <script> $(".technical_support_box_z_info_box img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>
建站
咨询
售后
建站咨询