Question

好吧，我知道标题有点模糊，但我的HTML页面有很多段落，当我点击时，我希望颜色变为绿色。我为所有段落设置了onClick()，但是如何更改为特定的点击段落而不是对所有段落进行更改？

目前我正在使用，但我也不介意在javascript而不是HTML中找到一种方法。我如何编写script.js文件中的onClick方法？谢谢！

Answer 1

当您向DOM元素添加事件处理程序时，函数内的this将引用执行处理程序的元素。

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

Answer 2

您可以使用外部JS文件说script.js。将该文件包含在原始html文件中。

在该文件中使用以下内容。

<p> text </p>

然后script.js中的JS将是

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

JSFIDDLE

Answer 3

您可以捕获用户使用事件侦听器单击某个段落，如您所料。然后，当用户单击某个段落时，该段落将传递给将在偶数侦听器找到某些内容时运行的函数。

所以，如果你有两个段落：

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

Answer 4

最好使用事件委派，将点击处理程序附加到包含所有标记的元素，以便删除或添加段落不需要删除或添加事件处理程序。

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

这种方法很不错，因为您可以点击段落中的标记，并且段落标记仍然会着色。

特定于此的事件处理程序

4 个答案: