資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
