一、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设置为“#”是为了使链接能够单击。当单击链接时，将阻止默认操作的执行，例如打开新页面或滚动到页面顶部/底部。
