AjaxDOM事件类型详解

一、表单事件:

input事件当<input>、<textarea>的值暴发变化时接触。其余,打开contenteditable属性的因素,只要值暴发变化,也会触发input事件。input事件的一个风味,就是会接连触发,比如用户每一遍按下一回按键,就会接触几回input事件。

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

Change事件当<input>、<select>、<textarea>的值暴发变化时接触。它与input事件的最大不相同,就是不会一连触发,唯有当整个改动形成时才会接触,而且input事件必然会吸引change事件。具体来说,分成以下两种状态。

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

用户提交时接触。比如,从下列列表(select)已毕选拔,在日期或文件输入框已毕选取。

当文本框或textarea元素的值爆发转移,并且丧失关键时接触。

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

style=”color: #262626;”>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事件,暴发时间早得多。注意, style=”color: #e60013;”>网页的JavaScript脚本是同步施行的,所以定义DOMContentLoaded事件的监听函数,应该放在所有脚本的最前头。否则脚本一旦暴发堵塞,将顺延触发DOMContentLoaded事件。IE8不协理DOMContentLoaded,可以运用readystatechange事件,在低版本的IE中替代DOMContentLoaded事件。

style=”color: #262626;”>readystatechange事件发生在Document对象和XMLHttpRequest对象,当它们的readyState属性暴发变化时接触。

以下事件与窗口行为有关:

style=”color: #262626;”>scroll事件在文档或文档元素滚动时接触,首要出现在用户拖动滚动条。由于该事件会三番五次地大方接触,所以它的监听函数之中不应该有不行费用总结的操作。推荐的做法是利用requestAnimationFrame或set提姆eout或利用自定义的throttle函数(节流函数)控制该事件的触发频率,然后可以结合custom伊夫nt抛出一个新事件(Custom伊芙nt(type,eventInit)
创制一个自定义事件)

style=”color: #262626;”>resize事件在改动浏览器窗口大小时触发,暴发在window、body、frameset对象方面。该事件也会三番五次地大方接触,所以最接近下面的scroll事件相同,通过throttle函数控制事件触发频率

以下事件与文档的URL变化有关:

style=”color: #262626;”>hashchange事件在URL的hash部分(即#号前面的一部分,包罗#号)暴发变化时接触。若是老式浏览器不帮忙该属性,可以因而定期检查location.hash属性,模拟该事件,hashchange事件对象除了继承伊芙nt对象,还有oldURL属性和newURL属性,分别代表变化前后的URL

style=”color: #262626;”>popstate事件在浏览器的history对象的脚下记下暴发显式切换时接触。注意,调用history.pushState()或history.replaceState(),并不会触发popstate事件。该事件只在用户在history记录之间显式切换时接触,比如鼠标点击“后退/前进”按钮,或者在本子中调用history.back()、history.forward()、history.go()时接触。该事件目的有一个state属性,保存history.pushState方法和history.replaceState方法为眼前记下添加的state对象。

style=”color: #262626;”>以下五个事件属于文本操作触发的风浪

style=”color: #262626;”>cut事件:在将当选的情节从文档中移除,参与剪贴板后触发。

copy事件:在当选的始末加入剪贴板后触发。

paste事件:在剪贴板内容被粘贴到文档后触发。

那多个事件都有一个clipboardData只读属性。该属性存放剪贴的数额,是一个DataTransfer对象,具体的API接口和操作方法,请参见‘触摸事件’的DataTransfer对象

症结事件:

style=”color: #262626;”>暴发在Element节点和document对象方面,与收获或失去大旨相关。它主要包含以下三个事件。

style=”color: #262626;”>focus事件:Element节点得到主题后触发,该事件不会冒泡。

style=”color: #262626;”>blur事件:Element节点失去大旨后触发,该事件不会冒泡。

style=”color: #262626;”>focusin事件:Element节点将要得到主旨时接触,暴发在focus事件从前。该事件会冒泡。Firefox不帮助该事件。

style=”color: #262626;”>focusout事件:Element节点将要失去主旨时接触,暴发在blur事件此前。该事件会冒泡。Firefox不扶助该事件。

style=”color: #262626;”>那多少个事件的轩然大波目的,带有target属性(再次回到事件的对象节点)和relatedTarget属性(再次来到一个Element节点)。对于focusin事件,relatedTarget属性表示失去主题的节点;对于focusout事件,表示即将承受主旨的节点;对于focus和blur事件,该属性重返null。

style=”color: #262626;”>由于focus和blur事件不会冒泡,只好在抓获阶段触发,所以add伊夫ntListener方法的第七个参数须要设为true。

三、鼠标事件Mouse伊芙nt对象:

        构造函数new Mouse伊芙nt(typeArg,
mouse伊芙ntInit);内置的鼠标事件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再次回到鼠标地点相对于屏幕左上角的坐标,单位为像素

                       
movementX,movementY重回一个平移,单位为像素,表示近年来义务与上一个mousemove事件之间的距离,在数值上,等于current伊芙nt.movementX
= current伊夫nt.screenX – previous伊芙nt.screenX

                       
relatedTarget属性再次来到事件的附带相关节点,即和target属性对应的节点,如:mouseout
target指将要离开的节点,relatedTarget指将要进入的节点。对于那个尚未次要相关节点的事件,该属性重返null

                        wheel事件是与鼠标滚轮相关的风浪,浏览器提供一个Wheel伊夫nt构造函数new
Wheel伊芙nt(typeArg,
mouse伊芙ntInit),deltaX:重临一个数值,表示滚轮的水准滚动量。deltaY:再次回到一个数值,表示滚轮的垂直滚动量。deltaZ:重回一个数值,表示滚轮的Z轴滚动量。deltaMode:再次回到一个数值,表示滚动的单位,适用于位置多个属性。0表示像素,1意味行,2意味页。

四、键盘事件Keyboard伊夫nt对象:

        构造函数new Keyboard伊芙nt(typeArg,
Keyboard伊夫ntInit),内置事件keydown:按下键盘时触发该事件。keypress:只要按下的键并非Ctrl、Alt、Shift和Meta,就接着触发keypress事件。keyup:松开键盘时触发该事件;

                       
altKey,ctrlKey,metaKey,shiftKey再次回到一个布尔值,表示是还是不是按下相应的键

                       
key属性重临一个字符串,表示按下的键名。假使同时按下一个控制键和一个符号键,则赶回符号键的键名。比如,按下Ctrl+a,则再次来到a。若是不可能识别键名,则赶回字符串Unidentified

五、进程事件Progress伊夫nt对象:

        构造函数new Progress伊芙nt(type, {lengthComputable:
aBooleanValue, loaded: aNumber,total:
aNumber})默许值分别为false,0,0,进程事件用来叙述一个事变进展的长河,比如XMLHttpRequest对象发出的HTTP请求的进度、<img>、<audio>、<video>、<style>、<link>加载外部资源的经过。下载和上传都会生出进程事件。

                        lengthComputable:重返一个布尔值,表示近来速度是还是不是享有可总计的尺寸。假诺为false,就意味着如今进程不可能测量。
                       
total:重回一个数值,表示如今速度的总长度。如果是由此HTTP下载某个资源,表示内容本身的长短,不含HTTP底部的长度。若是lengthComputable属性为false,则total属性就不可能赢得正确的值。
                       
loaded:再次来到一个数值,表示近日进度已经做到的数目。该属性除以total属性,就可以收获如今进程的比例。if
(e.lengthComputable) {var percentComplete = e.loaded / e.total; }
        包涵以下事件:

 

                       
abort事件:当进度事件被中止时接触。固然暴发错误,导致进度中止,不会触发该事件。

 

                       
error事件:由于错误造成资源无法加载时接触,不会冒泡。error事件的监听函数最好放在如img元素的HTML属性中,那样才能有限支撑爆发加载错误时百分之百会执行。

 

                        load事件:进度成功截止时接触。

 

                        loadstart事件:进度先导时接触。

 

                       
loadend事件:进程停止时接触,发生顺序排在error事件\abort事件\load事件背后。loadend事件的监听函数可以用来替代abort事件/load事件/error事件的监听函数,loadend事件本身不提供关于进程甘休的来头,但足以用它来做有所进程停止场景都急需做的有的操作。

 

                       
progress事件:当操作处于进程之中,由传输的数码块不断触发。

                        timeout事件:进程当先限时触及

                     

六、拖拉事件Drag伊芙nt对象:

       
拖拉指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个职务,然后释放鼠标键,将该对象放在那里。拖拉的目的有某些种,包罗Element节点、图片、链接、选中的文字等等。在HTML网页中,除了Element节点默许不得以拖拉,其余(图片、链接、选中的文字)都是足以一向拖拉的。为了让Element节点可拖拉,可以将该节点的draggable属性设为true。draggable属性可用来任何Element节点,然而图片(img元素)和链接(a元素)不加这么些特性,就足以拖拉。对于它们,用到那个特性的时候,往往是将其设为false,幸免拖拉。注意,一旦某个Element节点的draggable属性设为true,就不可能再用鼠标选中该节点内部的文字或子节点了。

     
  当Element节点或选中的文书被拖拉时,就会不断触发拖拉事件,包含以下一些轩然大波

drag事件:拖拉进程中,在被拖拉的节点上连发触发。

dragstart事件:拖拉始发时在被拖拉的节点上接触,该事件的target属性是被拖拉的节点。寻常应该在那几个事件的监听函数中,指定拖拉的数量。

dragend事件:拖拉终结时(释放鼠标键或按下escape键)在被拖拉的节点上接触,该事件的target属性是被拖拉的节点。它与dragStart事件,在同一个节点上接触。不管拖拉是还是不是跨窗口,或者中途被撤废,dragend事件一连会接触的。

dragenter事件:拖拉跻身当前节点时,在近日节点上接触,该事件的target属性是时下节点。平时应该在那一个事件的监听函数中,指定是还是不是同意在当下节点放下(drop)拖拉的数目。倘使当前节点没有该事件的监听函数,或者监听函数不执行其余操作,就代表不容许在现阶段节点放下数据。在视觉上突显拖拉跻身当前节点,也是在那个事件的监听函数中安装。

dragover事件:拖拉到当下节点上边时,在近来节点上连发触发,该事件的target属性是如今节点。该事件与dragenter事件基本接近,默认会重置当前的拖沓事件的效应(DataTransfer对象的dropEffect属性)为none,即分裂意放下被拖拉的节点,所以如若同目的在于时下节点drop数据,平日会采取preventDefault方法,废除重置拖拉效果为none。

dragleave事件:拖拉离开当前节点范围时,在脚下节点上接触,该事件的target属性是时下节点。在视觉上显示拖拉离开当前节点,就在那个事件的监听函数中设置。

drop事件:被拖拉的节点或选中的文本,释放到目的节点时,在目的节点上接触。注意,要是当前节点分化意drop,即便在该节点上方甩手鼠标键,也不会触发该事件。如若用户按下Escape键,打消那些操作,也不会触发该事件。该事件的监听函数负责取出拖拉多少,并拓展连锁处理。

        至于拖拉风云,有以下几点注意事项

1.拖沓进度只触发以上那么些拖拉事件,尽管鼠标在移动,不过鼠标事件不会触发。

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

3.dragenter和dragover事件的监听函数,用来指定可以放下(drop)拖拉的数据。由于网页的一大半区域不符合当作drop的目的节点,所以那七个事件的默许设置为近来节点差异意drop。如果想要在目的节点上drop拖拉的数额,首先必须遏止那些事件的默许行为,或者撤回那四个事件。<div
ondragover=”return false”>或<div
ondragover=”event.preventDefault()”>

       
拖拉事件用一个Drag伊芙nt对象表示,该目标继承Mouse伊夫nt对象,Drag伊芙nt对象唯有一个独有的特性DataTransfer,其余都是持续的属性。DataTransfer属性用来读写拖拉事件中传输的多少,所有的拖沓事件都有一个dataTransfer属性,用来保存须求传递的数据,那些特性的值是一个DataTransfer对象。拖拉的数量保存两方面的数目:数据的门类(又称格式)和数据的值。数据的项目是一个MIME字符串,比如
text/plain或者image/jpeg,数据的值是一个字符串;

        DataTransfer对象的质量

dropEffect属性设置放下(drop)被拖拉节点时的功用,可能的值包蕴copy(复制被拖拉的节点)、move(移动被拖拉的节点)、link(创设指向被拖拉的节点的链接)、none(不可能放下被拖拉的节点)。设置除此以外的值,都是低效的。

effectAllowed属性设置这次拖拉中允许的职能,可能的值包含copy、move、link、copyLink、copyMove、linkMove、all、none、uninitialized(默许值,等同于all)。要是某种意义是分化意的,用户就无法在目的节点中达到那种效应。

files属性是一个FileList对象,包蕴一组本地文件,可以用来在拖拉操作中传递。如若此次拖拉不关乎文件,则属性为空的FileList对象。通过files属性读取拖拉文件的音信。假如想要读取文件内容,就要动用FileReader对象。

types属性是一个数组,保存每一次拖拉的多少格式,如‘text/uri-list’

        DataTransfer对象的格局:

setData方法用来安装事件所蕴藏的指定项目的多少。它承受四个参数,第三个是数据类型,首个是现实性数量。若是指定的品种在现有数量中不存在,则该项目将写入types属性;要是已经存在,在该品种的并存数量将被轮换。

event.dataTransfer.setData(“text/plain”, “Text to drag”);

getData方法接受一个字符串(表示数据类型)作为参数,返回事件所带的指定项目标数目(常常是用setData方法添加的数码)。如果指定项目标数额不存在,则赶回空字符串。

event.dataTransfer.getData(types[0]);

clearData方法接受一个字符串(表示数据类型)作为参数,删除事件所带的指定项目标数目。假使没有点名项目,则删除所有数据。假设指定项目不存在,则原数据不受影响。

event.dataTransfer.clearData(“text/uri-list”);

setDragImage可以用来自定义那张图纸,它承受多个参数,第四个是img图片元素或者canvas元素,若是不难或为null则运用被拖动的节点的外观,首个和第两个参数为鼠标相对于该图片左上角的横坐标和右坐标。

event.dataTransfer.setDragImage(img, 0, 0);

七、触摸事件:触摸API由几个目的组成。每
个 Touch 对象表示一个触点;
每个触点都由其地点,大小,形状,压力大小,和对象 element 描述。
TouchList 对象表示七个触点的一个列表。

     
  Touch对象:代表一个触摸点。触摸点可能是一根手指,也说不定是一根触摸笔。它有以下属性

identifier属性表示Touch实例的独一无二的识别符。它在全体触摸进度中维系不变。var
id = touchItem.identifier;

screenX属性和screenY属性,分别表示触摸点相对于屏幕左上角的横坐标和纵坐标,与页面是或不是滚动非亲非故;

clientX属性和clientY属性,分别代表触摸点相对于浏览器视口左上角的横坐标和纵坐标,与页面是或不是滚动非亲非故

pageX属性和pageY属性,分别代表触摸点相对于当下页面左上角的横坐标和纵坐标,包括了页面滚动带来的移位

radiusX属性和radiusY属性,分别重回触摸点周围受到震慑的椭圆范围的X轴和Y轴,单位为像素。

rotationAngle属性表示触摸区域的椭圆的转动角度,单位为度数,在0到90度之间。指尖接触显示屏,触摸范围会形成一个椭圆,那两个属性就用来讲述这一个椭圆区域。

force属性重回一个0到1时期的数值,表示触摸压力。0代表没有压力,1意味硬件所能识其他最大压力。

target属性重回一个Element节点,代表触摸爆发的可怜节点。当以此触点最开头被盯梢时(在
touchstart 事件中), 触点位于的HTML元素. 哪怕在触点移动进度中,
触点的地点已经离开了那么些因素的有效互动区域,
或者那么些元素已经被从文档中移除. 需求注意的是,
即使这些元素在触摸进程中被移除, 那个事件依然会指向它,
可是不会再冒泡那些事件到 window 或 document 对象. 因而,
假若有元素在触摸进度中或许被移除,
最佳实践是将触摸事件的监听器绑定到这几个因素本身, 避免元素被移除后,
不能再从它的上一流元素上侦测到从该因素冒泡的事件. 只读属性.

       
TouchList对象:
是一个看似数组的靶子,成员是与某个触摸事件相关的拥有触摸点。比如,用户用三根手指触摸,暴发的TouchList对象就有三个成员,每根手指对应一个Touch对象。TouchList实例的length属性,重回TouchList对象的分子数量。TouchList实例的identifiedTouch方法和item方法,分别选用id属性和索引值(从0起首)作为参数,取出指定的Touch对象。

       
TouchEvent对象:
代表触摸引发的风浪。除了被持续的习性以外,它还有一部分和谐的特性。

键盘相关属性altKey、ctrlKey、metaKey、shiftKey都为只读属性,再次来到一个布尔值,表示触摸的还要,是还是不是按下某个键

changedTouches属性再次来到一个TouchList对象,包涵了由近来触摸事件引发的兼具Touch对象(即有关的触摸点)。它涵盖了表示享有从上三回触摸事件到此次风云进度中,状态暴发了变动的触点的
Touch 对象。只读属性。

targetTouches特性重临一个TouchList对象,包涵了触摸的目的Element节点内部,所有仍旧处在活动状态的触摸点。

touches属性再次来到一个TouchList对象,包含了独具当前接触触摸平面的触点的
Touch 对象,无论它们的序曲于哪个 element
上,也不管它们状态是还是不是暴发了扭转。只读属性

type属性指此次触摸事件的品类。

target属性此次触摸事件的靶子 element 。这一个目的元素对应
Touch伊芙nt.changedTouches
中的触点的开首元素(在事后的风浪类型中有认证),不过请留心:此次事件中其他的触点的开始元素可能截然不同。避防万一,应采纳和每一个独立触点相关联的靶子

            由此Touch伊芙nt.type属性可以查阅触摸事件的项目

touchstart:用户接触触摸屏时接触,它的target属性重临爆发触摸的Element节点。

touchend:用户不再接触触摸屏时(或者移出显示屏边缘时)触发,它的target属性与touchstart事件的target属性是一律的,它的changedTouches属性重返一个TouchList对象,包罗所有不再触摸的触摸点(Touch对象)。

touchmove:用户移动触摸点时接触,它的target属性与touchstart事件的target属性一致。如若下手的半径、角度、力度发生变化,也会触发该事件。

touchenter当触点进入某个 element 时接触。此事件没有冒泡进程。

touchleave当触点离开某个 element 时接触。此事件没有冒泡进度。

touchcancel:当触点由于一些原因被中断时接触。有三种可能的来头如下(具体的案由按照差其余装置和浏览器有所不相同):1.由于某个事件废除了触摸:例如触摸进程被一个模态的弹出框打断。2.触点离开了文档窗口,而进入了浏览器的界面元素、插件或者其余外部内容区域。3.当用户暴发的触点个数当先了设备支持的个数,从而造成
TouchList 中最早的 Touch 对象被收回。

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

  }

}

八、自定义事件和事件模拟

用户可以自定义事件,然后手动触发:

var event = new Event(‘build’);

elem.addEventListener(‘build’, function
(e) { … }, false);

elem.dispatchEvent(event);

伊夫nt构造函数只好指定事件名,不可以在事件上绑定数据。倘使急需在触发事件的同时,传入指定的数码,须要使用Custom伊芙nt构造函数生成自定义的风云目的。

var myEvent = new CustomEvent(“myevent”,
{

  detail: {

    foo: “bar”

  },

  bubbles: true,

  cancelable: false

});

el.addEventListener(‘myevent’,
function(event) {

  console.log(‘Hello ‘ +
event.detail.foo);

});

el.dispatchEvent(myEvent);

IE不扶助上述办法,可以用下边的垫子函数模拟:

(function () {

  function CustomEvent ( event, params )
{

    params = params || { bubbles: false,
cancelable: false, detail: undefined };

    var evt = document.createEvent(
‘CustomEvent’ );

    evt.initCustomEvent( event,
params.bubbles, params.cancelable, params.detail );

    return evt;

   }

  CustomEvent.prototype =
window.Event.prototype;

  window.CustomEvent =
CustomEvent;

})();

事件的萧规曹随:

奇迹,要求在本子中效仿触发某连串型的风云,那时就亟须采纳那种事件的构造函数。上面是一个通过Mouse伊芙nt构造函数,模拟触发click鼠标事件的事例。

function simulateClick() {

  var event = new MouseEvent(‘click’,
{

    ‘bubbles’: true,

    ‘cancelable’: true

  });

  var cb =
document.getElementById(‘checkbox’);

  cb.dispatchEvent(event);

}

自定义事件的不合时宜写法

document.create伊芙nt方法用来新建指定项目的风云。它所生成的伊夫nt实例,可以流传dispatch伊芙nt方法。create伊芙nt方法接受一个字符串作为参数,可能的值参见下表“数据类型”一栏。使用了某一种“事件类型”,就务须利用相应的事件开端化方法。如:initUI伊夫nt、initMouse伊芙nt、initMutation伊夫nt、init伊芙nt、initCustomEvent、initKey伊芙nt

事件目的的init伊夫nt方法,用来开头化事件目标,仍可以向事件目的添加属性。该方式的参数必须是一个采纳Document.create伊芙nt()生成的伊芙nt实例,而且必须在dispatch伊夫nt方法在此之前调用。

var event =
document.createEvent(‘Event’);

event.initEvent(‘my-custom-event’, true,
true, {foo:’bar’});

someElement.dispatchEvent(event);

事件模拟的不合时宜写法

事件模拟的非标准做法是,对document.create伊夫nt方法生成的风云目的,使用相应的轩然大波开首化方法开展早先化。比如,click事件目的属于Mouse伊芙nt对象,也属于UI伊芙nt对象,由此要用initMouse伊夫nt方法或initUI伊夫nt方法开展开头化,如模拟鼠标事件:

initMouse伊芙nt方法用来早先化Document.create伊芙nt方法新建的鼠标事件。该方法必须在事变新建(document.create伊芙nt方法)之后、触发(dispatch伊芙nt方法)从前调用。initMouse伊夫nt方法有很长的参数。

event.initMouseEvent(type, canBubble,
cancelable, view,

  detail, screenX, screenY, clientX,
clientY,

  ctrlKey, altKey, shiftKey,
metaKey,

  button, relatedTarget

);

地点这一个参数的意义,参见Mouse伊芙nt构造函数的局地。

仿照并触发click事件的写法如下。

var simulateDivClick =
document.createEvent(‘MouseEvents’);

style=”color: #262626;”>simulateDivClick.initMouseEvent(‘click’,true,true,

 
document.defaultView,0,0,0,0,0,false,

  false,false,0,null,null

);

style=”color: #262626;”>divElement.dispatchEvent(simulateDivClick);

相关文章