摘要：之前写过一篇浏览器事件的相关操作和事件运行的原理浏览器事件解析。注意，页面从浏览器缓存加载，并不会触发事件。事件有一个属性，返回一个布尔值。此外，不支持事件，可以使用事件代替。
之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件及一些可能的坑。
当 , </b> 的值发生变化时触发。此外，打开 contenteditable 属性的元素，只要值发生变化，也会触发 input 事件。input 事件的一个特点，就是会连续触发，比如用户每次按下一次按键，就会触发一次input事件。</p> <p>此类事件包括: keydown, keyup,</p> <b>鼠标事件</b> <p>select 事件当在<b><input></b>, <b><textarea></b>中选中文本时触发</p> <p>change 事件当<b><input></b>, <b><select></b>, <b><textarea></b>的值发生变化时触发。它与 input 事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，而且input事件必然会引发change事件。具体来说，分成以下几种情况:</p> <p>激活单选框(radio)或复选框(checkbox)时触发。</p> <p>用户提交时触发。比如，从下列列表(select)完成选择，在日期或文件输入框完成选择。</p> <p>当文本框或textarea元素的值发生改变，并且丧失焦点时触发。</p> <p>reset事件当表单重置(所有表单成员变回默认值)时由form元素触发。</p> <p>submit事件当表单数据向服务器提交时由form元素触发。</p> <b>文档事件:</b> <b>beforeunload</b> <p>beforeunload 事件当窗口将要关闭，或者 document 和网页资源将要卸载时触发。它可以用来防止用户不当心关闭网页。该事件的默认动作就是关闭当前窗口或文档。如果在监听函数中，调用了 event.preventDefault()，或者对事件对象的 returnValue 属性赋予一个非空的值，就会自动跳出一个确认框，让用户确认是否关闭网页。如果用户点击“取消”按钮，网页就不会关闭。监听函数所返回的字符串，会显示在确认对话框之中:</p> <pre> window.addEventListener("beforeunload", function(event) { if(event.preventDefault){ event.preventDefault(); } else { event.returnValue = "你确认要离开吗？"; } });</pre> <b>unload 与 load</b> <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> <b>pageshow 与 pagehide</b> <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> <b>DOMContentLoaded 和 readystatechange</b> <p>DOMContentLoaded 事件当 HTML 文档下载并解析完成以后，就会在 document 对象上触发 DOMContentLoaded 事件。这时，仅仅完成了 HTML 文档的解析(整张页面的DOM生成)，所有外部资源(样式表, 脚本, iframe等等)可能还没有下载结束。也就是说，这个事件比 load 事件，发生时间早得多。注意，网页的 JavaScript 脚本是同步执行的，所以定义 DOMContentLoaded 事件的监听函数，应该放在所有脚本的最前面。否则脚本一旦发生堵塞，将推迟触发 DOMContentLoaded 事件。此外，IE8 不支持 DOMContentLoaded 事件，可以使用 readystatechange 事件代替。</p> <p>readystatechange 事件发生在 Document 对象和 XMLHttpRequest 对象，当它的 readyState 属性发生变化时触发。</p> <b>其他文档级事件</b> <p>上面重点提到了 DOMContentLoaded, readystatechange, pageshow, pagehide, unload, load 和 beforeunload 事件，此外还有一下事件:</p> <p>onafterprint: 文档打印之后运行的脚本</p> <p>onbeforeprint: 文档打印之前运行的脚本</p> <p>onbeforeunload: 文档卸载之前运行的脚本(上文已涉及)</p> <p>onerror: 在错误发生时运行的脚本</p> <p>onhaschange: 当文档已改变时运行的脚本</p> <p>onload: 页面结束加载之后触发(上文已涉及)</p> <p>onmessage: 在消息被触发时运行的脚本</p> <p>onoffline: 当文档离线时运行的脚本</p> <p>ononline: 当文档上线时运行的脚本</p> <p>onpagehide: 当窗口隐藏时运行的脚本(上文已涉及)</p> <p>onpageshow: 当窗口成为可见时运行的脚本(上文已涉及)</p> <p>onpopstate: 当窗口历史记录改变时运行的脚本</p> <p>onredo: 当文档执行撤销（redo）时运行的脚本</p> <p>onresize: 当浏览器窗口被调整大小时触发</p> <p>onstorage: 在 Web Storage 区域更新后运行的脚本</p> <p>onundo: 在文档执行 undo 时运行的脚本</p> <p>onscroll: 事件在文档或文档元素滚动时执行脚本</p> <b>鼠标事件 与 MouseEvent对象</b> <pre>new MouseEvent(typeArg, mouseEventInit);</pre> <p>内置的鼠标事件包括:</p> <p>mousedown: 按下鼠标</p> <p>mouseup: 鼠标抬起</p> <p>click: 点击</p> <p>dblclick: 双击</p> <p>mousemove: 鼠标移动</p> <p>mouseover: 鼠标移入，冒泡</p> <p>mouseout: 鼠标移出，冒泡</p> <p>mouseenter: 鼠标移入，不冒泡</p> <p>mouseleave: 鼠标移出，不冒泡</p> <p>contextmenu: 右键菜单</p> <p>wheel: 滚轮事件</p> <p>其具有如下常用属性:</p> <p>altKey，ctrlKey，metaKey，shiftKey属性返回一个布尔值，表示鼠标事件发生时，是否按下某个键；</p> <p>button 返回事件的鼠标键信息, 值为0(左键), 1或4(中键, 4为IE中的值)，2(右键)，可通过switch来选择执行分之)；</p> <p>buttons 属性返回一个3个比特位的值，表示同时按下了哪些键</p> <p>clientX，clientY 返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素</p> <p>screenX，screenY 返回鼠标位置相对于屏幕左上角的坐标，单位为像素</p> <p>movementX，movementY 返回一个位移，单位为像素，表示当前位置与上一个 mousemove 事件之间的距离，在数值上:</p> <pre>currentEvent.movementX = currentEvent.screenX - previousEvent.screenX<br>currentEvent.movementY = currentEvent.screenY - previousEvent.screenY</pre> <p>relatedTarget属性返回事件的次要相关节点，即和target属性对应的节点，如: mouseout target 指将要离开的节点，relatedTarget 指将要进入的节点。对于那些没有次要相关节点的事件，该属性返回null</p> <p>wheel 事件是与鼠标滚轮相关的事件，浏览器提供一个 WheelEvent 构造函数 new WheelEvent(typeArg, mouseEventInit)</p> <p>deltaX: 返回一个数值，表示滚轮的水平滚动量</p> <p>deltaY: 返回一个数值，表示滚轮的垂直滚动量</p> <p>deltaZ: 返回一个数值，表示滚轮的Z轴滚动量</p> <p>deltaMode: 返回一个数值，表示滚动的单位，适用于上面三个属性。0表示像素，1表示行，2表示页</p> <b>键盘事件 KeyboardEvent 对象</b> <pre>构造函数 new KeyboardEvent(typeArg, KeyboardEventInit)</pre> <p>键盘事件包括keydown(按下键盘时触发该事件)，keypress(只要按下的键并非Ctrl, Alt, Shift和Meta，就接着触发keypress事件), keyup(松开键盘时触发该事件)</p> <p>altKey，ctrlKey，metaKey，shiftKey: 返回一个布尔值，表示是否按下对应的键</p> <p>key: 返回一个字符串，表示按下的键名。如果同时按下一个控制键和一个符号键，则返回符号键的键名</p> <p>keyCode: 返回按键的 ASCII 码，注意: 这里是不区分大小写的，<b>A键</b>不论输出 A 还是 a keyCode 都是68。在 IE 中使用 witch 属性</p> <b>进度事件 ProgressEvent对象</b> <pre>new ProgressEvent(type, { lengthComputable: aBooleanValue, // false as default loaded: aNumber, // 0 as default total: aNumber // 0 as default });</pre> <p>进度事件用来描述一个事件进展的过程，比如XMLHttpRequest对象发出的HTTP请求的过程, <b><img></b>, <b><audio></b>, <b><video></b>, <b><style></b>, <b><link></b>加载外部资源的过程，包括下载和上传。通常包括以下事件:</p> <p>abort事件: 当进度事件被中止时触发。如果发生错误，导致进程中止，不会触发该事件。</p> <p>error事件: 由于错误导致资源无法加载时触发，不会冒泡。error 事件的监听函数最好放在如 img 元素的 HTML 属性中。</p> <p>load事件: 进度成功结束时触发。</p> <p>loadstart事件: 进度开始时触发。</p> <p>loadend事件: 进度停止时触发，发生顺序排在error事件abort事件load事件后面。loadend事件的监听函数可以用来取代abort事件/load事件/error事件的监听函数，loadend事件本身不提供关于进度结束的原因，但可以用它来做所有进度结束场景都需要做的一些操作。</p> <p>progress事件: 当操作处于进度之中，由传输的数据块不断触发。</p> <p>timeout事件: 进度超过限时触发</p> <p>这类事件具有以下属性:</p> <p>lengthComputable: 返回一个布尔值，表示当前进度是否具有可计算的长度。如果为false，就表示当前进度无法测量。</p> <p>total: 返回一个数值，表示当前进度的总长度。如果是通过 HTTP 下载某个资源，表示内容本身的长度，不含 HTTP 头部的长度。如果 lengthComputable 属性为 false，则 total 属性就无法取得正确的值。</p> <p>loaded: 返回一个数值，表示当前进度已经完成的数量。该属性除以total属性，就可以得到目前进度的百分比。</p> <pre>//进度计算 if (e.lengthComputable){ var percentComplete = e.loaded / e.total; }</pre> <b>拖拽事件 DragEvent 对象</b> <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> <p>drag事件: 拖拽过程中，在被拖拽的节点上持续触发。</p> <p>dragstart事件: 拖拽开始时在被拖拽的节点上触发，该事件的target属性是被拖拽的节点。通常应该在这个事件的监听函数中，指定拖拽的数据。</p> <p>dragend事件: 拖拽结束时(释放鼠标键或按下escape键)在被拖拽的节点上触发，该事件的target属性是被拖拽的节点。它与dragStart事件，在同一个节点上触发。不管拖拽是否跨窗口，或者中途被取消，dragend事件总是会触发的。</p> <p>dragenter事件: 拖拽进入当前节点时，在当前节点上触发，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下(drop)拖拽的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拽进入当前节点，也是在这个事件的监听函数中设置。</p> <p>dragover事件: 拖拽到当前节点上方时，在当前节点上持续触发，该事件的target属性是当前节点。该事件与dragenter事件基本类似，默认会重置当前的拖拽事件的效果(DataTransfer对象的dropEffect属性)为none，即不允许放下被拖拽的节点，所以如果允许在当前节点drop数据，通常会使用preventDefault方法，取消重置拖拽效果为none。</p> <p>dragleave事件: 拖拽离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。在视觉上显示拖拽离开当前节点，就在这个事件的监听函数中设置。</p> <p>drop事件: 被拖拽的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下Escape键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拽数据，并进行相关处理。</p> <p>关于拖拽事件，有以下几点注意事项:</p> <p>拖拽过程只触发以上这些拖拽事件，尽管鼠标在移动，但是鼠标事件不会触发。</p> <p>将文件从操作系统拖拽进浏览器，不会触发 dragStart 和 dragend 事件。</p> <p>dragenter 和 dragover 事件的监听函数，用来指定可以放下(drop)拖拽的数据。由于网页的大部分区域不适合作为 drop 的目标节点，所以这两个事件的默认设置为当前节点不允许 drop。如果想要在目标节点上 drop 拖拽的数据，首先必须阻止这两个事件的默认行为，或者取消这两个事件。</p> <pre><div ondragover="return false"> //或 <div ondragover="event.preventDefault()"></pre> <p>拖拽事件用一个 DragEvent 对象表示，该对象继承 MouseEvent 对象，DragEvent 对象只有一个独有的属性 dataTransfer，其他都是继承的属性。dataTransfer 属性用来读写拖拽事件中传输的数据，所有的拖拽事件都有一个 dataTransfer 属性，用来保存需要传递的数据，这个属性的值是一个 DataTransfer 对象。拖拽的数据保存两方面的数据: 数据的种类(又称格式)和数据的值。数据的种类是一个MIME字符串，比如 text/plain 或者 image/jpg，数据的值是一个字符串;</p> <p>dataTransfer 对象的属性的值是一个对象，其中包括以下属性:</p> <p>dropEffect 属性: 设置放下(drop)被拖拽节点时的效果，可能的值包括 copy(复制被拖拽的节点), move(移动被拖拽的节点), link(创建指向被拖拽的节点的链接), none(无法放下被拖拽的节点)。设置除此以外的值，都是无效的。</p> <p>effectAllowed 属性: 设置本次拖拽中允许的效果，可能的值包括 copy, move, link, copyLink, copyMove, linkMove, all, none, uninitialized(默认值，等同于 all)。如果某种效果是不允许的，用户就无法在目标节点中达成这种效果。</p> <p>files 属性: 是一个 FileList 对象，包含一组本地文件，可以用来在拖拽操作中传送。如果本次拖拽不涉及文件，则属性为空的 FileList 对象。通过files属性读取拖拽文件的信息。如果想要读取文件内容，就要使用 FileReader 对象。</p> <p>types 属性: 是一个数组，保存每一次拖拽的数据格式，如"text/uri-list"</p> <p>setData() 方法: 用来设置事件所带有的指定类型的数据。它接受两个参数，第一个是数据类型，第二个是具体数据。如果指定的类型在现有数据中不存在，则该类型将写入types属性；如果已经存在，在该类型的现有数据将被替换。</p> <pre>event.dataTransfer.setData("text/plain", "Text to drag");</pre> <p>getData() 方法接受一个字符串(表示数据类型)作为参数，返回事件所带的指定类型的数据(通常是用 setData 方法添加的数据)。如果指定类型的数据不存在，则返回空字符串。</p> <pre>event.dataTransfer.getData(types[0]);</pre> <p>clearData() 方法接受一个字符串(表示数据类型)作为参数，删除事件所带的指定类型的数据。如果没有指定类型，则删除所有数据。如果指定类型不存在，则原数据不受影响。</p> <pre>event.dataTransfer.clearData("text/uri-list");</pre> <p>setDragImage() 可以用来自定义这张图片，它接受三个参数，第一个是img图片元素或者canvas元素，如果省略或为null则使用被拖动的节点的外观，第二个和第三个参数为鼠标相对于该图片左上角的横坐标和右坐标。</p> <pre>event.dataTransfer.setDragImage(img, 0, 0);</pre> <b>触摸事件</b> <pre> new Touch(touchInit);</pre> <p>触摸事件包括以下5种:</p> <p>touchstart: 用户接触触摸屏时触发，它的 target 属性返回发生触摸的 Element 节点(IE10+中使用 mspointerdown 事件);</p> <p>touchend: 用户不再接触触摸屏时(或者移出屏幕边缘时)触发，它的 target 属性与 touchstart 事件的 target 属性是一致的，它的 changedTouches 属性返回一个TouchList对象，包含所有不再触摸的触摸点(Touch对象)(IE10+中使用 mspointerup 事件);</p> <p>touchmove: 用户移动触摸点时触发，它的 target 属性与 touchstart 事件的 target 属性一致。如果触摸的半径, 角度, 力度发生变化，也会触发该事件。(IE10+中使用 mspointermove 事件);</p> <p>touchenter: 当触点进入某个 element 时触发。此事件没有冒泡过程。(IE10+中使用 mspointerover 事件);</p> <p>touchleave: 当触点离开某个 element 时触发。此事件没有冒泡过程。(IE10+中使用 mspointerout 事件);</p> <p>touchcancel: 当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):(IE10+中没有对应事件);</p> <p><p>由于某个事件取消了触摸: 例如触摸过程被一个模态的弹出框或电话打断;</p></p> <p><p>触点离开了文档窗口，而进入了浏览器的界面元素, 插件或者其他外部内容区域;</p></p> <p><p>当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch 对象被取消。</p></p> <p>触摸 API 由三个对象组成。每个 Touch 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 element 描述。 TouchList 对象代表多个触点的一个列表。具体包括以下属性:</p> <p>identifier 属性: 表示touch实例的独一无二的识别符。它在整个触摸过程中保持不变(IE10+中使用 pointerId 属性);</p> <p>screenX/screenY 属性: 分别表示触摸点相对于屏幕左上角的横坐标和纵坐标，与页面是否滚动无关;</p> <p>clientX/clientY 属性: 分别表示触摸点相对于浏览器视口左上角的横坐标和纵坐标，与页面是否滚动无关;</p> <p>pageX/pageY 属性: 分别表示触摸点相对于当前页面左上角的横坐标和纵坐标，包含了页面滚动带来的位移;</p> <p>radiusX/radiusY 属性: 分别返回触摸点周围受到影响的椭圆范围的X轴和Y轴，单位为像素;</p> <p>rotationAngle 属性: 表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间。指尖接触屏幕，触摸范围会形成一个椭圆，这三个属性就用来描述这个椭圆区域(IE10+中使用 rotation 属性);</p> <p>force 属性: 返回一个0到1之间的数值，表示触摸压力。0代表没有压力，1代表硬件所能识别的最大压力(IE10+中使用 pressure 属性,取值0 - 255);</p> <p>target 属性: 返回一个Element节点，代表触摸发生的那个节点。当这个触点最开始被跟踪时(在 touchstart 事件中), 触点位于的HTML元素.哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 window 或 document 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.</p> <p>altKey/ctrlKey/metaKey/shiftKey 都为只读属性: 返回一个布尔值，表示触摸的同时，是否按下某个键</p> <p>changedTouches 属性: 返回一个 TouchList 对象，包含了由当前触摸事件引发的所有Touch对象(即相关的触摸点)。它包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 Touch 对象。只读属性。</p> <p>targetTouches属性: 返回一个 TouchList 对象，包含了触摸的目标 Element 节点内部，所有仍然处于活动状态的触摸点。</p> <p>touches 属性返回一个 TouchList 对象(类数组的对象)，包含了所有当前接触触摸平面的触点的 Touch 对象，无论它们的起始于哪个 element 上，也无论它们状态是否发生了变化。只读属性</p> <p>type 属性: 指此次触摸事件的类型。</p> <p>target属性: 此次触摸事件的目标 element 。这个目标元素对应 TouchEvent.changedTouches 中的触点的起始元素(在之后的事件类型中有说明)，但是请注意: 此次事件中其他的触点的起始元素可能有所不同。以防万一，应使用和每一个多带带触点相关联的目标 。</p> <p>以下是 IE10+ 中的其他属性：</p> <p>hwTimestamp: 创建事件时间(毫秒);</p> <p>isPrimary: 表示该时间是否是主事件;</p> <p>pointerType: 取值自 event.MSPOINTER_TYPE_TOUCH, event.MAPOINTER_TYPE_PEN, event.MSPOINTER_TYPE_MOUSE, 表示触摸设备;</p> <p>tilt[X|Y]: 笔的倾斜程度;</p> <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> </div> <div class="mt-64 tags-seach" > <div class="tags-info"> <a style="width:120px;" title="GPU云服务器" href="https://www.ucloud.cn/site/product/gpu.html">GPU云服务器</a> <a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo">云服务器</a> <a style="width:120px;" title="javascript常用事件" href="https://www.ucloud.cn/yun/tag/javascriptchangyongshijian/">javascript常用事件</a> <a style="width:120px;" title="浏览器默认事件" href="https://www.ucloud.cn/yun/tag/lanqimorenshijian/">浏览器默认事件</a> <a style="width:120px;" title="事件解析" href="https://www.ucloud.cn/yun/tag/shijianjiexi/">事件解析</a> <a style="width:120px;" title="js浏览器关闭事件" href="https://www.ucloud.cn/yun/tag/jslanqiguanbishijian/">js浏览器关闭事件</a> </div> </div> <div class="entry-copyright mb-30"> <p class="mb-15"> 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。</p> <p>转载请注明本文地址：https://www.ucloud.cn/yun/54604.html</p> </div> <ul class="pre-next-page"> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/54603.html">上一篇：【JavaScript】DOM之BOM</a></li> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/54605.html">下一篇：浏览器事件解析</a></li> </ul> </div> <div class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相关文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/97588.html"><b><em>浏<em>览器</em></em><em>常用</em><em>事件</em><em>解析</em></b></a></h2> <p class="ellipsis2 good">摘要：之前写过一篇浏览器事件的相关操作和事件运行的原理浏览器事件解析。注意，页面从浏览器缓存加载，并不会触发事件。事件有一个属性，返回一个布尔值。此外，不支持事件，可以使用事件代替。 之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件及一些可能的坑。 表单事件 键盘事件 当 , 的值发生变化时触发。此外，打开 contente...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1700.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/17/small_000001700.jpg" alt=""><span class="layui-hide64">Richard_Gao</span></a> <time datetime="">2019-08-23 11:52</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/94918.html"><b>vue<em>常用</em>知识点总结</b></a></h2> <p class="ellipsis2 good">摘要：这里借鉴了一下的处理方式，我们把单独模块的包装成一个函数，提供一个全局的回调方法，加载完成时候再调用回调函数。 感谢本文引用链接的各位大佬们，小菜鸟我只是个搬运工 1.谈一谈你理解的vue是什么样子的？ vue是数据、视图分离的一个框架，让数据与视图间不会发生直接联系。MVVM 组件化：把整体拆分为各个可以复用的个体 数据驱动：通过数据变化直接影响bom展示，避免dom操作。 可以在...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1177.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/11/small_000001177.jpg" alt=""><span class="layui-hide64">xiaokai</span></a> <time datetime="">2019-08-22 17:10</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> </ul> </div> <div class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>发表评论</span></h3> <div class="xcp-publish-main flex_box_zd"> <div class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陆后可评论</a> </div> </div> </div> <div class="site-box-content"> <div class="site-content-title"> <h3 class="top-com-title mb-64"><span>0条评论</span></h3> </div> <div class="pages"></ul></div> </div> </div> <div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div class=""> <div class="com_layuiright-box user-msgbox"> <a href="https://www.ucloud.cn/yun/u-681.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/06/small_000000681.jpg" alt=""></a> <h3><a href="https://www.ucloud.cn/yun/u-681.html" rel="nofollow">zhoutk</a></h3> <h6>男<span>|</span>高级讲师</h6> <div class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(681)" id="attenttouser_681" class="grad follow-btn notfollow attention">我要关注</a> <a href="javascript:login()" title="发私信" >我要私信</a> </div> <div class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="https://www.ucloud.cn/yun/ut-681.html" class="box_hxjz">阅读更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/122826.html">#万圣节#hostsailor：罗马尼亚VPS全场6.5折起，XEN/KVM/OVZ架构全有</a></h3> <p>阅读 2772<span>·</span>2021-11-02 14:42</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/121750.html">EasyUI项目之新书上架、热门书籍</a></h3> <p>阅读 3162<span>·</span>2021-10-08 10:04</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117313.html">Vue:scoped与module的使用与利弊</a></h3> <p>阅读 1183<span>·</span>2019-08-30 15:55</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/116909.html">webpack4.16压缩打包</a></h3> <p>阅读 1025<span>·</span>2019-08-30 15:54</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/116080.html">聊聊sticky定位</a></h3> <p>阅读 2310<span>·</span>2019-08-30 15:43</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/113229.html">关于外部样式表也许你不知道的事</a></h3> <p>阅读 1679<span>·</span>2019-08-29 15:18</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/111485.html">[译] 如何运用新技术提升网页速度和性能</a></h3> <p>阅读 862<span>·</span>2019-08-29 11:11</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/109713.html">splice, split, slice 的区别</a></h3> <p>阅读 2362<span>·</span>2019-08-26 13:52</p></li> </ul> </div> <!-- 文章详情右侧广告--> <div class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活动</span></h6> <div class="com_adbox"> <div class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/gpu.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服务器"> </a> </div> </div> </div> </div> <!-- banner结束 --> <div class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section> <!-- wap拉出按钮 --> <div class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div> <!-- wap遮罩层 --> <div class="site-mobile-shade"></div> <!--付费阅读 --> <div id="payread"> <div class="layui-form-item">阅读需要支付1元查看</div> <div class="layui-form-item"><button class="btn-right">支付并查看</button></div> </div> <script> var prei=0; $(".site-seo-depict pre").each(function(){ var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">',''); $(this).attr('data-clipboard-text',html).attr("id","pre"+prei); $(this).html("").append("<code>"+html+"</code>"); prei++; }) $(".site-seo-depict img").each(function(){ if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){ $(this).remove(); } }) $("LINK[href*='style-49037e4d27.css']").remove(); $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove(); layui.use(['jquery', 'layer','code'], function(){ $("pre").attr("class","layui-code"); $("pre").attr("lay-title",""); $("pre").attr("lay-skin",""); layui.code(); $(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)"); }); function copycode(target){ var id=$(target).parent().parent().attr("id"); var clipboard = new ClipboardJS("#"+id); clipboard.on('success', function(e) { e.clearSelection(); alert("复制成功") }); clipboard.on('error', function(e) { alert("复制失败") }); } //$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5)); </script> <link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script> function setcode(){ var _html=''; document.querySelectorAll('pre code').forEach((block) => { var _tmptext=$.trim($(block).text()); if(_tmptext!=''){ _html=_html+_tmptext; console.log(_html); } }); } </script> <script> function payread(){ layer.open({ type: 1, title:"付费阅读", shadeClose: true, content: $('#payread') }); } // 举报 function jupao_tip(){ layer.open({ type: 1, title:false, shadeClose: true, content: $('#jubao') }); } $(".getcommentlist").click(function(){ var _id=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); $("#articlecommentlist"+_id).toggleClass("hide"); var flag=$("#articlecommentlist"+_id).attr("dataflag"); if(flag==1){ flag=0; }else{ flag=1; //加载评论 loadarticlecommentlist(_id,_tid); } $("#articlecommentlist"+_id).attr("dataflag",flag); }) $(".add-comment-btn").click(function(){ var _id=$(this).attr("dataid"); $(".formcomment"+_id).toggleClass("hide"); }) $(".btn-sendartcomment").click(function(){ var _aid=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); var _content=$.trim($(".commenttext"+_aid).val()); if(_content==''){ alert("评论内容不能为空"); return false; } var touid=$("#btnsendcomment"+_aid).attr("touid"); if(touid==null){ touid=0; } addarticlecomment(_tid,_aid,_content,touid); }) $(".button_agree").click(function(){ var supportobj = $(this); var tid = $(this).attr("id"); $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人赞"); } }); }else{ alert("您已经赞过"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交数据的类型 POST GET type:"POST", //提交的网址 url:"https://www.ucloud.cn/yun/favorite/topicadd.html", //提交的数据 data:{tid:_tid,rs:_rs}, //返回数据的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在请求之前调用的函数 beforeSend:function(){}, //成功返回之后调用的函数 success:function(data){ var data=eval("("+data+")"); console.log(data) if(data.code==2000){ layer.msg(data.msg,function(){ if(data.rs==1){ //取消收藏 $(".layui-layer-tips").attr("data-tips","收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>'); } if(data.rs==0){ //收藏成功 $(".layui-layer-tips").attr("data-tips","已收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart"></i>') } }) }else{ layer.msg(data.msg) } } , //调用执行后调用的函数 complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //调用出错执行的函数 error: function(){ //请求出错处理 postadopt=false; } }); } </script> <footer> <div class="layui-container"> <div class="flex_box_zd"> <div class="left-footer"> <h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （优刻得科技股份有限公司）"></a></h6> <p>UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p> </div> <div class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud与云服务</h6> <p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p> <p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p> <p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p> <p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p> <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p> </li> <li> <h6>友情链接</h6> <p><a href="https://www.compshare.cn/?ytag=seo">GPU算力平台</a></p> <p><a href="https://www.ucloudstack.com/?ytag=seo">UCloud私有云</a></p> <p><a href="https://www.surfercloud.com/">SurferCloud</a></p> <p><a href="https://www.uwin-link.com/">工厂仿真软件</a></p> <p><a href="https://pinex.it/">Pinex</a></p> <p><a href="https://www.picpik.ai/zh">AI绘画</a></p> </li> <li> <h6>社区栏目</h6> <p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p> <p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p> </li> <li> <h6>常见问题</h6> <p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p> <p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p> <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p> <p><a href="https://www.ucloud.cn/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span> <p>扫扫了解更多</p></div> </div> <div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>｜</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DZSMXQ3P9N'); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script></div> </div> </footer> </body> <script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script> <<script type="text/javascript"> $(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%"); </script> </html>
