blocks|key|574228|text|//+select+all+<a>+tags
document.querySelectorAll('a')
++//+loop+over+them
++.forEach(a+=>
++++//+append+the+event+by+calling+addEventListener
++++a.addEventListener('click',+()+=>+window.prompt('Complete',+'Lorem')))|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|574229|forEach可以使用第二个参数，即索引，因此您可以根据数组的值在每个提示符上定义消息。|unstyled|offset|length|style|CODE|574230|const+promptValue+=+[
++'Lorem',
++'ipsum',
++'dolor',
++'sit',
++'amet'
]

document.querySelectorAll('a').forEach((a,+i)+=>
++a.addEventListener('click',+()+=>+window.prompt('Complete',+promptValue[i])))|574231|编辑:我应该补充一点，如果列表将来更改顺序，这可能会变得很难维护，所以最好在中保留对提示值的一些引用，即使它变得冗长。然而，将脚本保存在HTML中是不好的，因此数据属性可能是更好的方法。|BOLD|574232|574233|<a+data-prompt="Lorem">Lorem</a>
<a+data-prompt="ipsum">ipsum</a>
<a+data-prompt="dolor">dolor</a>
<a+data-prompt="sit">sit</a>
<a+data-prompt="amet">amet</a>|574234|JS|574235|document.querySelectorAll('a').forEach(a+=>
++a.addEventListener('click',+()+=>+window.prompt('Complete',+a.dataset.prompt)))|574236|entityMap^0|0|0|7|0|0|0|12|0|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|Z|8|@$G|10|H|11|I|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$B|C]]|$1|M|3|N|5|F|7|13|8|@$G|14|H|15|I|O]]|9|@]|A|$]]|$1|P|3|-4|5|F|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$B|C]]|$1|S|3|T|5|F|7|18|8|@$G|19|H|1A|I|O]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1B|8|@]|9|@]|A|$B|C]]|$1|W|3|-4|5|F|7|1C|8|@]|9|@]|A|$]]]|X|$]]



<pre><code>// select all &lt;a&gt; tags
document.querySelectorAll('a')
  // loop over them
  .forEach(a =&gt;
    // append the event by calling addEventListener
    a.addEventListener('click', () =&gt; window.prompt('Complete', 'Lorem')))
</code></pre>

<p>The <code>forEach</code> can take a second argument, the index, so you can define the message on each prompt according to the value of an array.</p>



<pre><code>const promptValue = [
  'Lorem',
  'ipsum',
  'dolor',
  'sit',
  'amet'
]

document.querySelectorAll('a').forEach((a, i) =&gt;
  a.addEventListener('click', () =&gt; window.prompt('Complete', promptValue[i])))
</code></pre>

<p><strong>Edit:</strong> I should probably add that this may become hard to maintain if the list changes order in the future, so it's probably better to keep some reference to the prompt value in the HTML, even if it gets verbose. Nevertheless, it's bad to keep <em>scripts</em> in the HTML, so a data attribute might be a better approach.</p>

<p><strong>HTML</strong>:</p>



<pre><code>&lt;a data-prompt="Lorem"&gt;Lorem&lt;/a&gt;
&lt;a data-prompt="ipsum"&gt;ipsum&lt;/a&gt;
&lt;a data-prompt="dolor"&gt;dolor&lt;/a&gt;
&lt;a data-prompt="sit"&gt;sit&lt;/a&gt;
&lt;a data-prompt="amet"&gt;amet&lt;/a&gt;
</code></pre>

<p><strong>JS</strong>:</p>



<pre><code>document.querySelectorAll('a').forEach(a =&gt;
  a.addEventListener('click', () =&gt; window.prompt('Complete', a.dataset.prompt)))
</code></pre>


blocks|key|574248|text|就像指出的，addEventListener是你在这里的朋友。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|574249|与普通的addEventListener相比，onClick的一个主要优点是以后添加到DOM中的任何元素也将被考虑在内，并且也可以将多个事件侦听器添加到同一个元素中。|574250|下面是一个简单的例子。基本上，我将eventListener添加到主体中，筛选出任何不是A链接的元素，然后显示用户更改该元素的innerText的提示符。|574251|​|574252|document.body.addEventListener("click",+(e)+=>+{
++//lets+limit+to+just+A+links
++if+(e.target.tagName+!==+"A")+return;
++const+ret+=+prompt("Confirm",+e.target.innerText);
++if+(ret+!==+null)+{
++++e.target.innerText+=+ret;
++}
});|code-block|syntax|javascript|574253|a+{
++text-decoration:+underline;
++cursor:+pointer;
}|574254|<div>Click+a+link+to+change+the+innerText</div>

<a>Lorem</a>
<a>ipsum</a>
<a>dolor</a>
<a>sit</a>
<a>amet</a>|574255|574256|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|X|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|O|3|P|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|Q|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<p>Like pointed out, addEventListener is your friend here.</p>

<p>One major advantange of addEventListener compared to say a normal onClick, is that any elements added to the DOM later will also be taken into account, and is also possible to add multiple event listeners to the same element.</p>

<p>Below is a simple example.  I basically add the eventListener to the body, filter out any elements that are not A links, and then show a prompt for the user to change the innerText of this element.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.body.addEventListener("click", (e) =&gt; {
  //lets limit to just A links
  if (e.target.tagName !== "A") return;
  const ret = prompt("Confirm", e.target.innerText);
  if (ret !== null) {
    e.target.innerText = ret;
  }
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>a {
  text-decoration: underline;
  cursor: pointer;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Click a link to change the innerText&lt;/div&gt;

&lt;a&gt;Lorem&lt;/a&gt;
&lt;a&gt;ipsum&lt;/a&gt;
&lt;a&gt;dolor&lt;/a&gt;
&lt;a&gt;sit&lt;/a&gt;
&lt;a&gt;amet&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2795175|text|使用JavaScript，您必须使用一个循环将单击处理程序附加到每个项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2795176|​|2795177|function+userPrompt(event){
++prompt("Complete+"+%2B+event.target.innerText);
}
document.querySelectorAll('a').forEach(item+=>+item.addEventListener('click',+userPrompt));|code-block|syntax|javascript|2795178|a+{
++cursor:+pointer
}|2795179|<a>Lorem</a>
<a>ipsum</a>
<a>dolor</a>
<a>sit</a>
<a>amet</a>|2795180|2795181|JQuery有一个简单的方法来实现这一点。|2795182|2795183|function+userPrompt(event){
++prompt("Complete+"+%2B+event.target.innerText);
}

$('a').on('click',+userPrompt);|2795184|a+{
++cursor:+pointer;
}|2795185|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a>Lorem</a>
<a>ipsum</a>
<a>dolor</a>
<a>sit</a>
<a>amet</a>|2795186|2795187|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@]|A|$]]|$1|P|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|W|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Y|$]]

<p>Using JavaScript, you have to attach the click handler to each item with a loop.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function userPrompt(event){
  prompt("Complete " + event.target.innerText);
}
document.querySelectorAll('a').forEach(item =&gt; item.addEventListener('click', userPrompt));
  </code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>a {
  cursor: pointer
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a&gt;Lorem&lt;/a&gt;
&lt;a&gt;ipsum&lt;/a&gt;
&lt;a&gt;dolor&lt;/a&gt;
&lt;a&gt;sit&lt;/a&gt;
&lt;a&gt;amet&lt;/a&gt;</code></pre>
</div>
</div>
</p>

<p>JQuery has a simple way of achieving this.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function userPrompt(event){
  prompt("Complete " + event.target.innerText);
}

$('a').on('click', userPrompt);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>a {
  cursor: pointer;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;a&gt;Lorem&lt;/a&gt;
&lt;a&gt;ipsum&lt;/a&gt;
&lt;a&gt;dolor&lt;/a&gt;
&lt;a&gt;sit&lt;/a&gt;
&lt;a&gt;amet&lt;/a&gt;</code></pre>
</div>
</div>
</p>


<p>I've a HTML code like this.</p>

<pre><code>&lt;a onclick="prompt('Complete','Lorem');"&gt;Lorem&lt;/a&gt;
&lt;a onclick="prompt('Complete','ipsum');"&gt;ipsum&lt;/a&gt;
&lt;a onclick="prompt('Complete','dolor');"&gt;dolor&lt;/a&gt;
&lt;a onclick="prompt('Complete','sit');"&gt;sit&lt;/a&gt;
&lt;a onclick="prompt('Complete','amet');"&gt;amet&lt;/a&gt;
...
</code></pre>

<p>I want to minify HTML code, like this: <code>&lt;a&gt;Lorem&lt;/a&gt;&lt;a&gt;ipsum&lt;/a&gt;</code><br/>How can I add onclick prompt event to all clickable elements in a page? as in the above code. Is it possible?</p>


How to add multiple onclick events to all elements in page

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有这样的HTML代码。<a onclick="prompt('Complete','Lorem');">Lorem</a><a onclick="prompt('Complete','ipsum');">ipsum</a><a onclick="prompt('Complete','dolor');">dolor</...

问如何向页面中的所有元素添加多个onclick事件
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何向页面中的所有元素添加多个onclick事件EN