数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究为什么在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()是一种不好的实践，以及其点击事件的替代方法。
6000+ 次浏览
