Heim Web-Frontend js-Tutorial JavaScript高级程序设计 事件学习笔记_javascript技巧

JavaScript高级程序设计 事件学习笔记_javascript技巧

May 16, 2016 pm 06:02 PM
事件 学习笔记

第12章 事件
1.事件流
1.1事件冒泡(IE事件流)
□事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点(文档)。
□所有浏览器均支持事件冒泡。Firefox、chrome、safari将事件一直冒泡到window对象。
1.2事件捕获(Netscape事件流)
□不太具体的节点更早收到事件,而具体的节点最后收到节点。
□Safari、chrome、Opera、firefox支持,但从window对象开始捕获(DOM2级规范是从document开始)。
1.3DOM事件流
□“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
□DOM2:捕获阶段不含实际目标,不涉及事件目标,只为截获事件提供机会。
□Safari、chrome、Firefox和Opera9.5以上都会在捕获阶段触发事件对象上的事件。结果有两个机会在目标上操作事件。
□IE不支持DOM事件流。其他支持。
2.事件处理程序(或事件侦听器)
定义:响应某个事件的函数。
2.1 HTML事件处理程序
□某个元素支持的每种事件,都可以使用一个相应事件处理程序同名的HTML特性来指定。
□其中的函数代码字符需经过HTML转义。
□存在问题:
◇时差问题:当触发事件时,事件处理程序有可能尚不具执行条件。使用try-catch块封装,以便错误不会浮出水面。

◇HTML与JavaScript代码紧密耦合。
2.2 DOM0级事件处理程序
□DOM0级事件处理程序:将一个函数赋值给一个事件处理程序属性。优点:简单、跨浏览器。
□这种方式的事件处理程序在代码运行以前不会绑定事件。
□使用DOM0级方法指定的事件处理程序被认为是元素的方法。事件处理程序在元素作用域中运行;程序中this引用当前元素。
□删除DOM0级事:btn.onclick = null; //删除事件处理程序
2.3 DOM2级事件处理程序
□addEventListener()和removeEventListener()。接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。
◇如果最后这个布尔值是true,表示捕获阶段调用事件处理程序;如果是false表示冒泡阶段调用事件处理程序。
Var btn = document.getElementById("myBtn");
Btn.addEventListener("click",function(){alert(this.id);},false);
□使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。按添加顺序触发。
□通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。即匿名函数无法移除。
□将事件处理程序添加到冒泡阶段,得到最大限度兼容。
□Firefox、Safari、Chrome和Opera支持DOM2级事件处理程序。IE不支持,有独有的事件处理程序。
2.4 IE事件处理程序。
□IE中与DOM2类似方法:attachEvent()和detachEvent()。这两个方法接受相同的两个参数:事件处理程序名称与事件处理程序函数。
□IE仅支持冒泡,通过attachEvent()添加的事件处理程序都被添加到冒泡阶段。
□attachEvent()中事件处理函数会再全局作用域中运行,因此this等于window。
□attachEvent()也可以为元素添加多个处理程序,以相反的书序触发。
□attachEvent()事件可通过detachEvent()移除,匿名函数无法移除。
2.5 跨浏览器的事件处理程序
var EventUtil = {
addHandler : function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on" + type, handler);
}else{
elmenet["on" + type] = handler;
}
],
removeHandler : function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent("on"+type, handler);
}else{
element["on"+type] = null;
}
}
};
□此兼容函数没有考虑到浏览器的所有问题,如IE中作用域问题。
3.事件对象
定义:在触发DOM的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。
3.1DOM中的事件对象
①兼容DOM的浏览器会将一个event对象传入到事件处理程序中(DOM0级或DOM2级)。通过HTML特性指定时,event变量保存event对象。
②所有event对象均包含以下属性/方法。P291
□bubbles:表明事件是否冒泡,bool。
□cancelable:表明是否可以取消事件的默认行为,bool。
□currentTarget:其事件处理程序当前正在处理事件的那个元素。
□detail:与事件相关的细节信息。
□eventPhase:调用事件处理程序的阶段:1.捕获 2.处于目标 3.冒泡。
□preventDefault():取消事件默认行为。
□stopPropagation():取消事件的进一步捕获或冒泡。
□target:事件的目标。
□type:被触发的事件类型。
□view:与事件关联的抽象视图。
③在事件处理程序内部:
□对象this始终等于currentTarget的值,即this和currentTarget均指向绑定该事件程序的元素。
□target则只包含事件的实际目标,即触发事件的元素。
④event.preventDefault():可取消特定事件的默认行为。
⑤event.stopPropagation():立即停止事件在DOM中的传播。
⑥通过eventPhase属性确定事件当前正位于事件流哪个阶段。
3.2 IE中的事件对象
①访问IE中的event对象,取决于指定的事件处理程序方法。
□使用DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在。
□使用attachEvent()添加,则有一个event对象作为参数传入。同时也可以通过window.event访问。
□通过HTML特性指定事件处理程序时,可以通过一个名叫event的变量访问event对象。
②IE中所有的event对象包含以下属性/方法:
□cancelBubble:默认为false,设为true可取消事件冒泡(类似DOM中的stopPropagation()方法)
□returnValue:默认为true,设为false可取消事件默认行为。(类似DOM2中的preventDefault()方法)
□srcElement:事件的目标(与DOM2中target属性相同)
□type:被触发的事件类型。
3.3 跨浏览器的事件对象
var eventUtil = {
getEvent : function(event){
Return event ? Event : window.event;
},
getTarget : function(event){
return event.target || event.srcElement;
},
preventDefault : function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation : function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
};
4.事件类型
□鼠标事件,当用户通过鼠标在页面上执行操作时触发;
□键盘事件,当用户通过键盘在页面上执行操作时触发;
□HTML事件,当浏览器窗口发生变化或发生特定的客户端/服务器交互时触发。
□变动(mutation)事件,当底层DOM结构发生变化时触发。
4.1 UI事件
UI事件主要与元素焦点相关,仅在兼容DOM的浏览器中受到支持:
□DOMActive:表示元素已经被用户操作(通过鼠标或键盘)激活;
□DOMFocusIN:表示元素已经获得焦点;为HTML中focus事件的普通版;
□DOMFocusOut:表示元素已经失去焦点;为HTML中blur事件的普通版;
△由于支持的浏览器很少,不推荐使用。
4.2 鼠标事件
①DOM中定义了7个鼠标事件,页面上所有元素都支持鼠标事件:
□click:在用户单击主鼠标按钮(一般式左边的按钮)或者按下回车键时触发。
□dblclick:在用户双击主鼠标按钮(一般是左键)时触发。
□mousedown:在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
□mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。新移入的元素可能在旧元素外部,也可以是其子元素。不能通过键盘触发。
□mouseover:在鼠标指标为于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。不通过键盘触发。
□mouseup:在用户释放鼠标按钮时触发。不通过键盘触发。
□mousemove:当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发。
②注意事项:
□同一个元素上相继触发mousedown和mouseup事件才会触发click事件。如果mousedown或mouseup其中之一取消,就不会触发click事件。
□同一元素连续两次触发click事件,才会触发dblclick事件。
4.2.1 客户区坐标位置
□鼠标事件都是在浏览器视口中的特定位置发生的。这个位置信息保存在事件对象(event)中的clientX和clientY属性中。
4.2.2 屏幕坐标位置
□鼠标事件发生时,还有一个相对于整个电脑屏幕的位置。保存在事件对象(event)中的screenX和screenY属性中。
4.2.3 修改键
□虽然鼠标事件主要是使用鼠标来触发,但按下鼠标时键盘上的某些键也可以影响到所需操作。
□修改键为:Shift、Ctrl、Alt和Meta(苹果中cmd键、windows中windows键)。
□DOM中表示这4个键的布尔值属性:(在鼠标事件的event中)shiftKey、ctrlKey、altKey和metaKey(IE不支持metaKey)。
4.2.4 相关元素
发生mouseover和mouseout事件时,会涉及更多元素。两事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。
□DOM通过evnet对象的relatedTarget属性提供了相关元素信息。
□IE不支持relatedTarget属性。
◇在mouserover事件触发时,IE的fromElement属性中保存了相关元素。
◇在mouseout事件触发时,IE的toElement属性保存了相关元素。
□兼容方式:
var eventUtil = {
getRelatedTarget : function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
}
};
4.2.5 鼠标按钮
□click事件:单击鼠标主键触发,无必要检测按键信息。
□mousedown和mouseup事件,在其event对象中有一button属性表示按下或释放的按钮。
□DOM中的button属性取值:
◇0表示主鼠标按键
◇1鼠标中键(滚轮按钮)
◇2鼠标次键
□IE提供的button属性
◇0没按键◇1按主键◇2按次键◇3同时主+次◇4中键◇5主+中◇6次+中◇7主+次+中
□兼容代码
getButton : function(event){
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else{
switch(event.button){
case 0 :
case 1 :
case 3 :
case 5 :
case 7 :
return 0;
case 2 :
case 6 :
return 2;
case 4 :
return 1;
}
}
}
};
□如果不是按下或释放主键,opera不会触发mouseup或mousedown
4.2.6 更多的事件信息
□DOM2中detail属性:元素单击次数,离离开元素后清0.
□IE为鼠标增加更多信息。(仅IE支持,并无实用价值)。
4.2.7移动Safari
面向iPhone和Ipod中Safari开发时:
□不支持dblclick事件。双击Safari窗口会放大画面,无法改变该行为。
□轻击可单击元素先触发mousemove事件,若导致内容变化则无其他事件发生。若无内容变化,一次发生mousedown、mouseup和click。
□mousemove事件也会触发mouseover和mouseout事件。
4.2.7 易访问性问题
屏幕阅读器只可通过click来触发事件。使用鼠标事件时应该注意:
□使用click事件执行代码
□不要使用onmouseover向用户显示新选项。屏幕阅读器无法触发。
□不要使用dblclick执行重要操作。键盘无法触发。
4.3 键盘事件
①对键盘事件的支持主要遵循DOM0级。“DOM3级”为键盘事件制定了规范。
②3个键盘事件:
□keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件。
□keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。
□keyup:当用户释放键盘上的键时触发。
□与鼠标事件一样,支持相同的修改键。而且键盘事件对象中也有shifKey、ctrlKey、altKey、metaKey属性。
4.3.1 键码
①发生keydown和keyup事件时,event对象的keyCode属性会包含一个代码与键盘上一个特定的键对应。
②keyCode属性值与ASCII码中对应小写字母或数字的编码相同。查表P304
③DOM和IE的event对象都支持keyCode属性。
④以下是无论keydown或keyup事件都会存在的一些特殊情况:
□Firefox和Opera中,按分号键时keyCode值为59,即ASCII中值,但IE和Safari返回186,即键盘键码
□Safari3之前版本中,上下左右,上下翻页返回大于6300的值。
□在Opera9.5之前版本中,会将非数字字母键的keyCode设为ASCII编码。
□在Safari3之前版本,不会因为按下了制表、上档、控制或替代键而触发keydown和keyup事件。
4.3.2 字符编码
□Firefox、Chrome和Safari的event对象支持一个charCode属性,这个属性只有在发生keypress时才有值,为字符的ASCII编码。此时的keyCode值有可能为0,也可能为所按键码。
□IE和Opera则是在keyCode中保存ASCII编码。
□跨浏览器取字符编码
var EventUtil = {
//省略的代码
getCharCode : function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
},
};
4.3.4 textInput事件
□当用户在可编辑区域中输入字符时,会触发textInput事件。
◇只有编辑区域才能触发textInput事件。
◇事件只会在用户按下能够输入实际字符的键时才会被触发。
◇事件event对象中包含一个data属性,保存用户输入的字符。
□2008年上半年,仅Safari3和Chrome支持。
4.3.4 设备中的键盘事件。(略)
4.4 HTML事件
①定义:HTML事件指的是那些不一定与用户操作有关的事件。
□load事件:
◇当页面完全加载后window上面触发。
◇当所有框架都加载完毕时在框架集上面触发
◇当图像加载完毕时在JavaScript高级程序设计 事件学习笔记_javascript技巧元素上面触发
◇当嵌入的内容加载完毕时在元素上面触发
□unload事件:
◇当页面完全卸载后在window上面触发
◇当所有框架都卸载后在框架集上面触发
◇嵌入的内容卸载完毕后在元素上面触发
□abort事件:在用户停止下载过程时,如果嵌入的内容没有加载完,则在元素上面触发。
□error事件:
◇当发生JavaScript错误时在window上面触发
◇当无法加载图像时在JavaScript高级程序设计 事件学习笔记_javascript技巧元素上面触发
◇当无法加载嵌入内容时在元素上面触发
◇当有一或多个框架无法加载时在框架集上触发
□select事件:当用户选择文本框(

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ereignis-ID 4660: Objekt gelöscht [Fix] Ereignis-ID 4660: Objekt gelöscht [Fix] Jul 03, 2023 am 08:13 AM

Einige unserer Leser sind auf das Ereignis ID4660 gestoßen. Sie sind sich oft nicht sicher, was sie tun sollen, deshalb erklären wir es in diesem Leitfaden. Die Ereignis-ID 4660 wird normalerweise protokolliert, wenn ein Objekt gelöscht wird. Daher werden wir auch einige praktische Möglichkeiten zur Behebung des Problems auf Ihrem Computer untersuchen. Was ist Ereignis-ID4660? Die Ereignis-ID 4660 bezieht sich auf Objekte in Active Directory und wird durch einen der folgenden Faktoren ausgelöst: Objektlöschung – Ein Sicherheitsereignis mit der Ereignis-ID 4660 wird protokolliert, wenn ein Objekt aus Active Directory gelöscht wird. Manuelle Änderungen – Die Ereignis-ID 4660 kann generiert werden, wenn ein Benutzer oder Administrator die Berechtigungen eines Objekts manuell ändert. Dies kann passieren, wenn Sie Berechtigungseinstellungen ändern, Zugriffsebenen ändern oder Personen oder Gruppen hinzufügen oder entfernen

Erhalten Sie bevorstehende Kalenderereignisse auf Ihrem iPhone-Sperrbildschirm Erhalten Sie bevorstehende Kalenderereignisse auf Ihrem iPhone-Sperrbildschirm Dec 01, 2023 pm 02:21 PM

Auf iPhones mit iOS 16 oder höher können Sie bevorstehende Kalenderereignisse direkt auf dem Sperrbildschirm anzeigen. Lesen Sie weiter, um herauszufinden, wie es geht. Aufgrund von Komplikationen auf dem Zifferblatt sind viele Apple Watch-Benutzer daran gewöhnt, einen Blick auf ihr Handgelenk werfen zu können, um das nächste bevorstehende Kalenderereignis zu sehen. Mit der Einführung von iOS 16 und Sperrbildschirm-Widgets können Sie dieselben Kalenderereignisinformationen direkt auf Ihrem iPhone anzeigen, ohne das Gerät überhaupt entsperren zu müssen. Das Widget „Kalender-Sperrbildschirm“ gibt es in zwei Varianten, sodass Sie die Zeit des nächsten bevorstehenden Ereignisses verfolgen oder ein größeres Widget verwenden können, das den Namen des Ereignisses und seine Zeit anzeigt. Um mit dem Hinzufügen von Widgets zu beginnen, entsperren Sie Ihr iPhone mit Face ID oder Touch ID und halten Sie es gedrückt

PHP-Studiennotizen: Datenstrukturen und Algorithmen PHP-Studiennotizen: Datenstrukturen und Algorithmen Oct 09, 2023 pm 11:54 PM

Anmerkungen zur PHP-Studie: Überblick über Datenstrukturen und Algorithmen: Datenstrukturen und Algorithmen sind zwei sehr wichtige Konzepte in der Informatik. Sie sind der Schlüssel zur Lösung von Problemen und zur Optimierung der Codeleistung. Bei der PHP-Programmierung müssen wir häufig verschiedene Datenstrukturen verwenden, um Daten zu speichern und zu verarbeiten, und wir müssen auch Algorithmen verwenden, um verschiedene Funktionen zu implementieren. In diesem Artikel werden einige häufig verwendete Datenstrukturen und Algorithmen vorgestellt und entsprechende PHP-Codebeispiele bereitgestellt. 1. Array mit linearer Struktur (Array) Array ist eine der am häufigsten verwendeten Datenstrukturen und kann zum Speichern geordneter Daten verwendet werden.

Was ist in JavaScript der Zweck des „oninput'-Ereignisses? Was ist in JavaScript der Zweck des „oninput'-Ereignisses? Aug 26, 2023 pm 03:17 PM

Wenn dem Eingabefeld ein Wert hinzugefügt wird, tritt das oninput-Ereignis auf. Sie können versuchen, den folgenden Code auszuführen, um zu verstehen, wie Oninput-Ereignisse in JavaScript implementiert werden – Beispiel<!DOCTYPEhtml><html> <body> <p>Writebelow:</p> <inputtype="text&quot

Wie implementiert man Kalenderfunktionen und Ereigniserinnerungen in PHP-Projekten? Wie implementiert man Kalenderfunktionen und Ereigniserinnerungen in PHP-Projekten? Nov 02, 2023 pm 12:48 PM

Wie implementiert man Kalenderfunktionen und Ereigniserinnerungen in PHP-Projekten? Kalenderfunktionen und Terminerinnerungen gehören zu den häufigsten Anforderungen bei der Entwicklung von Webanwendungen. Ob persönliche Terminverwaltung, Teamzusammenarbeit oder Online-Veranstaltungsplanung – die Kalenderfunktion ermöglicht eine bequeme Zeitverwaltung und Transaktionsplanung. Die Implementierung von Kalenderfunktionen und Ereigniserinnerungen in PHP-Projekten kann durch die folgenden Schritte abgeschlossen werden. Datenbankdesign Zunächst müssen Sie eine Datenbanktabelle entwerfen, um Informationen zu Kalenderereignissen zu speichern. Ein einfaches Design könnte die folgenden Felder enthalten: id: eindeutig für das Ereignis

So implementieren Sie die Änderungsereignisbindung ausgewählter Elemente in jQuery So implementieren Sie die Änderungsereignisbindung ausgewählter Elemente in jQuery Feb 23, 2024 pm 01:12 PM

jQuery ist eine beliebte JavaScript-Bibliothek, die zur Vereinfachung der DOM-Manipulation, Ereignisbehandlung, Animationseffekte usw. verwendet werden kann. Bei der Webentwicklung stoßen wir häufig auf Situationen, in denen wir die Ereignisbindung für ausgewählte Elemente ändern müssen. In diesem Artikel wird erläutert, wie Sie mit jQuery ausgewählte Elementänderungsereignisse binden, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir ein Dropdown-Menü mit Optionen erstellen, die Beschriftungen verwenden:

Was sind die am häufigsten verwendeten Ereignisse in jquery? Was sind die am häufigsten verwendeten Ereignisse in jquery? Jan 03, 2023 pm 06:13 PM

Häufig verwendete Ereignisse in jquery sind: 1. Fensterereignisse 2. Mausereignisse, bei denen es sich um Ereignisse handelt, die generiert werden, wenn der Benutzer das Dokument bewegt oder darauf klickt, einschließlich Mausklicks, Einzugsereignisse, Auszugsereignisse usw.; 3. Tastaturereignisse: Ereignisse werden jedes Mal generiert, wenn der Benutzer eine Taste auf der Tastatur drückt oder loslässt, einschließlich Tastendruckereignissen, Tastenfreigabeereignissen usw. 4. Formularereignisse, z. B. wenn ein Element den Fokus erhält, wird der Fokus () angezeigt. Das Ereignis wird ausgelöst, und wenn es den Fokus verliert, wird das Ereignis „blur()“ ausgelöst, und das Ereignis „submit()“ wird ausgelöst, wenn das Formular gesendet wird.

Detaillierte Erläuterung der Eingabefeld-Bindungsereignisse in Vue-Dokumenten Detaillierte Erläuterung der Eingabefeld-Bindungsereignisse in Vue-Dokumenten Jun 21, 2023 am 08:12 AM

Vue.js ist ein leichtes JavaScript-Framework, das einfach zu verwenden, effizient und flexibel ist. Es ist derzeit eines der beliebtesten Front-End-Frameworks. In Vue.js sind Eingabefeld-Bindungsereignisse eine sehr häufige Anforderung. In diesem Artikel werden die Eingabefeld-Bindungsereignisse im Vue-Dokument ausführlich vorgestellt. 1. Grundkonzepte In Vue.js bezieht sich das Eingabefeld-Bindungsereignis auf die Bindung des Werts des Eingabefelds an das Datenobjekt der Vue-Instanz, wodurch eine bidirektionale Bindung von Eingabe und Antwort erreicht wird. In Vue.j

See all articles