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代码响应用户的交互。在实际应用中,开发者应该结合具体的需求选择合适的事件属性。