DOM事件类详解

同等、表单事件:

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或setTimeout或行使从定义的throttle函数(节流函数)控制该事件的触发频率,然后可以组合customEvent抛来一个新事件(CustomEvent(type,eventInit)
创建一个自定义事件)

style=”color: #262626;”>resize事件于改动浏览器窗口大时触发,发生在window、body、frameset对象方面。该事件也会连地大方点,所以最好相近上面的scroll事件相同,通过throttle函数控制事件触发频率

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

style=”color: #262626;”>hashchange事件在URL的hash部分(即#声泪俱下后的片,包括#声泪俱下)发生变化时触发。如果老式浏览器不支持该属性,可以透过定期检查location.hash属性,模拟该事件,hashchange事件对象除了继承Event对象,还有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事件不会见冒泡,只能于抓获阶段触发,所以addEventListener方法的老三个参数需要设为true。

老三、鼠标事件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返回鼠标位置相对于屏幕左上角的坐标,单位为像素

                       
movementX,movementY返回一个挪,单位吗像素,表示目前职与上一个mousemove事件里的离开,在数值及,等于currentEvent.movementX
= currentEvent.screenX – previousEvent.screenX

                       
relatedTarget属性返回事件的辅助相关节点,即和target属性对应之节点,如:mouseout
target指将去的节点,relatedTarget指将进入的节点。对于那些没有从相关节点的波,该属性返回null

                        wheel事件是跟鼠标滚轮相关的波,浏览器提供一个WheelEvent构造函数new
WheelEvent(typeArg,
mouseEventInit),deltaX:返回一个数值,表示滚轮的档次滚动量。deltaY:返回一个数值,表示滚轮的直滚动量。deltaZ:返回一个数值,表示滚轮的Z轴滚动量。deltaMode:返回一个数值,表示滚动的单位,适用于点三只属性。0表示像素,1表示行,2表示页。

季、键盘事件KeyboardEvent对象:

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

                       
altKey,ctrlKey,metaKey,shiftKey返回一个布尔值,表示是否以下相应之键

                       
key属性返回一个字符串,表示仍下之键名。如果还要依照下一个控制键和一个符号键,则回符号键的键名。比如,按下Ctrl+a,则返回a。如果无法识别键名,则赶回字符串Unidentified

五、进度事件ProgressEvent对象:

        构造函数new ProgressEvent(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事件:进度超过限时触及

                     

六、拖拉事件DragEvent对象:

       
拖拉指的是,用户以某个对象上随下鼠标键不放开,拖动它到另外一个岗位,然后释放鼠标键,将欠对象在那里。拖拉之目标有一些栽,包括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()”>

       
拖拉事件就此一个DragEvent对象表示,该对象继承MouseEvent对象,DragEvent对象就来一个独有的性能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 。这个目标元素对应
TouchEvent.changedTouches
中的触点的起始元素(在之后的事件类中产生征),但是要留意:此次事件受到另外的触点的起始元素可能截然不同。以防万一,应利用和各个一个独立触点相关联的目标

            透过TouchEvent.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);

Event构造函数只能指定事件称为,不克在事变上绑定数据。如果急需以触及事件的同时,传入指定的数量,需要使用CustomEvent构造函数生成于定义之风波目标。

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;

})();

事件的学:

有时候,需要以本子中模拟触发某种类型的轩然大波,这时便得用这种事件的构造函数。下面是一个经过MouseEvent构造函数,模拟触发click鼠标事件之例证。

function simulateClick() {

  var event = new MouseEvent(‘click’,
{

    ‘bubbles’: true,

    ‘cancelable’: true

  });

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

  cb.dispatchEvent(event);

}

自从定义事件的过时写法

document.createEvent方法用来新建指定项目的波。它所特别成的Event实例,可以流传dispatchEvent方法。createEvent方法接受一个字符串作为参数,可能的值参见下表“数据类型”一圈。使用了某一样种“事件类”,就亟须采用相应之轩然大波初始化方法。如:initUIEvent、initMouseEvent、initMutationEvent、initEvent、initCustomEvent、initKeyEvent

事件目标的initEvent方法,用来初始化事件目标,还能向事件目标上加属性。该办法的参数必须是一个采取Document.createEvent()生成的Event实例,而且得在dispatchEvent方法之前调用。

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

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

someElement.dispatchEvent(event);

事件模拟的过时写法

事件模拟的非标准做法是,对document.createEvent方法变的波目标,使用相应之轩然大波初始化方法进行初始化。比如,click事件目标属于MouseEvent对象,也属于UIEvent对象,因此而就此initMouseEvent方法还是initUIEvent方法进行初始化,如拟鼠标事件:

initMouseEvent方法用来初始化Document.createEvent方法新建的鼠标事件。该方式必须于事变新建(document.createEvent方法)之后、触发(dispatchEvent方法)之前调用。initMouseEvent方法有异常丰富的参数。

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

  detail, screenX, screenY, clientX,
clientY,

  ctrlKey, altKey, shiftKey,
metaKey,

  button, relatedTarget

);

点这些参数的意义,参见MouseEvent构造函数的部分。

学并触发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);

相关文章