特定於此的事件處理程序

好的，我知道標題有點含糊，但是我的HTML頁面有很多段落，並且我想要點擊一個時顏色變爲綠色。我爲所有段落設置了onClick()，但是如何才能將更改專門用於單擊的段落，而不是對所有段落進行更改？特定於此的事件處理程序

目前我正在使用但我也不介意找到一種方法來在JavaScript而不是HTML中做到這一點。我如何在script.js文件中編寫onClick方法？謝謝！

2014-10-09 turkey3

見http://www.quirksmode.org/js/ this.html。儘管解釋並非100％正確，但它解釋瞭如何獲取對元素的引用。 – 2014-10-09 16:57:41

你可以請你發佈你的代碼嗎？向你展示如何修改你已經完成的任務會容易得多。 – 2014-10-09 16:57:43

將事件處理程序添加到DOM元素時，函數內的this將引用處理程序的執行元素。

<p onClick='function(){this.style.color = "#234"}'></p>

來源

2014-10-09 16:59:24 Brennan

我很確定[這會導致語法錯誤]（http://jsfiddle.net/zd4hfzu8/）。你正在定義一個沒有名字的函數。即使你給了它一個名字也沒用，因爲你不會在任何地方調用它。 – 2014-10-09 17:04:55

您可以使用外部JS文件說script.js。將該文件包含在原始html文件中。

在該文件中使用以下內容。

<p> text </p>

然後JS在script.js將

var paras = document.getElementsByTagName("p"); 
for(var i =0;i<paras.length;i++) 
{ 
    paras[i].onclick =function(){ 
     this.style.color = "#234"; 
    }; 
}

JSFIDDLE

來源

2014-10-09 17:02:02

由於問題沒有使用jQuery進行標記，因此您應該提供沒有它的解決方案。 – 2014-10-09 17:02:44

我不希望爲一個小任務使用整個代碼庫，但謝謝。 – turkey3 2014-10-09 17:04:23

@FelixKling是的，更新的代碼！ – 2014-10-09 17:04:32

您可以使用事件偵聽器上一個段落捕捉用戶點擊，如你所願。然後，當用戶點擊一個段落時，該段落被傳遞給偶數偵聽器發現的東西時將運行的函數。

所以，如果你有兩個段落：

<p>hello</p> 
<p>world</p>

可以使用傾聽用戶點擊他們：

var paragraphs = document.getElementsByTagName("p") 

for (var i = 0; i < paragraphs.length; i++) { 
    paragraphs[i].addEventListener("click", function() { 
     this.style.color = "red"; 
    }); 
}

所以對於所有文檔中的段落，當用戶點擊一，它的文字會變成紅色。

Here's a JSFiddle!

來源

2014-10-09 17:03:31 helllomatt

這可能是最好地利用事件委託，在這裏您將一個單擊處理程序包含所有標記，以便刪除或添加段落不需要移除或添加事件處理程序的元素。

<div id="container"> 
    <p>...</p> 
    <p><strong>...</strong></p> 
    <p>... <img /></p> 
    <p>...</p> 
    <p>...</p> 
</div> 

<script type="text/javascript"> 
    document.getElementById("container").addEventListener("click", function(event) { 
     var element = event.target; 

     while (element) { 
      if (element.nodeName === "P") { 
       element.style.backgroundColor = "red"; 
       break; 
      } 

      element = element.parentNode; 
     } 
    }, false); 
</script>

這種做法是很好的，因爲你可以點擊一個標籤，這是一個段落裏面，段落標記將仍然獲得彩色。

來源

2014-10-09 17:06:07

特定於此的事件處理程序

回答

相關問題