JavaScript事件解析

事件是在程式設計時系統內發生的動作或發生的事情. 系統透過它來告訴程式設計者,在程式設計者願意的情況下,程式設計者一某種方式對它做出回應.本文主要和大家分享JavaScript事件解析，希望能幫助到大家。

新增事件方式

元素屬性

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

行內事件

<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('Hello, this is my old-fashioned event handler!');">Press me</button><br></span>

註冊事件監聽

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

優缺點

• 元素屬性

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

• 行內事件

#

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

• 註冊事件監聽

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

事件物件

#具體請看event詳解-https://developer.mozilla.org

• 在觸發DOM上的某個事件時，會在事件處理程序函數中會產生一個事件物件event，而這個物件中包含著所有與事件有關的資訊.包括導致事件的元素、事件的類型以及其他與特定事件相關的資訊.

#

<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與event.target

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

• 例如，你可能有一組16塊方格，當它們被點擊時就會消失。用e.target總是能準確選擇當前操作的東西（方格）並執行操作讓它消失，而不是必須以更困難的方式選擇它.

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

阻止預設行為(event.preventDefault())

• 有時，你會遇到一些情況，你希望事件不要執行它的預設行為例如自訂登錄表單

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

事件冒泡及擷取(event.stopPropagation())

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

#事件委託

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

#如:滑鼠放到li上對應的li背景變灰

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

• 利用事件冒泡實作

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

• 為所有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>

自訂事件(DOM的事件模擬又稱為「偽DOM自訂事件」)

• js原生自訂事件分三個階段(創造、初始化、觸發)

#摘自https://developer.mozilla.org...

(1). 創造

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

#(2) 初始化

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

(3) .觸發

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

監聽方法

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

• jq自訂dom事件

#(1). trigger()

<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 + "");<br>   });<br>   $("#btn").trigger("clickCustomize",["我的自定义","事件"]); //传递两个数据<br>   $(“#btn”).trigger(“clickCustomize”,["我的自定义","事件"]); //传递两个数据<br></span>

(2). triggerHandler();(阻止預設事件)

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

• DOM自訂事件優勢與劣勢：

(1)、優點：

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

(2)、劣勢

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

相關推薦：

#JavaScript事件處理程序詳解

### Javascript事件與滑鼠座標的屬性############JavaScript事件學習之事件流、處理程序與物件總結######

以上是JavaScript事件解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！