JavaScript中點擊事件onclick用法詳解

一、onclick基本使用

onclick事件常用於HTML元素中，通過單擊元素觸發JavaScript代碼的執行。

<button onclick="alert('Hello World!');">Click Me</button>

按鈕被單擊時，將彈出一個警告框，其中包含文本“Hello World!”。

onclick事件也可以添加在JavaScript代碼內部。

let btn = document.querySelector('button');
btn.onclick = function() {
  alert('Hello World!');
};

這樣也能實現與第一個示例一樣的效果，但是這種方法只能針對單個元素。

二、onclick與函數

onclick事件常常與函數結合使用，通過單擊事件觸發函數的執行。

<button onclick="myFunction()">Click Me</button>

<script>
function myFunction() {
  alert('Hello World!');
}
</script>

當按鈕被單擊時，將觸發myFunction()函數的執行，彈出一個警告框，其中包含文本“Hello World!”。

三、傳遞參數

onclick還可以用來傳遞參數給函數。

<button onclick="myFunction('Hello','World')">Click Me</button>

<script>
function myFunction(arg1, arg2) {
  alert(arg1 + ' ' + arg2 + '!');
}
</script>

當按鈕被單擊時，將觸發myFunction()函數的執行，並且傳入參數“Hello”和“World”，彈出一個警告框，其中包含文本“Hello World!”。

四、事件委託

事件委託是一種優化性能的技術，通過在父元素上添加單擊事件來代替在每個子元素上添加單擊事件。

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

<script>
let list = document.getElementById('myList');
list.onclick = function(event) {
  if (event.target.tagName == 'LI') {
    alert('You clicked ' + event.target.innerHTML);
  }
};
</script>

在這個示例中，我們將單擊事件添加到了ul元素上，並檢查被單擊的元素是否是li元素。如果是，將輸出li元素的內容到一個警告框中。

五、取消事件

如果需要取消onclick事件的執行，可以使用preventDefault()方法。

<a href="#" onclick="event.preventDefault();">Click me</a>

在這個示例中，href設置為“#”是為了使鏈接能夠單擊。當單擊鏈接時，將阻止默認操作的執行，例如打開新頁面或滾動到頁面頂部/底部。