js五个基础事件与其实现
一. onload事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>onload</title>
<script type="text/javascript"> <!--静态注册onload事件-->
<!--可以再script中定义函数 然后再body里面调用-->
<!--也可以直接在onload后跟语句--> function f(){ alert("hello");
}
<!--动态注册onload事件--> window.onload = function f(){ alert("又见面了");
}
</script>
</head>
<body onload="f()">
onload(加载完成事件) 页面加载完成后 显示js代码
</body>
</html>
二. onchange事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>onchange</title>
<script type="text/javascript"> <!--静态注册onchange事件--> function f(){
alert("更改国籍")
}
<!--动态注册onchange页面--> window.onload = function(){ <!--1.获取标签对象-->
var a = document.getElementById("1"); <!--2.通过标签对象.对象名 = function(){}-->
a.onchange = function(){ alert("变更户口");
}
}
</script>
</head>
<body>
onchange(内容发生改变事件) 常用于下拉列表和输入框内容发生改变后操作
<select onchange="f()"> <option>--选择国籍--</option> <option>中国</option> <option>美国</option>
<select>
<select id="1">
<option>--选择地区--</option> <option>北京</option> <option>上海</option>
<select>
</body>
</html>
三. onclick事件<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>onclick事件</title>
<script type="text/javascript"> <!--静态注册onclick事件--> function f(){
alert("你好")
}
<!--动态注册onclick页面--> window.onload = function(){ <!--1.获取标签对象-->
var a = document.getElementById("1"); <!--2.通过标签对象.对象名 = function(){}-->
a.onclick = function(){ alert("又见面了");
}
}
</script>
</head>
<body>
<button onclick="f()">按钮一<^tton> <button id="1">按钮二<^tton> onclick(单击事件) 常用于按钮的点击响应操作 </body>
</html>
四. onblur事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>onblur</title>
<script type="text/javascript"> <!--静态注册onblur事件--> function f(){
<!--console是控制台对象 像浏览器的控制台打印输出 log()是打印方法--> console.log("你好");
}
<!--动态注册onblur页面--> window.onload = function(){ <!--1.获取标签对象-->
var a = document.getElementById("2"); <!--2.通过标签对象.对象名 = function(){}-->
a.onblur= function(){
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="f()"></br>
密码:<input type="text" id="2"></br> onblur(失去焦点事件) 常用于输入框失去焦点后验证其输入内容是否合法
</body>
</html>
五. onsubmit事件<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>onsubmit</title>
<script type="text/javascript"> <!--静态注册onsubmit事件--> function f(){
alert("你好")
return false
}
<!--动态注册页面onsubmit事件--> window.onload = function(){ <!--1.获取标签对象-->
var a = document.getElementById("1"); <!--2.通过标签对象.对象名 = function(){}-->
a.onsubmit = function(){ alert("又见面了");
}
}
</script>
</head>
<body>
<!--提交表单发现表单不合法 oonsubmit = "return f()可以阻止表单提交"--> <form action="http://www.baidu.com" method="post" onsubmit="f()"> <input type="submit" value="静态提交"> </form>
<form action="http://www.baidu.com" method="post" id="1">
<input type="submit" value="动态提交"> </form>
onsubmit(表单提交事件) 常用于表单提交时 验证所有表单项是否合法
</body>
</html>
260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
