HTML有哪些事件属性?

HTML有哪些事件属性?

1. 事件属性的定义和使用

在HTML中,事件属性可以用来定义在用户操作发生时应当发生的事情,例如单击一个按钮应当触发的函数。该函数可以通过JavaScript来实现。一个事件属性包含两个部分:事件处理器和事件本身。

语法格式如下:

由于一些历史原因,有些事件的属性名字略有不同,例如: dblclick -> ondblclick。 

onclick 事件属性将按钮与JavaScript函数 myFunction() 关联在一起。当用户单击该按钮时,浏览器会判断这个事件属性的值,并执行该函数。

2. 常用事件属性

2.1 onload

该事件属性用于在文档或图像完全加载后执行JavaScript代码。例如:

<body onload="myFunction()">

在上面的代码中,当文档被完全加载后,浏览器将执行名为 myFunction() 的函数。

2.2 onsubmit

该事件属性用于在表单提交时执行JavaScript代码。例如:

<form onsubmit="return validateForm()">

onsubmit 事件属性使表单连接到名为 validateForm() 的函数。如果函数返回 false,则表单不会被提交。

2.3 onkeydown、onkeyup 和 onkeypress

这些事件属性用于在键盘按键被按下、松开或按下并松开时执行JavaScript代码。

<input type="text" onkeydown="myFunction()">

<input type="text" onkeyup="myFunction()">

<input type="text" onkeypress="myFunction()">

上面的代码中,每个事件属性都将一个名为 myFunction() 的函数与一个输入框连接。当用户在输入框上按下、松开或按下并松开任何键时,浏览器将执行该函数。

2.4 onmouseover 和 onmouseout

这两个事件属性用于在用户将鼠标悬停在HTML元素上或从其上方移开时执行JavaScript代码。例如:

<img src="image.jpg" onmouseover="bigImg(this)" onmouseout="normalImg(this)">

上面的代码中,当用户将鼠标悬停在图像上时,浏览器将调用名为 bigImg() 的函数。当用户将鼠标从图像上移开时,浏览器将调用名为 normalImg() 的函数。函数参数 this 代表当前图像元素。

2.5 onchange

该事件属性用于在HTML元素的值发生更改时执行JavaScript代码。例如:

<input type="text" onchange="myFunction()">

<select onchange="myFunction()">

上面的代码中,每个事件属性都将名为 myFunction() 的函数与一个输入框或下拉菜单连接。当用户更改其值时,浏览器将执行该函数。

2.6 onfocus 和 onblur

这两个事件属性用于在用户将HTML元素设置为活动状态或从其中移开时执行JavaScript代码。例如:

<input type="text" onfocus="myFunction()" onblur="myFunction()">

上面的代码中,每个事件属性都将一个名为 myFunction() 的函数与一个输入框连接。当用户将输入框设置为活动状态时,浏览器将调用 onfocus 事件属性的函数。当用户从输入框中移开时,浏览器将调用 onblur 事件属性的函数。

2.7 ondblclick

该事件属性用于在HTML元素被双击时执行JavaScript代码。例如:

<p ondblclick="myFunction()">双击该行文本!</p>

在上面的代码中,当用户双击段落时,浏览器将调用名为 myFunction() 的函数。

3. 结论

HTML中有许多事件属性可用于定义在不同操作下应当发生的事件,以执行JavaScript代码响应用户的交互。在实际应用中,开发者应该结合具体的需求选择合适的事件属性。