javascript高级之常用事件_onbrul-优快云博客

本文链接：https://blog.youkuaiyun.com/yiyezhiqiu1234511/article/details/53208691

本文详细介绍了HTML中常用的事件，包括页面加载事件onload、鼠标点击事件onclick、获取焦点事件onfocus和失去焦点事件onblur等。此外，还讲解了鼠标悬停事件onmouseover、移出事件onmouseout以及键盘按键事件onkeypress的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用事件

(1)onload:html页面在加载时候触发事件,调用响应的js方式,

onclick:鼠标点击事件.

<html>
<head>
<title>html示例</title>
</head>
<body οnlοad="test1();">
<input type="text" οnclick="test2();"/>
</body>
<script type="text/javascript">
//onload和onclick事件
function test1() {
alert("load");
}
function test2() {
alert("onclick");
}
</script>
</html>

(2)onfocus事件和onbrul事件

onfocus:获取焦点(鼠标放入输入框)

onbrul::失去焦点(鼠标拿出输入框)

(3)onmousevoer事件onmouseover事件onkeypress事件

onmouseover:鼠标被一道某元素上

onmouseout;鼠标移除某元素

keypress:点击键盘的某个按键,调用方法

<html>
<head>
<title>html示例</title>
</head>
<body>
<input type="text" οnfοcus="focus1();" οnblur="blur1();"/>
<br/>
<input type="text" id="textid" οnmοuseοver="over1();" οnmοuseοut="out1();"/>
<br/>
<input type="text" id="textid1" οnkeypress="key1(event);"/>
</body>
<script type="text/javascript">
//onkeypress
function key1(abc) {
//alert(obj.keyCode);
//如果点击键盘上面的回车键，调用方法 13
if(abc.keyCode==13) {
alert("key1");
}
}

attribute对象
text对象
//onmouseover onmouseout
function over1() {
document.getElementById("textid").value = "调用onmouseover方法";
}

function out1() {
document.getElementById("textid").value = "调用onmouseout方法";
}
//onfocus事件和onblur事件
function focus1() {
alert("调用onfocus方法");
}
function blur1() {
alert("调用onblur方法");
}
</script>
</html>