这篇文章主要介绍了html中浏览器中常用事件有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了南票免费建站欢迎大家使用！
当 , </code> 的值发生变化时触发。此外，打开 contenteditable 属性的元素，只要值发生变化，也会触发 input 事件。input 事件的一个特点，就是会连续触发，比如用户每次按下一次按键，就会触发一次input事件。</p><p>此类事件包括: keydown, keyup,</p><h4>鼠标事件</h4><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事件当表单数据向<a title="服务器" target="_blank" href="http://www.cdfuwuqi.com/">服务器</a>提交时由form元素触发。</p></li></ul><h3>文档事件:</h3><h4>beforeunload</h4><p>beforeunload 事件当窗口将要关闭，或者 document 和网页资源将要卸载时触发。它可以用来防止用户不当心关闭网页。该事件的默认动作就是关闭当前窗口或文档。如果在监听函数中，调用了 event.preventDefault()，或者对事件对象的 returnValue 属性赋予一个非空的值，就会自动跳出一个确认框，让用户确认是否关闭网页。如果用户点击“取消”按钮，网页就不会关闭。监听函数所返回的字符串，会显示在确认对话框之中:</p><pre> window.addEventListener('beforeunload', function(event) { if(event.preventDefault){ event.preventDefault(); } else { event.returnValue = '你确认要离开吗？'; } });</pre><h4>unload 与 load</h4><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><h4>pageshow 与 pagehide</h4><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><h4>DOMContentLoaded 和 readystatechange</h4><p>DOMContentLoaded 事件当 HTML 文档下载并解析完成以后，就会在 document 对象上触发 DOMContentLoaded 事件。这时，仅仅完成了 HTML 文档的解析(整张页面的DOM生成)，所有外部资源(样式表, 脚本, iframe等等)可能还没有下载结束。也就是说，这个事件比 load 事件，发生时间早得多。注意，网页的 JavaScript 脚本是同步执行的，所以定义 DOMContentLoaded 事件的监听函数，应该放在所有脚本的最前面。否则脚本一旦发生堵塞，将推迟触发 DOMContentLoaded 事件。此外，IE8 不支持 DOMContentLoaded 事件，可以使用 readystatechange 事件代替。</p><p>readystatechange 事件发生在 Document 对象和 XMLHttpRequest 对象，当它的 readyState 属性发生变化时触发。</p><h4>其他文档级事件</h4><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><h3>鼠标事件 与 MouseEvent对象</h3><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><h3>键盘事件 KeyboardEvent 对象</h3><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><h3>进度事件 ProgressEvent对象</h3><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><h3>拖拽事件 DragEvent 对象</h3><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><h3>触摸事件</h3><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中浏览器中常用事件有哪些”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!</p> <br> 文章题目：html中浏览器中常用事件有哪些 <br> 标题来源：<a href="http://kswjz.com/article/igceoj.html">http://kswjz.com/article/igceoj.html</a> </div> <div class="view-qrocde cl"> <div class="m z"><img src="/Public/Home/images/ew.jpg"/></div> <div class="text"> <h6>扫二维码与项目经理沟通</h6> <p>我们在微信上24小时期待你的声音</p> <p>解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流</p> </div> </div> <div class="othernews cl"> <h3>其他资讯</h3> <ul> <li><a href="/article/hgdcep.html">oracle如何保存整数 Oracle 取整数</a></li><li><a href="/article/hgdcso.html">谷歌go用什么编程语言 go语言如何</a></li><li><a href="/article/hgdcij.html">我的电脑mysql怎么找 怎么看电脑装了mysql</a></li><li><a href="/article/hgddpo.html">php查询数据页面的代码 php实现查询功能</a></li><li><a href="/article/hgdcde.html">oracle数据如何备份 oracle数据库如何备份</a></li> </ul> </div> </div> </div> <div class="sidebar"> <div class="tuijian"> <a href="#"> <h2 class="cl"><span>行业动态</span></h2> <h3>企业网站建设的重要性！</h3> <p>现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...</p> </a> </div> <div class="ser sidesub"> <h2>服务项目</h2> <ul class="ebox"> <li class="sub sub-1"> <div> <h3>网站建设</h3> <p></p> <a class="btn" href="/serve/website/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>移动端/APP</h3> <p></p> <a class="btn" href="/serve/moblie/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>微信/小程序</h3> <p></p> <a class="btn" href="/serve/small/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>技术支持</h3> <p></p> <a class="btn" href="/serve/tech/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>其它服务</h3> <p></p> <a class="btn" href="/serve/othe/">查看详情</a> </div> </li> <li class="sub sub-5"> <div> <h3>更多服务项目</h3> <p> <a>用我们的专业和诚信赢得您的信赖，从PC到移动互联网均有您想要的服务！</a></p> <a class="btn" href="/serve/">获取更多</a> </div> </li> </ul> </div> <div class="contact" id="fix"> <h2 class="cl"> <span>联系吧</span> <a href="https://map.baidu.com/" class="ditu" rel="nofollow" target="_blank">在百度地图上找到我们</a> </h2> <h3>电话：13518219792</h3> <p>如遇占线或暂未接听请拨：136xxx98888</p> <div class="qq"> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">业务咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">技术咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">售后服务</a> </div> </div> </div> <script> //固定滚动 (function () { var oDiv = document.getElementById("fix"); var H = 120, iE6; var Y = oDiv; while (Y) { H += Y.offsetTop; Y = Y.offsetParent }; iE6 = window.ActiveXObject && !window.XMLHttpRequest; if (!iE6) { window.onscroll = function () { var s = document.body.scrollTop || document.documentElement.scrollTop; if (s > H) { oDiv.className = "contact fixed"; if (iE6) { oDiv.style.top = (s - H) + "px"; } } else { oDiv.className = "contact "; } }; } })(); </script> </div> <div class="footer"> <div class="wp"> <div class="wpss cl"> <dl class="about"> <dt>网站设计</dt> <dd><a href="http://www.kswcd.cn/" target="_blank" title="专业网站设计">专业网站设计</a></dd><dd><a href="http://www.abwzjs.com/" target="_blank" title="阿坝网站设计">阿坝网站设计</a></dd><dd><a href="http://www.pzhzwz.com/" target="_blank" title="攀枝花网站设计">攀枝花网站设计</a></dd><dd><a href="http://www.cdkjz.cn/fangan/led/" target="_blank" title="LED网站设计方案">LED网站设计方案</a></dd> </dl> <dl class="about"> <dt>网站制作</dt> <dd><a href="http://www.cdxtjz.com/" target="_blank" title="网站制作">网站制作</a></dd><dd><a href="http://www.cdkjz.cn/" target="_blank" title="成都网站制作">成都网站制作</a></dd><dd><a href="http://m.cdcxhl.cn/mobile/" target="_blank" title="手机网站制作">手机网站制作</a></dd><dd><a href="http://www.gawzjs.com/" target="_blank" title="广安网站制作公司">广安网站制作公司</a></dd> </dl> <dl class="contact"> <dt>联系我们</dt> <dd>电话：13518219792</dd> <dd>邮箱：631063699@qq.com</dd> <dd>地址：成都青羊区锦天国际1002号</dd> <dd>网址：www.kswjz.com</dd> </dl> <dl class="about" style="margin-left:50px;width:235px;"> <dt>网站建设</dt> <dd><a href="https://www.cdxwcx.com/city/neijiang/" target="_blank" title="内江网站建设">内江网站建设</a></dd><dd><a href="http://www.scjiangyou.cn/" target="_blank" title="江油网站建设">江油网站建设</a></dd><dd><a href="http://www.kswcd.com/service/" target="_blank" title="高端网站建设">高端网站建设</a></dd><dd><a href="http://www.cxhljz.com/" target="_blank" title="成都网站建设">成都网站建设</a></dd> </dl> <dl class="flow"> <dt></dt> <div class="ma cl"> <div class="m"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </div> </dl> </div> </div> <div class="footer-link wp"> <ul class="wpss cl"> <li class="fisrt">友情链接</li> <li><a href="http://www.kratc.com/" title="成都开元" target="_blank">成都开元</a></li><li><a href="http://www.wtcwzsj.com/" title="温岭熙道网站" target="_blank">温岭熙道网站</a></li><li><a href="http://www.cdxwcx.cn/bj/" title="做网站价格" target="_blank">做网站价格</a></li><li><a href="http://www.4006tel.net/yingxiao/" title="整合营销" target="_blank">整合营销</a></li><li><a href="http://www.bjjinzhi.cn/" title="晟和广告" target="_blank">晟和广告</a></li><li><a href="http://chengdu.cdcxhl.cn/weihu/ " title="成都网站维护" target="_blank">成都网站维护</a></li><li><a href="http://www.4006tel.net/mobile/" title="app开发" target="_blank">app开发</a></li><li><a href="http://www.dmvi.cn/ser/baozhuang/" title="成都包装设计公司" target="_blank">成都包装设计公司</a></li><li><a href="https://www.cdxwcx.com/jifang/wenjiang.html" title="温江电信机房" target="_blank">温江电信机房</a></li><li><a href="http://www.scarg.cn/" title="艾瑞格衣柜" target="_blank">艾瑞格衣柜</a></li> </ul> </div> </div> <div class="bot-footer"> <div class="wp"> <p class="wpss"> <em>Copyright © 2002-2023 www.kswjz.com 快上网建站品牌 QQ：244261566 版权所有</em> <em>备案号：<a href="http://beian.miit.gov.cn/" rel="external nofollow">蜀ICP备19037934号</a></em> </p> <p class="wpss" style="line-height:30px !important;"> </p> </div> </div> <div class="footer-kefu"> <ul> <li class="qq"><a href="https://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><em></em>在线咨询</a> </li> <li class="tel"><a href="tel:13518219792" target="_blank"><em></em>13518219792</a></li> <li class="wx"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </li> <li class="m"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>移动版官网</p> </div> </li> <li class="top"><em></em></li> </ul> </div> <script src="/Public/Home/js/all.js"></script> </body> </html> <script> $(".cont 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><h4>鼠标事件</h4><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事件当表单数据向<a title="服务器" target="_blank" href="http://www.cdfuwuqi.com/">服务器</a>提交时由form元素触发。</p></li></ul><h3>文档事件:</h3><h4>beforeunload</h4><p>beforeunload 事件当窗口将要关闭，或者 document 和网页资源将要卸载时触发。它可以用来防止用户不当心关闭网页。该事件的默认动作就是关闭当前窗口或文档。如果在监听函数中，调用了 event.preventDefault()，或者对事件对象的 returnValue 属性赋予一个非空的值，就会自动跳出一个确认框，让用户确认是否关闭网页。如果用户点击“取消”按钮，网页就不会关闭。监听函数所返回的字符串，会显示在确认对话框之中:</p><pre> window.addEventListener('beforeunload', function(event) { if(event.preventDefault){ event.preventDefault(); } else { event.returnValue = '你确认要离开吗？'; } });</pre><h4>unload 与 load</h4><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><h4>pageshow 与 pagehide</h4><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><h4>DOMContentLoaded 和 readystatechange</h4><p>DOMContentLoaded 事件当 HTML 文档下载并解析完成以后，就会在 document 对象上触发 DOMContentLoaded 事件。这时，仅仅完成了 HTML 文档的解析(整张页面的DOM生成)，所有外部资源(样式表, 脚本, iframe等等)可能还没有下载结束。也就是说，这个事件比 load 事件，发生时间早得多。注意，网页的 JavaScript 脚本是同步执行的，所以定义 DOMContentLoaded 事件的监听函数，应该放在所有脚本的最前面。否则脚本一旦发生堵塞，将推迟触发 DOMContentLoaded 事件。此外，IE8 不支持 DOMContentLoaded 事件，可以使用 readystatechange 事件代替。</p><p>readystatechange 事件发生在 Document 对象和 XMLHttpRequest 对象，当它的 readyState 属性发生变化时触发。</p><h4>其他文档级事件</h4><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><h3>鼠标事件 与 MouseEvent对象</h3><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><h3>键盘事件 KeyboardEvent 对象</h3><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><h3>进度事件 ProgressEvent对象</h3><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><h3>拖拽事件 DragEvent 对象</h3><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><h3>触摸事件</h3><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中浏览器中常用事件有哪些”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!</p> <br> 文章题目：html中浏览器中常用事件有哪些 <br> 标题来源：<a href="http://kswjz.com/article/igceoj.html">http://kswjz.com/article/igceoj.html</a> </div> <div class="view-qrocde cl"> <div class="m z"><img src="/Public/Home/images/ew.jpg"/></div> <div class="text"> <h6>扫二维码与项目经理沟通</h6> <p>我们在微信上24小时期待你的声音</p> <p>解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流</p> </div> </div> <div class="othernews cl"> <h3>其他资讯</h3> <ul> <li><a href="/article/hgdcep.html">oracle如何保存整数 Oracle 取整数</a></li><li><a href="/article/hgdcso.html">谷歌go用什么编程语言 go语言如何</a></li><li><a href="/article/hgdcij.html">我的电脑mysql怎么找 怎么看电脑装了mysql</a></li><li><a href="/article/hgddpo.html">php查询数据页面的代码 php实现查询功能</a></li><li><a href="/article/hgdcde.html">oracle数据如何备份 oracle数据库如何备份</a></li> </ul> </div> </div> </div> <div class="sidebar"> <div class="tuijian"> <a href="#"> <h2 class="cl"><span>行业动态</span></h2> <h3>企业网站建设的重要性！</h3> <p>现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...</p> </a> </div> <div class="ser sidesub"> <h2>服务项目</h2> <ul class="ebox"> <li class="sub sub-1"> <div> <h3>网站建设</h3> <p></p> <a class="btn" href="/serve/website/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>移动端/APP</h3> <p></p> <a class="btn" href="/serve/moblie/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>微信/小程序</h3> <p></p> <a class="btn" href="/serve/small/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>技术支持</h3> <p></p> <a class="btn" href="/serve/tech/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>其它服务</h3> <p></p> <a class="btn" href="/serve/othe/">查看详情</a> </div> </li> <li class="sub sub-5"> <div> <h3>更多服务项目</h3> <p> <a>用我们的专业和诚信赢得您的信赖，从PC到移动互联网均有您想要的服务！</a></p> <a class="btn" href="/serve/">获取更多</a> </div> </li> </ul> </div> <div class="contact" id="fix"> <h2 class="cl"> <span>联系吧</span> <a href="https://map.baidu.com/" class="ditu" rel="nofollow" target="_blank">在百度地图上找到我们</a> </h2> <h3>电话：13518219792</h3> <p>如遇占线或暂未接听请拨：136xxx98888</p> <div class="qq"> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">业务咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">技术咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">售后服务</a> </div> </div> </div> <script> //固定滚动 (function () { var oDiv = document.getElementById("fix"); var H = 120, iE6; var Y = oDiv; while (Y) { H += Y.offsetTop; Y = Y.offsetParent }; iE6 = window.ActiveXObject && !window.XMLHttpRequest; if (!iE6) { window.onscroll = function () { var s = document.body.scrollTop || document.documentElement.scrollTop; if (s > H) { oDiv.className = "contact fixed"; if (iE6) { oDiv.style.top = (s - H) + "px"; } } else { oDiv.className = "contact "; } }; } })(); </script> </div> <div class="footer"> <div class="wp"> <div class="wpss cl"> <dl class="about"> <dt>网站设计</dt> <dd><a href="http://www.kswcd.cn/" target="_blank" title="专业网站设计">专业网站设计</a></dd><dd><a href="http://www.abwzjs.com/" target="_blank" title="阿坝网站设计">阿坝网站设计</a></dd><dd><a href="http://www.pzhzwz.com/" target="_blank" title="攀枝花网站设计">攀枝花网站设计</a></dd><dd><a href="http://www.cdkjz.cn/fangan/led/" target="_blank" title="LED网站设计方案">LED网站设计方案</a></dd> </dl> <dl class="about"> <dt>网站制作</dt> <dd><a href="http://www.cdxtjz.com/" target="_blank" title="网站制作">网站制作</a></dd><dd><a href="http://www.cdkjz.cn/" target="_blank" title="成都网站制作">成都网站制作</a></dd><dd><a href="http://m.cdcxhl.cn/mobile/" target="_blank" title="手机网站制作">手机网站制作</a></dd><dd><a href="http://www.gawzjs.com/" target="_blank" title="广安网站制作公司">广安网站制作公司</a></dd> </dl> <dl class="contact"> <dt>联系我们</dt> <dd>电话：13518219792</dd> <dd>邮箱：631063699@qq.com</dd> <dd>地址：成都青羊区锦天国际1002号</dd> <dd>网址：www.kswjz.com</dd> </dl> <dl class="about" style="margin-left:50px;width:235px;"> <dt>网站建设</dt> <dd><a href="https://www.cdxwcx.com/city/neijiang/" target="_blank" title="内江网站建设">内江网站建设</a></dd><dd><a href="http://www.scjiangyou.cn/" target="_blank" title="江油网站建设">江油网站建设</a></dd><dd><a href="http://www.kswcd.com/service/" target="_blank" title="高端网站建设">高端网站建设</a></dd><dd><a href="http://www.cxhljz.com/" target="_blank" title="成都网站建设">成都网站建设</a></dd> </dl> <dl class="flow"> <dt></dt> <div class="ma cl"> <div class="m"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </div> </dl> </div> </div> <div class="footer-link wp"> <ul class="wpss cl"> <li class="fisrt">友情链接</li> <li><a href="http://www.kratc.com/" title="成都开元" target="_blank">成都开元</a></li><li><a href="http://www.wtcwzsj.com/" title="温岭熙道网站" target="_blank">温岭熙道网站</a></li><li><a href="http://www.cdxwcx.cn/bj/" title="做网站价格" target="_blank">做网站价格</a></li><li><a href="http://www.4006tel.net/yingxiao/" title="整合营销" target="_blank">整合营销</a></li><li><a href="http://www.bjjinzhi.cn/" title="晟和广告" target="_blank">晟和广告</a></li><li><a href="http://chengdu.cdcxhl.cn/weihu/ " title="成都网站维护" target="_blank">成都网站维护</a></li><li><a href="http://www.4006tel.net/mobile/" title="app开发" target="_blank">app开发</a></li><li><a href="http://www.dmvi.cn/ser/baozhuang/" title="成都包装设计公司" target="_blank">成都包装设计公司</a></li><li><a href="https://www.cdxwcx.com/jifang/wenjiang.html" title="温江电信机房" target="_blank">温江电信机房</a></li><li><a href="http://www.scarg.cn/" title="艾瑞格衣柜" target="_blank">艾瑞格衣柜</a></li> </ul> </div> </div> <div class="bot-footer"> <div class="wp"> <p class="wpss"> <em>Copyright © 2002-2023 www.kswjz.com 快上网建站品牌 QQ：244261566 版权所有</em> <em>备案号：<a href="http://beian.miit.gov.cn/" rel="external nofollow">蜀ICP备19037934号</a></em> </p> <p class="wpss" style="line-height:30px !important;"> </p> </div> </div> <div class="footer-kefu"> <ul> <li class="qq"><a href="https://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><em></em>在线咨询</a> </li> <li class="tel"><a href="tel:13518219792" target="_blank"><em></em>13518219792</a></li> <li class="wx"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </li> <li class="m"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>移动版官网</p> </div> </li> <li class="top"><em></em></li> </ul> </div> <script src="/Public/Home/js/all.js"></script> </body> </html> <script> $(".cont 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>
