🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
1.**事件**,就是文档或浏览器窗口中发生的一些特定的交互瞬间。 2.**事件流**描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流,Netscape的事件流是事件捕获流。 3.**事件冒泡**即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点。**事件捕获**则相反。由于老版本的浏览器不支持事件捕获,因此很少有人使用事件捕获。建议读者放心地使用事件冒泡,在有特殊需要时再使用事件捕获。事件捕获和事件冒泡有一端的终点是window对象(虽然规范要求从document对象开始传播),另一端的终点是触发事件的最具体元素。 4.『DOM2级事件』规定的事件流流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。***即使"DOM2级事件"规范明确要求捕获阶段不会涉及事件目标,但现代浏览器都会在捕获阶段触发事件对象上的事件。结果,就是有两个机会在目标对象上面操作事件***。 5.响应某个事件的函数就叫做**事件处理程序**。 6.**HTML事件处理程序**有一些独到之处。首先,这样会创建一个封装着元素属性值的函数,这个函数中有一个局部变量event,也就是**事件对象**。通过event变量,可以直接访问事件对象,你不用自己定义它,也不用从函数的参数列表中读取。在这个函数内部this值等于事件的目标元素。 关于这个动态创建的函数,另一个有意思的地方是它扩展作用域的方式。在这个函数内部,可以像访问局部变量一样访问document及该元素本身的成员。如果当前元素是一个表单输入元素,则作用域中还会包含访问表单元素(父元素)的入口。 ~~~ function(){ with(document){ with(this.form){ with(this){ //元素属性值 } } } } ~~~ 事件处理程序中的代码在执行时,有权访问全局作用域中的任何代码。 7.**DOM0级事件处理程序**中的this引用当前元素。以这种方式添加的事件处理程序会在事件冒泡阶段被处理。将事件处理程序设置为null可以删除通过DOM0级方法指定的事件处理程序。(此方法也可以删除HTML指定的事件处理程序) 8.**DOM2级事件处理程序**定义了两个方法用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法,并且他们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。 与DOM0级方法相同,DOM2级方法添加的事件处理程序也是在其依附的元素的作用域中运行。使用DOM2级方法的主要好处是可以添加多个事件处理程序,事件处理程序会按照添加它们的顺序触发。 通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除,移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除。 <del>9.【IE】attachEvent\detachEvent中的this指向window、绑定的事件名要加'on'、只能添加到冒泡阶段、同一元素同一事件绑定的多个事件处理程序触发顺序与DOM相反。</del> 10.event.preventDefault()阻止特定事件的默认行为。event.stopPropagation()立即停止事件在DOM层次中的传播。 11.DOM中的事件对象。兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用DOM0级或DOM2级都会传入event对象。(***传参名字可以自定义为e或其他***) event对象的属性: target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(注册该事件的对象)(一般为父级)。this指向永远和currentTarget指向一致(只考虑this的普通函数调用)。 <del>12.IE中的事件对象</del> * DOM0级:event对象作为window对象的一个属性存在。 * attachEvent():可以通过window对象来访问event对象(与DOM0级相同)也会作为参数传递。 * HTML事件处理程序:可以通过一个名叫event的变量来访问event对象。 IE中用event.srcElement作为事件处理程序的作用域(而不是this)是比较保险的处理方式。 13.load事件:当页面完全加载后再window上面触发,当作有框架都加载完毕时在框架集上触发,当图像加载完毕时在<img>元素上触发,或者当嵌入内容加载完毕时在<object>元素上触发。 图片load事件应用(最重要的是要在指定src属性之前先指定事件。) ~~~ window.onload = function(){ var image = new Image(); image.onload = function(){ alert('Image loaded!'); } image.src = 'smile.gif'; } ~~~ <script>和<link>标签也有onload事件,但只有设置了src属性并将该元素添加到文档后才会开始下载。 14.unload事件:这个事件在文档被完全卸载后出发。只要用户从一个页面切换到另一个页面,就会发生unload事件。利用这个事件最多的情况是清楚引用,以避免内存泄漏。(chrome和opera不支持该事件) 15.resize事件:当浏览器窗口被调整到一个新的高度或宽度时触发。浏览器窗口最小化或最大化时也会触发这个事件。 16.scroll事件:当文档被滚动期间重复触发。 以上三个事件均绑定在window对象上。 16.5 焦点事件会在页面元素获得或失去焦点时触发。利用这些事件与docuemnt.hsaFocus()方法及document.activeElement属性配合,可以知晓用户在页面上的行踪。当焦点从页面的一个元素移动到另一个元素,会依次触发下列事件: (1)focusout在失去焦点的元素上触发 (2)focusin在获得焦点的元素上触发 (3)blur在失去焦点的元素上触发(不冒泡) (4)focus在获得焦点的元素上触发(不冒泡) 即使focus和blur不冒泡,也可以在捕获阶段侦听到它们。focusout与focusin在firefox中不被支持(2016.12.17) 17.页面上的所有元素都支持鼠标事件。 (1)click:在用户单机主鼠标按钮或这按下回车键时触发。 (2)dbclick:在用户双击主鼠标按钮时触发。 (3)mousedown:在用户按下任意鼠标按钮时触发。不能通过键盘触发这个事件。 (4)mouseup:在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。 (5)mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。 (6)mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素。不能通过键盘触发这个事件。 (7)mouseenter在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。 (8)mouseleave在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。 mouseenter及 mouseleave在webkit核心的浏览器中的支持性存疑。 18.双击鼠标产生的事件如下: * mousedown * mouseup * click * mousedown * mouseup * click * dbclick 19.mousewheel事件 20.事件对象的**clientX**和**clientY**属性表示事件发生时鼠标指针在视口中的水平和垂直坐标。 21.事件对象的**pageX**和**pageY**属性表示事件发生时鼠标光标在页面中的位置。 22.事件对象的**screenX**和**screenY**属性表示事件发生时鼠标光标在整个屏幕中的位置。 23.虽然鼠标事件主要是使用鼠标来触发的,但在按下鼠标时键盘上的某些键的状态也可以影响到要采取的操作。事件对象的shiftKey、ctrlKey、altKey、metaKey(win/cmd)属性在返回true时,表示事件发生时键盘相应的键被按下了。 23.5 DOM通过event对象的relatedTarget属性提供了mouseover和mouseout事件的相关元素的信息。(例如,当mouseover事件触发时,事件的主目标是获得光标的元素,而相关元素就是那个失去光标的元素。) 24.只有在主鼠标按钮被单击(或键盘回车键被按下)时才回触发click事件,因此检测按钮的信息并不是必要的。但对于mousedonw和mouseup事件来说,则在其event对象存在一个button属性,表示按下或释放按钮。DOM的button属性可能有如下3个值:0表示主鼠标按钮,1表示中间的鼠标按钮(鼠标滚轮按钮),2表示次鼠标按钮。 24.5 DOM2级事件规范在event对象中还提供了detail属性,用于给出有关事件的更多信息。对于鼠标事件来说,detail中包含了一个数值,表示在给定位置发生了多少次单击。在同一个元素上相继发生一次mousedown和一次mouseup事件算作一次单机。detail属性从1开始计数,每次单击发生后都会递增。如果鼠标在mousedown和mouseup之间移动了位置,则detail会被重置为0。 25. mousewheel事件可以在任何元素上触发(firefox不支持),最终冒泡到window。与mousewheel事件对应的event对象除包含鼠标事件的所有标准信息外,还包含一个特殊的wheelDelta属性。当用户向前滚动鼠标滚轮时,wheelDelta是120的倍数;当用户向后滚动鼠标滚轮时,wheelDelta是-120的倍数。 firefox支持一个名为DOMMouseScroll的类似事件,也是在鼠标滚轮滚动时触发。有关鼠标滚轮的信息则保存在detail属性中。当用户向前滚动鼠标滚轮时,detail是-3的倍数;当用户向后滚动鼠标滚轮时,detail是3的倍数。 25.5 在面向iOS系统中的Safari开发时,要记住以下几点。 (1)不支持dblclick事件。双击浏览器窗口会放大页面,而且没有办法改变该行为。 (2)轻击可点击元素会触发mousemove事件。如果此操作会导致内容变化,将不再有其他事件发生;如果屏幕没有因此变化,那么会依次发生mousedown、mouseup、click事件。轻击不可单击的元素不会触发任何事件(touchmove不服)。可单击的元素是指那些单击可产生默认操作的元素(如链接),或者那些已经被指定了onclick事件处理程序的元素。 (3)mousemove事件也会触发mouseover和mouseover事件。 (4)两个手指放在屏幕上切页面随手指移动而滚动时会触发mousewheel和scroll事件。 以上信息时效性存疑。 25.6 为了保证网页的无障碍性,不建议使用click之外的其他鼠标事件来展示功能或引发代码执行。 26.键盘事件(与鼠标事件一样,都支持相同的修改键) * keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话会重复触发此事件。 * keypress:当用户按下键盘上的字符键(注意是字符键)时触发,而且如果按住不放的话会重复触发此事件。按下esc键也会触发这个事件。 * keyup:当用户释放键盘上的键时触发。 虽然所有元素都支持以上3个事件,但只有在用户通过文本框输入文本时才最常用到。在用户按了一下键盘上的字符键时,首先会触发keydown,然后紧跟着是keypress事件,最后会触发keyup事件。其中,keydown和keypress都是在文本框发生变化之前被触发的;而keyup事件则是在文本框已经发生变化之后被触发的。如果用户俺下了一个字符键不放,就会重复触发keydown和keypress事件,直到用户松开按键为止。 27.发生keydown和keyup事件时,event对象的keyCode属性中会包含一个代码,与键盘上一个特定的键位对应。 27.5 DOM3级事件规范中引入了一个新事件,名叫textInput。这个用于替代keypress的textInput事件的行为稍有不同。区别之一就是任何可以获得焦点的元素都可以触发keypress事件,但只有可编辑区域才能触发textInput事件。区别之二是textInput事件只会在用户按下能够输入实际字符的键时才回触发,而keypress事件则在按下那些能够影响文本显示的键时也会触发(例如退格键)。【firefox不支持此事件】 28.变动事件 DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved响应文档树修改、插入、移除等情况。 29.通常使用contextmenu事件来显示自定义的上下文菜单,而使用onclick事件来隐藏该菜单。 30.beforeunload事件会在浏览器卸载页面之前触发,可以通过它来取消卸载并继续使用原有页面。为了显示让用户选择的对话框,必须将event.returnValue的值设置为要显示给用户的字符串(对IE及FF而言),同时作为函数的值返回(对safari和chrome而言)。【现代浏览器目前不支持返回自定义的字符串,只能使用系统默认提示,FF目前疑似不支持这个方法】 EventUtil.addHandler(window,"beforeunload",function(event){ event = EventUtil.getEvent(event); var message = '你确定要关闭页面吗?' event.returnValue = message; return message; }); 31.DOMContentLoaded事件在形成完整的DOM树之后就会触发。对于不支持这个事件的浏览器,建议在页面加载期间设置一个时间为0毫秒的超时调用。 32.haschange事件在URL的参数列表(即URL中"#"号后面的所有字符串) 33.事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类的所有事件。利用事件委托,只需要在DOM树中尽量最高的层次上添加一个事件处理程序。最适合采用事件委托的事件包括click、mousedown、mouseup、keydown、keyup和keypress。虽然mouseover和mouseout事件也冒泡,但要适当处理它们并不容易,而且经常需要计算元素的位置。事件委托的实际应用中要注意对event.target对象的使用。 34.从文档中溢出带有事件处理程序的元素时或卸载页面的时候没有手动溢出事件处理程序会导致性能问题。(在事件处理程序中移除触发事件的那个元素也可以阻止事件冒泡。目标元素在文档中是事件冒泡的前提。)