为什么在 HTML 中使用 onClick() 是一种不好的做法?
在本教程中，我们将了解为什么在 HTML 中使用 onClick() 是一种不好的做法。
JavaScript 中有一些事件和方法来处理诸如点击、悬停等操作。onClick() 是最常用的方法，它在点击元素时执行一个函数。此方法作为元素的属性应用于元素。它可能包含函数的名称或脚本本身。
JavaScript 还包含 addEventListener 方法，用于在事件发生时执行函数。执行事件的方法有很多，每种方法都有其优缺点。
那么，让我们看看为什么在 HTML 中使用 onClick() 是一种不好的做法。
在 HTML 中使用 onClick() 是一种不好的做法
HTML 中的 onClick() 是元素作为属性提供的一个方法。它的值可以是 JavaScript 函数，也可以是在该元素上发生点击事件后执行的脚本。但这种方法有一些缺点，因此被认为是一种不好的做法。
以下是 HTML 中使用 onClick() 的不良做法的原因:
降低代码的可读性
在 HTML 元素中使用 onClick() 方法会降低代码的可读性，并使其难以管理。此函数接受 JavaScript 作为其值，该值可能是函数名称或脚本本身。因此，在查找使用 JavaScript 的代码时，我们必须查看包含 onClick() 方法的所有元素。这使得程序更难理解。
该函数应全局创建
如果我们在元素的 onClick() 方法中声明了一个函数，那么该函数应该在 JavaScript 中全局创建。为每个元素使用 onClick() 创建全局函数会造成全局语句污染，应该避免这种情况。创建多个全局语句后，很难确定哪个函数属于哪个元素。
导致性能下降
onClick() 方法甚至会影响程序的性能。使用 onClick() 方法声明元素会创建许多需要时间执行的全局函数。添加的 onClick() 元素越多，程序执行所需的时间就越长。
用户可以按照以下语法了解如何使用 onClick() 方法 -
语法
<button onclick="func()"> </button>
<script>
function func(){
<Write the program here>
}
</script>
按照上述语法执行 onclick() 方法。
示例
在下面的示例中，我们对每个文档元素都使用了 onclick 方法。点击元素时，该方法会执行相应的函数。因此，脚本中创建了四个函数。每个函数都会在点击单个元素时执行。但是，该程序难以阅读和维护，因为我们必须找到具有指定函数名称的元素才能更改代码。每个声明的函数都是全局的，并且在某些情况下可能会出现意外行为。此外，如果函数数量不断增加，程序运行时间也会增加。
<html>
<body>
<h2 onclick="func3()"> Using <i> onClick() method </i> to execute on onclick event on element </h2>
<p onclick="func1()"> This is Demo Text! </p>
<input type="text" id="Text" name="Text" value="" onclick="func()" />
<button onclick="func2()"> Click me </button>
<p id="para"> </p>
</body>
<script>
document.getElementById('para').style.color = "red";
function func() {
document.getElementById('para').innerHTML = 'Clicked on a input field';
}
function func1() {
document.getElementById('para').innerHTML = 'Clicked on a paragraph';
}
function func2() {
document.getElementById('para').innerHTML = 'Clicked on a button';
}
function func3() {
document.getElementById('para').innerHTML = 'Clicked on a heading';
}
</script>
</html>
在上面的例子中，用户可以看到我们使用了 onclick 方法在点击元素时执行函数。尝试点击文本"This is Demo Text!"、输入框和按钮"Click me"来执行 onclick 事件。
onClick() 方法的替代方案
如果您在文档中的单个元素上使用 onClick()，则没有问题。但是，如果您需要在多个元素上添加点击事件，则使用 addEventListener 是更好的方法。addEventListener 接受两个参数，其中一个是要添加的事件，另一个是函数或其名称。我们可以在 addEventListener 方法的第一个参数中添加所有事件。
所有用户都可以按照以下语法在 JavaScript 中使用 addEventListener -
语法
var element = document.getElementById( <Enter element Id> );
element.addEventListener("click", func);
function func(){
<Your script here>
}
按照上述语法在 JavaScript 中 addEventListener。
示例
在本例中，我们使用了 addEventListener() 方法在点击元素时执行一个函数。我们将从用户那里获取一个字符串输入，并将其分解成一个数组，并使用 sort() 方法按升序和降序排列。
<html>
<body>
<h2> Using <i> addEventListener method </i> to execute click event </h2>
<label for="input"> Add a string: </label>
<input type="text" id="input" name="Input" value="" />
<button id="btn"> Submit </button>
<p id="para" style="color: red;"> </p>
<p id="para1" style="color: red;"> </p>
<script>
document.getElementById("btn").addEventListener("click", () => {
var value = document.getElementById('input').value;
var array = value.split('');
var sort = array.sort();
document.getElementById('para').innerHTML = "After sorting in ascending order: " + sort;
var rsort = array.sort().reverse();
document.getElementById('para1').innerHTML = "After sorting in decending order: " + rsort;
})
</script>
</body>
</html>
在上面的例子中，用户可以看到我们使用了 addEventListener 方法在 JavaScript 中点击元素时执行点击事件。
在本教程中，我们了解了为什么在 HTML 中使用 onClick() 是一种不好的做法，以及它如何替代点击事件。
