明辉站/网站教程/内容

浏览器中5种常用的事件解析

网站教程2023-08-28 阅读
[摘要]本篇文章给大家带来的内容是关于浏览器中常用的事件解析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。表单事件键盘事件当 <input>, <textarea> 的值发生变化时触发。此外，打开 contenteditable 属性的元素，只要值发生变化，也会触...
本篇文章给大家带来的内容是关于浏览器中常用的事件解析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

表单事件

键盘事件

当 <input>, <textarea> 的值发生变化时触发。此外，打开 contenteditable 属性的元素，只要值发生变化，也会触发 input 事件。input 事件的一个特点，就是会连续触发，比如用户每次按下一次按键，就会触发一次input事件。

此类事件包括: keydown, keyup,

鼠标事件

select 事件当在<input>, <textarea>中选中文本时触发

change 事件当<input>, <select>, <textarea>的值发生变化时触发。它与 input 事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，而且input事件必然会引发change事件。具体来说，分成以下几种情况:

文档事件:

beforeunload

beforeunload 事件当窗口将要关闭，或者 document 和网页资源将要卸载时触发。它可以用来防止用户不当心关闭网页。该事件的默认动作就是关闭当前窗口或文档。如果在监听函数中，调用了 event.preventDefault()，或者对事件对象的 returnValue 属性赋予一个非空的值，就会自动跳出一个确认框，让用户确认是否关闭网页。如果用户点击“取消”按钮，网页就不会关闭。监听函数所返回的字符串，会显示在确认对话框之中:

  window.addEventListener('beforeunload', function(event) {
    if(event.preventDefault){
      event.preventDefault();
    } else {
      event.returnValue = '你确认要离开吗？';
    }
  });

unload 与 load

unload 事件在窗口关闭或者 document 对象将要卸载时触发，发生在 window, body, frameset 等对象上面。它的触发顺序排在 beforeunload, pagehide 事件后面。unload 事件只在页面没有被浏览器缓存时才会触发，换言之，如果通过按下“前进/后退”导致页面卸载，并不会触发 unload 事件。当 unload 事件发生时，document 对象处于一个特殊状态。所有资源依然存在，但是对用户来说都不可见，UI互动(window.open, alert, confirm方法等)全部无效。这时即使抛出错误，也不能停止文档的卸载。

load事件在页面加载成功时触发，error事件在页面加载失败时触发。注意，页面从浏览器缓存加载，并不会触发load事件。

这两个事件实际上属于进度事件，不仅发生在 document 对象，还发生在各种外部资源上面。浏览网页就是一个加载各种资源的过程，图像(image), 样式表(style sheet), 脚本(script), 视频(video), 音频(audio), Ajax请求(XMLHttpRequest)等等。这些资源和document对象, window对象, XMLHttpRequestUpload对象，都会触发 load 事件和 error 事件。

pageshow 与 pagehide

pageshow事件，pagehide事件: 默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进/后退”按钮时，浏览器就会从缓存中加载页面。
pageshow 事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码，可以放在这个事件的监听函数。第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load 事件不会触发，因为网页在缓存中的样子通常是 load 事件的监听函数运行后的样子，所以不必重复执行。同理，如果是从缓存中加载页面，网页内初始化的 JavaScript 脚本(比如 DOMContentLoaded 事件的监听函数)也不会执行。pageshow 事件有一个 persisted 属性，返回一个布尔值。页面第一次加载时，这个属性是false；当页面从缓存加载时，这个属性是true。

document.onpageshow = function(event){}
  if(event.persisted){
    //如果存缓存加载
  }
}

同样的，将这个属性设为 true，就表示页面要保存在缓存中；设为 false ，表示网页不保存在缓存中，这时如果设置了 unload 事件的监听函数，该函数将在 pagehide 事件后立即运行。如果页面包含 frame ，则 frame 页面的 pageshow 事件和 pagehide 事件，都会在主页面之前触发。

DOMContentLoaded 和 readystatechange

DOMContentLoaded 事件当 HTML 文档下载并解析完成以后，就会在 document 对象上触发 DOMContentLoaded 事件。这时，仅仅完成了 HTML 文档的解析(整张页面的DOM生成)，所有外部资源(样式表, 脚本, iframe等等)可能还没有下载结束。也就是说，这个事件比 load 事件，发生时间早得多。注意，网页的 JavaScript 脚本是同步执行的，所以定义 DOMContentLoaded 事件的监听函数，应该放在所有脚本的最前面。否则脚本一旦发生堵塞，将推迟触发 DOMContentLoaded 事件。此外，IE8 不支持 DOMContentLoaded 事件，可以使用 readystatechange 事件代替。

readystatechange 事件发生在 Document 对象和 XMLHttpRequest 对象，当它的 readyState 属性发生变化时触发。

其他文档级事件

上面重点提到了 DOMContentLoaded, readystatechange, pageshow, pagehide, unload, load 和 beforeunload 事件，此外还有一下事件:

鼠标事件 与 MouseEvent对象

new MouseEvent(typeArg, mouseEventInit);

内置的鼠标事件包括:

  1. mousedown: 按下鼠标

  2. mouseup: 鼠标抬起

  3. click: 点击

  4. dblclick: 双击

  5. mousemove: 鼠标移动

  6. mouseover: 鼠标移入，冒泡

  7. mouseout: 鼠标移出，冒泡

  8. mouseenter: 鼠标移入，不冒泡

  9. mouseleave: 鼠标移出，不冒泡

  10. contextmenu: 右键菜单

  11. wheel: 滚轮事件

其具有如下常用属性:

currentEvent.movementX = currentEvent.screenX - previousEvent.screenX
currentEvent.movementY = currentEvent.screenY - previousEvent.screenY

键盘事件 KeyboardEvent 对象

构造函数 new KeyboardEvent(typeArg, KeyboardEventInit)

键盘事件包括keydown(按下键盘时触发该事件)，keypress(只要按下的键并非Ctrl, Alt, Shift和Meta，就接着触发keypress事件), keyup(松开键盘时触发该事件)

进度事件 ProgressEvent对象

new ProgressEvent(type, {
  lengthComputable: aBooleanValue,    // false as default
  loaded: aNumber,                    // 0 as default
  total: aNumber                      // 0 as default
});

进度事件用来描述一个事件进展的过程，比如XMLHttpRequest对象发出的HTTP请求的过程, <img>, <audio>, <video>, <style>, <link>加载外部资源的过程，包括下载和上传。通常包括以下事件:

  1. abort事件: 当进度事件被中止时触发。如果发生错误，导致进程中止，不会触发该事件。

  2. error事件: 由于错误导致资源无法加载时触发，不会冒泡。error 事件的监听函数最好放在如 img 元素的 HTML 属性中。

  3. load事件: 进度成功结束时触发。

  4. loadstart事件: 进度开始时触发。

  5. loadend事件: 进度停止时触发，发生顺序排在error事件abort事件load事件后面。loadend事件的监听函数可以用来取代abort事件/load事件/error事件的监听函数，loadend事件本身不提供关于进度结束的原因，但可以用它来做所有进度结束场景都需要做的一些操作。

  6. progress事件: 当操作处于进度之中，由传输的数据块不断触发。

  7. timeout事件: 进度超过限时触发

这类事件具有以下属性:

//进度计算
if (e.lengthComputable){
  var percentComplete = e.loaded / e.total;
}

拖拽事件 DragEvent 对象

new DragEvent(type, DragEventInit);

拖拽指的是，用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。拖拽的对象有好几种，包括 Element 节点, 图片, 链接, 选中的文字等等。在 HTML 网页中，除了 Element 节点默认不可以拖拽，其他(图片, 链接, 选中的文字)都是可以直接拖拽的。为了让 Element 节点可拖拽，可以将该节点的 draggable 属性设为 true。draggable 属性可用于任何 Element 节点，但是图片(img 元素)和链接(a 元素)不加这个属性，就可以拖拽。对于它们，用到这个属性的时候，往往是将其设为 false，防止拖拽。注意，一旦某个 Element 节点的 draggable 属性设为 true，就无法再用鼠标选中该节点内部的文字或子节点了。

当Element节点或选中的文本被拖拽时，就会持续触发拖拽事件，包括以下一些事件:

  1. drag事件: 拖拽过程中，在被拖拽的节点上持续触发。

  2. dragstart事件: 拖拽开始时在被拖拽的节点上触发，该事件的target属性是被拖拽的节点。通常应该在这个事件的监听函数中，指定拖拽的数据。

  3. dragend事件: 拖拽结束时(释放鼠标键或按下escape键)在被拖拽的节点上触发，该事件的target属性是被拖拽的节点。它与dragStart事件，在同一个节点上触发。不管拖拽是否跨窗口，或者中途被取消，dragend事件总是会触发的。

  4. dragenter事件: 拖拽进入当前节点时，在当前节点上触发，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下(drop)拖拽的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拽进入当前节点，也是在这个事件的监听函数中设置。

  5. dragover事件: 拖拽到当前节点上方时，在当前节点上持续触发，该事件的target属性是当前节点。该事件与dragenter事件基本类似，默认会重置当前的拖拽事件的效果(DataTransfer对象的dropEffect属性)为none，即不允许放下被拖拽的节点，所以如果允许在当前节点drop数据，通常会使用preventDefault方法，取消重置拖拽效果为none。

  6. dragleave事件: 拖拽离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。在视觉上显示拖拽离开当前节点，就在这个事件的监听函数中设置。

  7. drop事件: 被拖拽的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下Escape键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拽数据，并进行相关处理。

关于拖拽事件，有以下几点注意事项:

  1. 拖拽过程只触发以上这些拖拽事件，尽管鼠标在移动，但是鼠标事件不会触发。

  2. 将文件从操作系统拖拽进浏览器，不会触发 dragStart 和 dragend 事件。

  3. dragenter 和 dragover 事件的监听函数，用来指定可以放下(drop)拖拽的数据。由于网页的大部分区域不适合作为 drop 的目标节点，所以这两个事件的默认设置为当前节点不允许 drop。如果想要在目标节点上 drop 拖拽的数据，首先必须阻止这两个事件的默认行为，或者取消这两个事件。

<p ondragover="return false">
//或
<p ondragover="event.preventDefault()">

  1. 拖拽事件用一个 DragEvent 对象表示，该对象继承 MouseEvent 对象，DragEvent 对象只有一个独有的属性 dataTransfer，其他都是继承的属性。dataTransfer 属性用来读写拖拽事件中传输的数据，所有的拖拽事件都有一个 dataTransfer 属性，用来保存需要传递的数据，这个属性的值是一个 DataTransfer 对象。拖拽的数据保存两方面的数据: 数据的种类(又称格式)和数据的值。数据的种类是一个MIME字符串，比如 text/plain 或者 image/jpg，数据的值是一个字符串;

dataTransfer 对象的属性的值是一个对象，其中包括以下属性:

event.dataTransfer.setData("text/plain", "Text to drag");
event.dataTransfer.getData(types[0]);
event.dataTransfer.clearData("text/uri-list");
event.dataTransfer.setDragImage(img, 0, 0);

触摸事件

 new Touch(touchInit);

触摸事件包括以下5种:

  1. touchstart: 用户接触触摸屏时触发，它的 target 属性返回发生触摸的 Element 节点(IE10+中使用 mspointerdown 事件);

  2. touchend: 用户不再接触触摸屏时(或者移出屏幕边缘时)触发，它的 target 属性与 touchstart 事件的 target 属性是一致的，它的 changedTouches 属性返回一个TouchList对象，包含所有不再触摸的触摸点(Touch对象)(IE10+中使用 mspointerup 事件);

  3. touchmove: 用户移动触摸点时触发，它的 target 属性与 touchstart 事件的 target 属性一致。如果触摸的半径, 角度, 力度发生变化，也会触发该事件。(IE10+中使用 mspointermove 事件);

  4. touchenter: 当触点进入某个 element 时触发。此事件没有冒泡过程。(IE10+中使用 mspointerover 事件);

  5. touchleave: 当触点离开某个 element 时触发。此事件没有冒泡过程。(IE10+中使用 mspointerout 事件);

  6. touchcancel: 当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):(IE10+中没有对应事件);

触摸 API 由三个对象组成。每个 Touch 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 element 描述。 TouchList 对象代表多个触点的一个列表。具体包括以下属性:

以下是 IE10+ 中的其他属性：

举一个简单例子：

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);
  }
}

对于跨平台交互，我封装了一个 tap相关事件如下：

//以下代码并未兼容低版本 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);
}

当然本文仅仅列举了一些常用事件，其实事件还有很多，本文会在必要的时候继续更新，但即便如此也不可能穷尽所有的事件，比如还有动画事件: animationstart, animation, animationend 等等。

相关推荐：

解析javascript 浏览器关闭事件_javascript技巧

JavaScript中的跨浏览器事件（图文教程）

以上就是浏览器中5种常用的事件解析的详细内容，更多请关注php中文网其它相关文章！


网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

……

标签:浏览器中5种常用的事件解析
相关阅读