下面的两个代码都做同样的事情，第一个使用Vanilla JS，第二个使用JQuery。JQuery 代码不必在 html 标签中插入任何内容，而 JS 必须插入调用者 "onclick="myFunction(("。
我怎样才能修改JS代码，这样我就不需要在html标签中插入任何东西，就像JQuery代码一样？
香草JS代码：
<!DOCTYPE html>
<html>
<body>
<p onclick="myFunction()">Click on this paragraph</button>
<script>
function myFunction() {
alert("The paragraph was clicked.");
}
</script>
</body>
</html>
JQuery Code：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click on this paragraph.</p>
</body>
</html>
您可以在p标签上使用addEventListener。
getElementsByTagName('p')[0]将返回p标签数组，在您的情况下，您需要将侦听器添加到单个段落(其索引为 0，这就是我们有[0]的原因(
<!DOCTYPE html>
<html>
<body>
<p>Click on this paragraph</p>
<script>
document.getElementsByTagName("p")[0].addEventListener("click", function() {
alert('The paragraph was clicked.')
});
</script>
</body>
</html>您只需要选择元素并将其分配给变量即可。然后，您可以使用onclick函数或addEventListener。
var pElem = document.querySelector('p');
pElem.onclick = function() {
alert("The paragraph was clicked.");
}<p>Click on this paragraph</p>或者，如果要将其应用于所有段落标签，则可以循环访问元素并分配单击功能：
var pElems = document.querySelectorAll('p');
Array.prototype.forEach.call(pElems, function(el, i){
el.onclick = function() {
alert("The paragraph was clicked.");
}
});<p>Click on this paragraph</p>
<p>Click on this paragraph</p>
<p>Click on this paragraph</p>我想这可能是你要找的？
document.getElementById("buttonID").onclick = function() {
alert('Button Clicked'); }
基本上，这会将 onclick 事件添加到具有 buttonID ID 的按钮。
addEventListener将帮助您：
var p = document.getElementsByTagName('p')[0];
p.addEventListener('click', function myFunction() {
alert("The paragraph was clicked.");
});<p>Click on this paragraph</p>问题是 jQuery 在内部将事件侦听器添加到带有addEventListener的选择器中。这基本上就是onclick属性在 HTML 中所做的。
const run = () => console.log('Button 3 clicked');
// js
document.getElementById('b1').addEventListener('click', () => {
console.log('Button 1 clicked');
})
//jquery
$('#b2').on('click', () => {
console.log('Button 2 clicked');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1">Click 1</button>
<button id="b2">Click 2</button>
<button onclick="run()">Click 3</button>首先，使用例如document.querySelector()来定位您的特定 HTML 元素。因此，例如，您可以通过类访问一个特定元素，就像jQuery一样。
其次，添加带有.addEventListener()的事件侦听器，并使用事件click指定它。
document.querySelector('.mybutton').addEventListener('click', function(){
alert('Ouch, that hurts!');
});<button class="mybutton">Click me</button>