Parsen von JavaScript-Ereignissen

Ereignisse sind Aktionen oder Dinge, die während der Programmierung im System passieren. Das System verwendet es, um dem Programmierer mitzuteilen, dass der Programmierer auf eine bestimmte Weise darauf reagieren wird. Dieser Artikel teilt Ihnen hauptsächlich die JavaScript-Ereignisanalyse mit, in der Hoffnung, allen zu helfen.

Ereignismethode hinzufügen

Elementattribut

<span style="font-size: 14px;">var btn = document.querySelector('button');<br><br>btn.onclick = function() {<br>  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';<br>  document.body.style.backgroundColor = rndCol;<br>}<br><br>或者<br><br>var btn = document.querySelector('button');<br><br>function bgChange() {<br>  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';<br>  document.body.style.backgroundColor = rndCol;<br>}<br><br>btn.onclick = bgChange<br></span>

Inline-Ereignis

<span style="font-size: 14px;"><button onclick="bgChange()">Press me</button><br><br>function bgChange() {<br>  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';<br>  document.body.style.backgroundColor = rndCol;<br>}<br><br>或者<br><br><button onclick="alert(&#39;Hello, this is my old-fashioned event handler!&#39;);">Press me</button><br></span>

Event-Listener registrieren

<span style="font-size: 14px;">addEventListener()和removeEventListener();<br><br>btn.addEventListener('click', function() {<br>  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';<br>  document.body.style.backgroundColor = rndCol;<br>});<br><br>或者<br><br>btn.removeEventListener('click', bgChange);<br></span>

Vor- und Nachteile

• Elementattribute

<span style="font-size: 14px;">优:<br>     1. 兼容性好<br>     2. 行为的分离<br>     3.便于操作当事对象，因为function是作为on***的属性出现的，可直接用this引用当事对象<br>缺: <br>     1. 给同一个监听器注册多个处理器,后面的会覆盖前面<br>     btn.onclick=function(){alert('a')};<br>     btn.onclick=function(){alert('b')};<br></span>

• Inline-Ereignisse

<span style="font-size: 14px;">优:<br>     1. 兼容性好,是最早的事件处理方法<br>     2. 方便快捷<br>缺: <br>     1. 代码杂糅<br>     2. 难以管理和效率低下,一个按钮看起来还好，但是如果有一百个按钮呢？得在文件中加上100个属性<br>     3. 文档很难解析<br></span>

• Ereignis-Listener registrieren

<span style="font-size: 14px;">优:<br>     1. 它允许为事件添加多个单独的处理程序。这对于DHTML库或Mozilla扩展尤其有用，即使使用其他库/扩展也需要很好的工作<br>     2. 它可以让你更好地控制阶段，当听者被激活（捕获与冒泡）<br>     3. 它适用于任何DOM元素，而不仅仅是HTML元素<br>     4. 行为的分离 <br>缺:<br>    兼容性(不过网上有很多成熟的hack);<br></span>

Ereignisobjekt

Für Details bitte siehe Ereignisdetails -https://developer.mozilla.org

• Wenn ein Ereignis im DOM ausgelöst wird, wird im Ereignishandler ein Ereignisobjekt generiert Funktionsereignis, dieses Objekt enthält alle Informationen im Zusammenhang mit dem Ereignis. Enthält das Element, das das Ereignis verursacht hat, die Art des Ereignisses und andere Informationen im Zusammenhang mit dem spezifischen Ereignis

<span style="font-size: 14px;">var btn = document.getElementById("myBtn");<br>btn.onclick = function(event) {<br>    alert(event.type); //"click"<br>}<br>btn.addEventListener("click", function(event) {<br>    alert(event.type); //"click"<br>}, false);<br></span>

event.currentTarget und event.target

<span style="font-size: 14px;">事件对象event的target属性始终是事件刚刚发生的元素的引用<br></span>

• Zum Beispiel könnten Sie einen Satz von 16 Quadraten haben, die verschwinden, wenn Sie darauf klicken. Mit e.target können Sie immer genau das auswählen, was Sie gerade bearbeiten (Quadrat) und den Vorgang ausführen, um es verschwinden zu lassen, anstatt es auf schwierigere Weise auswählen zu müssen.

<span style="font-size: 14px;">var ps = document.querySelectorAll('p');<br><br>for (var i = 0; i < ps.length; i++) {<br/>  ps[i].onclick = function(e) {<br/>    e.target.style.backgroundColor = bgChange();<br/>  }<br/>}<br/></span>

Standardverhalten verhindern (event.preventDefault())

• Manchmal werden Sie auf Situationen stoßen, in denen Sie das Ereignis wünschen sein Standardverhalten wie ein benutzerdefiniertes Registrierungsformular nicht auszuführen

<span style="font-size: 14px;">var form = document.querySelector(&#39;form&#39;);<br/>var fname = document.getElementById(&#39;fname&#39;);<br/>var lname = document.getElementById(&#39;lname&#39;);<br/>var submit = document.getElementById(&#39;submit&#39;);<br/>var para = document.querySelector(&#39;p&#39;);<br/>form.onsubmit = function(e) {<br/>  if (fname.value === &#39;&#39; || lname.value === &#39;&#39;) {<br/>    e.preventDefault();<br/>    para.textContent = &#39;You need to fill in both names!&#39;;<br/>  }<br/>}<br/></span>

Ereignis-Bubbling und -Erfassung (event.stopPropagation())

<span style="font-size: 14px;">描述事件触发时序问题的术语。<br/>事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。<br/>事件冒泡是自下而上的去触发事件。<br/>绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡<br/></span>

Ereignisdelegierter

<span style="font-size: 14px;">冒泡还允许我们利用事件委托——这个概念依赖于这样一个事实,如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并将事件监听器气泡的影响设置为每个子节点，而不是每个子节点单独设置事件监听器<br/></span>

Zum Beispiel: der Hintergrund der entsprechenden Li-Turns grau, wenn die Maus darauf platziert wird

<span style="font-size: 14px;"><ul><br>    <li>item1</li><br>    <li>item2</li><br>    <li>item3</li><br>    <li>item4</li><br>    <li>item5</li><br>    <li>item6</li><br></ul><br></span>

• Verwenden Sie Event Bubbling, um

<span style="font-size: 14px;">$("ul").on("mouseover",function(e){<br>     $(e.target).css("background-color","#ddd").siblings().css("background-color","white");<br>})<br></span>

• Verknüpfen Sie Ereignisse mit allen Li

<span style="font-size: 14px;">$("li").on("mouseover",function(){<br>      $(this).css("background-color","#ddd").siblings().css("background-color","white");<br>})<br></span>

<span style="font-size: 14px;">代码简洁程度上，两者是相若仿佛的。<br>前者少了一个遍历所有li节点的操作，所以在性能上肯定是更优的<br>如果在绑定事件完成后，页面又动态的加载了一些元素<br>第二种方案，由于绑定事件的时候item7还不存在，所以为了效果，我们还要给它再绑定一次事件.<br></span>

Benutzerdefinierte Ereignisse (DOM-Ereignissimulation wird auch „ benutzerdefinierte Pseudo-DOM-Ereignisse“ )

• JS native benutzerdefinierte Ereignisse sind in drei Phasen unterteilt (Erstellung, Initialisierung, Auslösung)

Auszug aus https://developer.mozilla.org...

(1) Erstellung

<span style="font-size: 14px;">var event = document.createEvent(type);<br>type:是一个字符串，表示要创建的事件类型。事件类型可能包括是一个字符串，表示要创建的事件类型。<br>事件类型可能包括"UIEvents", "MouseEvents", "MutationEvents", 或者 "HTMLEvents"<br></span>

( 2) Initialisieren Sie

<span style="font-size: 14px;">event.initEvent('build', true, true);<br>于初始化通过DocumentEvent接口创建的Event的值。支持三个参数：initEvent(eventName, canBubble,preventDefault)<br>分别表示事件名称，是否可以冒泡，是否阻止事件的默认操作<br></span>

(3). Triggern Sie

<span style="font-size: 14px;">elem.dispatchEvent(event);<br>参数event表示事件对象，是createEvent()方法返回的创建的Event对象<br></span>

Abhörmethode

<span style="font-size: 14px;">elem.addEventListener('build', function (e) {<br>// e.target matches elem<br>}, false);<br></span>

• jq benutzerdefiniertes Dom-Ereignis

(1).

<span style="font-size: 14px;">常用模拟<br>  模拟方法操作<br>   $("#btn").trigger("click");<br>     或者    <br>   $("#btn").click();<br></span>

<span style="font-size: 14px;">自定义事件<br>   $("#btn").on("myClick", function () {<br>       $("#test").append("<p>我的自定义事件。</p>")；<br>    })；    <br>   $("btn").trigger("myClick");<br></span>

<span style="font-size: 14px;">传递数据<br>  trigger(tpye[,datea])；<br>  第一个参数是要触发的事件类型，<br>  第二个单数是要传递给事件处理函数的附加数据，以数组形式传递。<br>  通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的<br>   $("#btn").bind("clickCustomize", function (event, message1, message2) { //获取数据<br>        $("#test").append("p" + message1 + message2 + "</p>");<br>   });<br>   $("#btn").trigger("clickCustomize",["我的自定义","事件"]); //传递两个数据<br>   $(“#btn”).trigger(“clickCustomize”,["我的自定义","事件"]); //传递两个数据<br></span>

(2).triggerHandler();(Standardereignis blockieren)

<span style="font-size: 14px;">triggerHandler("lickCustomize");<br></span>

• Vor- und Nachteile eines benutzerdefinierten DOM-Ereignisses:

(1), Vorteile:

<span style="font-size: 14px;">1、自定义事件完全由我们控制触发时机，这就意味着实现了一种 JavaScript 的解耦。我们可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好<br>2、既然绑定也可以解绑，如果不需要了，直接移除绑定事件<br></span>

(2 ), Nachteil

Verwandte Empfehlungen:

<span style="font-size: 14px;">1、兼容性差，要自己hack(jq除外)<br></span>

Detaillierte Erläuterung von JavaScript-Ereignishandlern

Eigenschaften von Javascript-Ereignissen und Mauskoordinaten

Zusammenfassung von Ereignisströmen, Handlern und Objekten beim JavaScript-Ereignislernen

Das obige ist der detaillierte Inhalt vonParsen von JavaScript-Ereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!