HTML事件属性有哪些？onclick怎么用-html教程-PHP中文网

常见的html事件属性包括：1. 鼠标事件如onclick、ondblclick、onmouseover等；2. 键盘事件如onkeydown、onkeyup；3. 表单事件如onchange、onsubmit、onfocus；4. 窗口/文档事件如onload、onresize；5. 触摸事件如ontouchstart、ontouchend；6. 拖放事件如ondrag、ondrop；7. 媒体事件如onplay、onpause；8. 剪贴板事件如oncopy、onpaste；9. 打印事件如onbeforeprint、onafterprint；onclick通过在html标签中添加属性并执行javascript代码来响应点击操作，推荐使用addeventlistener方法替代onclick以实现更灵活的事件管理，该方法可通过event.stoppropagation()控制事件流、支持多个监听器并可动态移除，移除时需调用removeeventlistener并传入相同事件类型和函数引用，确保事件处理逻辑可维护且高效。

HTML事件属性有哪些？onclick怎么用

HTML事件属性，简单来说，就是让你的网页能“听懂”用户的操作。比如点击按钮，鼠标移动，甚至页面加载完成，都可以触发不同的事件，然后执行你预先设定的代码。onclick 只是众多事件属性中的一个，专门负责监听鼠标点击事件。

解决方案

HTML事件属性本质上是赋予HTML元素响应用户交互的能力。它们允许你在特定事件发生时执行JavaScript代码。onclick 只是冰山一角，还有很多其他事件属性等着你去探索。

常见的HTML事件属性有哪些？

HTML事件属性种类繁多，可以根据事件类型进行大致分类：

立即学习“前端免费学习笔记（深入）”；

鼠标事件：
```
onclick
```
登录后复制
(点击),
```
oncontextmenu
```
登录后复制
(右键菜单),
```
ondblclick
```
登录后复制
(双击),
```
onmousedown
```
登录后复制
(鼠标按下),
```
onmouseup
```
登录后复制
(鼠标抬起),
```
onmousemove
```
登录后复制
(鼠标移动),
```
onmouseover
```
登录后复制
(鼠标悬停),
```
onmouseout
```
登录后复制
(鼠标移开)
键盘事件：
```
onkeydown
```
登录后复制
(键盘按下),
```
onkeypress
```
登录后复制
(键盘按压),
```
onkeyup
```
登录后复制
(键盘抬起)
表单事件：
```
onblur
```
登录后复制
(失去焦点),
```
onchange
```
登录后复制
(值改变),
```
onfocus
```
登录后复制
(获得焦点),
```
onreset
```
登录后复制
(重置表单),
```
onselect
```
登录后复制
(文本选中),
```
onsubmit
```
登录后复制
(提交表单)
窗口/文档事件：
```
onload
```
登录后复制
(页面加载完成),
```
onresize
```
登录后复制
(窗口大小改变),
```
onscroll
```
登录后复制
(滚动条滚动),
```
onunload
```
登录后复制
(页面卸载)
触摸事件 (移动端)：
```
ontouchstart
```
登录后复制
(触摸开始),
```
ontouchmove
```
登录后复制
(触摸移动),
```
ontouchend
```
登录后复制
(触摸结束),
```
ontouchcancel
```
登录后复制
(触摸取消)
拖放事件：
```
ondrag
```
登录后复制
,
```
ondragend
```
登录后复制
,
```
ondragenter
```
登录后复制
,
```
ondragleave
```
登录后复制
,
```
ondragover
```
登录后复制
,
```
ondragstart
```
登录后复制
,
```
ondrop
```
登录后复制
媒体事件：
```
onabort
```
登录后复制
,
```
oncanplay
```
登录后复制
,
```
oncanplaythrough
```
登录后复制
,
```
ondurationchange
```
登录后复制
,
```
onemptied
```
登录后复制
,
```
onended
```
登录后复制
,
```
onerror
```
登录后复制
,
```
onloadeddata
```
登录后复制
,
```
onloadedmetadata
```
登录后复制
,
```
onloadstart
```
登录后复制
,
```
onpause
```
登录后复制
,
```
onplay
```
登录后复制
,
```
onplaying
```
登录后复制
,
```
onprogress
```
登录后复制
,
```
onratechange
```
登录后复制
,
```
onseeked
```
登录后复制
,
```
onseeking
```
登录后复制
,
```
onstalled
```
登录后复制
,
```
onsuspend
```
登录后复制
,
```
ontimeupdate
```
登录后复制
,
```
onvolumechange
```
登录后复制
,
```
onwaiting
```
登录后复制
剪贴板事件：
```
oncopy
```
登录后复制
,
```
oncut
```
登录后复制
,
```
onpaste
```
登录后复制
打印事件：
```
onafterprint
```
登录后复制
,
```
onbeforeprint
```
登录后复制

这只是一个大致的列表，实际上还有一些更细分的事件属性。记住，并非所有事件属性都适用于所有HTML元素。例如，

onchange

登录后复制

通常用于

<input>

登录后复制

<select>

登录后复制

, 和

<textarea>

登录后复制

元素，而

onload

登录后复制

主要用于

<body>

登录后复制

或

<img>

登录后复制

元素。

onclick 事件属性怎么用？

onclick

登录后复制

事件属性用于在用户点击HTML元素时执行JavaScript代码。用法非常简单，直接在HTML标签中添加

onclick

登录后复制

属性，并赋予它一个JavaScript代码片段或函数调用。

示例 1：直接在onclick中编写JavaScript代码

<button onclick="alert('你点击了我！')">点击我</button>

登录后复制

当用户点击这个按钮时，会弹出一个包含 "你点击了我！" 的警告框。

示例 2：调用JavaScript函数

<script>
  function handleClick() {
    console.log("按钮被点击了！");
    // 可以执行更复杂的操作，例如修改页面内容，发送网络请求等
  }
</script>

<button onclick="handleClick()">点击我</button>

登录后复制

在这个例子中，点击按钮会调用名为

handleClick

登录后复制

的JavaScript函数。这个函数可以在控制台中输出 "按钮被点击了！"，或者执行其他你需要的操作。

示例 3：传递参数给函数

<script>
  function showMessage(message) {
    alert(message);
  }
</script>

<button onclick="showMessage('Hello, world!')">点击我</button>

登录后复制

这里，我们通过

onclick

登录后复制

将字符串 "Hello, world!" 作为参数传递给

showMessage

登录后复制

函数。点击按钮会弹出一个显示 "Hello, world!" 的警告框。

一些使用

onclick

登录后复制

的注意事项：

KAIZAN.ai

使用AI来改善客户服体验，提高忠诚度

查看详情

避免在
onclick
登录后复制
中编写过多的代码。复杂的逻辑应该放在单独的JavaScript函数中，然后在
```
onclick
```
登录后复制
中调用该函数。
this
登录后复制
关键字。在
```
onclick
```
登录后复制
中，
```
this
```
登录后复制
关键字指向触发事件的HTML元素。你可以使用
```
this
```
登录后复制
来访问元素的属性或调用其方法。
事件冒泡。 点击一个元素可能会触发其父元素的
```
onclick
```
登录后复制
事件。可以使用
```
event.stopPropagation()
```
登录后复制
来阻止事件冒泡。
addEventListener。 除了直接在HTML中使用
```
onclick
```
登录后复制
属性外，还可以使用JavaScript的
```
addEventListener
```
登录后复制
方法来绑定事件。这是一种更灵活和推荐的方式，因为它允许你为一个元素绑定多个事件处理程序，并且可以更好地控制事件的传播。

如何使用 addEventListener 替代 onclick？

addEventListener

登录后复制

提供了更灵活的事件处理机制，特别是在大型项目中。它允许你为一个元素绑定多个事件监听器，而不会像

onclick

登录后复制

那样互相覆盖。

示例：使用 addEventListener 绑定点击事件

<button id="myButton">点击我</button>

<script>
  const button = document.getElementById('myButton');

  button.addEventListener('click', function() {
    console.log('按钮被点击了 (addEventListener)!');
  });

  button.addEventListener('click', function() {
    alert('另一个点击事件处理程序!');
  });
</script>

登录后复制

在这个例子中，我们首先通过

document.getElementById

登录后复制

获取按钮元素。然后，使用

addEventListener

登录后复制

方法为按钮绑定了两个点击事件处理程序。当按钮被点击时，这两个处理程序都会被执行。

addEventListener

登录后复制

的语法如下：

element.addEventListener(event, function, useCapture);

登录后复制

```
event
```
登录后复制
: 要监听的事件类型，例如
```
'click'
```
登录后复制
,
```
'mouseover'
```
登录后复制
,
```
'keydown'
```
登录后复制
等。注意，这里不需要加
```
on
```
登录后复制
前缀。
```
function
```
登录后复制
: 事件处理程序，即当事件发生时要执行的函数。
```
useCapture
```
登录后复制
: 可选参数，指定事件是在捕获阶段还是冒泡阶段处理。默认为
```
false
```
登录后复制
(冒泡阶段)。

addEventListener 的优点：

可以为一个元素绑定多个事件处理程序。
可以控制事件的传播 (捕获或冒泡)。
更易于管理和维护事件处理代码。
可以动态地添加和移除事件监听器。

总而言之，虽然

onclick

登录后复制

属性在简单场景下很方便，但

addEventListener

登录后复制

在更复杂的应用中提供了更强大的功能和更好的代码组织方式。

如何移除通过 addEventListener 添加的事件监听器？

有时候，你可能需要在特定情况下移除之前通过

addEventListener

登录后复制

添加的事件监听器。这可以通过

removeEventListener

登录后复制

方法来实现。

示例：移除事件监听器

<button id="myButton">点击我</button>

<script>
  const button = document.getElementById('myButton');

  function handleClick() {
    console.log('按钮被点击了!');
    // 移除事件监听器
    button.removeEventListener('click', handleClick);
    console.log('事件监听器已移除');
  }

  button.addEventListener('click', handleClick);
</script>

登录后复制

在这个例子中，我们定义了一个名为

handleClick

登录后复制

的函数，并将其作为点击事件的监听器添加到按钮上。当按钮被点击时，

handleClick

登录后复制

函数会被执行，它首先会在控制台中输出 "按钮被点击了!"，然后使用

removeEventListener

登录后复制

方法将自身从按钮的点击事件监听器列表中移除。之后，再次点击按钮将不会再触发任何事件。

removeEventListener 的语法：

element.removeEventListener(event, function, useCapture);

登录后复制

```
event
```
登录后复制
: 要移除的事件类型，必须与添加监听器时使用的事件类型完全一致。
```
function
```
登录后复制
: 要移除的事件处理程序，必须与添加监听器时使用的函数完全一致 (即同一个函数对象)。
```
useCapture
```
登录后复制
: 可选参数，必须与添加监听器时使用的
```
useCapture
```
登录后复制
值完全一致。

注意事项：

要成功移除事件监听器，传递给
```
removeEventListener
```
登录后复制
的参数必须与添加监听器时使用的参数完全相同。这意味着你需要保存对事件处理函数的引用，以便稍后可以将其传递给
```
removeEventListener
```
登录后复制
。
如果使用匿名函数作为事件处理程序，则无法通过
```
removeEventListener
```
登录后复制
移除它，因为你无法获得对该匿名函数的引用。

因此，为了能够移除事件监听器，建议将事件处理函数定义为具名函数，并保存对该函数的引用。