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>

登录后复制

或

@@##@@

登录后复制

元素。

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

登录后复制

的注意事项：

避免在
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
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
移除它，因为你无法获得对该匿名函数的引用。