DOM事件类型详解 - 苏福

      2020-06-15 15:21      HTML5

一、表单事件:

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

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

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

激活单选框(radio)或复选框(checkbox)时触发。

用户提交时触发。比如,从下列列表(select)完成选择,在日期或文件输入框完成选择。

当文本框或textarea元素的值发生改变,并且丧失焦点时触发。

reset事件当表单重置(所有表单成员变回默认值)时由form元素触发。

submit事件当表单数据向服务器提交时由form元素触发。

二、文档事件:

以下事件与网页的加载与卸载相关:

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

window.addEventListener('beforeunload', function( event ) {

event.returnValue = '你确认要离开吗?';//或event.preventDefault();

});

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事件:默认情况下,浏览器会在当前会话(session)缓存页面,当用户点击“前进/后退”按钮时,浏览器就会从缓存中加载页面。pageshow事件在页面加载时触发,包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码,可以放在这个事件的监听函数。第一次加载时,它的触发顺序排在load事件后面。从缓存加载时,load事件不会触发,因为网页在缓存中的样子通常是load事件的监听函数运行后的样子,所以不必重复执行。同理,如果是从缓存中加载页面,网页内初始化的JavaScript脚本(比如DOMContentLoaded事件的监听函数)也不会执行。pageshow事件有一个persisted属性,返回一个布尔值。页面第一次加载时,这个属性是false;当页面从缓存加载时,这个属性是true。if (event.persisted){...}pagehide事件与pageshow事件类似,当用户通过“前进/后退”按钮,离开当前页面时触发。它与unload事件的区别在于,如果在window对象上定义unload事件的监听函数之后,页面不会保存在缓存中,而使用pagehide事件,页面会保存在缓存中。pagehide事件的event对象有一个persisted属性,将这个属性设为true,就表示页面要保存在缓存中;设为false,表示网页不保存在缓存中,这时如果设置了unload事件的监听函数,该函数将在pagehide事件后立即运行。如果页面包含frame或iframe元素,则frame页面的pageshow事件和pagehide事件,都会在主页面之前触发。以下事件与文档状态相关:DOMContentLoaded事件当HTML文档下载并解析完成以后,就会在document对象上触发DOMContentLoaded事件。这时,仅仅完成了HTML文档的解析(整张页面的DOM生成),所有外部资源(样式表、脚本、iframe等等)可能还没有下载结束。也就是说,这个事件比load事件,发生时间早得多。注意,网页的JavaScript脚本是同步执行的,所以定义DOMContentLoaded事件的监听函数,应该放在所有脚本的最前面。否则脚本一旦发生堵塞,将推迟触发DOMContentLoaded事件。IE8不支持DOMContentLoaded,可以使用readystatechange事件,在低版本的IE中代替DOMContentLoaded事件。readystatechange事件发生在Document对象和XMLHttpRequest对象,当它们的readyState属性发生变化时触发。以下事件与窗口行为有关:scroll事件在文档或文档元素滚动时触发,主要出现在用户拖动滚动条。

三、鼠标事件MouseEvent对象:

构造函数new MouseEvent(typeArg, mouseEventInit);内置的鼠标事件mousedown mouseup click dblclick,mousemove mouseover mouseout,mouseenter mouseleave,contextmenu,wheel

altKey,ctrlKey,metaKey,shiftKey属性返回一个布尔值,表示鼠标事件发生时,是否按下某个键;

button返回事件的鼠标键信息(值为-1,0,1,2之一,可通过switch来选择执行分之);

buttons属性返回一个3个比特位的值,表示同时按下了哪些键

clientX,clientY返回鼠标位置相对于浏览器窗口左上角的坐标,单位为像素

screenX,screenY返回鼠标位置相对于屏幕左上角的坐标,单位为像素