JavaScript中常用的事件
事件：电脑输入设备与页面进行交互的响应
常用的事件：
- onload：加载完成事件，页面加载完成之后，常用于做页面js代码初始化操作
- onclick：单击事件，常用于按钮的点击响应操作
- onblur：失去焦点事件，常用于输入框失去焦点后验证其输入内容是否合法
- onchange：内容发生改变，常用于下拉列表和输入框内容发生该表后操作
- onsubmit：表单提交事件，常用于表单提交前，验证所有表单项是否合法
onload事件
// 静态注册事件
// onload事件是浏览器解析页面之后自动触发的事件
function onLoadFun(params) {
alert("静态注册onload事件");
}
// <body onload="onLoadFun();">// 动态注册onload事件
window.onload = function () {
alert("动态注册onload事件");
}onclick事件
// 静态注册 onclick事件
function onClickFun(params) {
alert("静态注册onclick事件");
}
// <button onclick="onClickFun();">按钮</button>
// 动态注册onclick事件
window.onload = function () {
// 获取标签对象
var obj = document.getElementById("eyujun");
// 通过标签对象.事件名 = function(){}
obj.onclick = function () {
alert("动态注册onclick事件");
}
}
// <button id="eyujun">按钮</button>onblur事件
// 静态注册 onblur事件
function onBlurFun(params) {
console.log("静态注册onblur失去焦点事件");
}
// 用户名：<input type="text" onblur="onBlurFun();"><br>
// 动态注册onblur事件
window.onload = function () {
// 获取标签对象
var obj = document.getElementById("e1yu");
// 通过标签对象.事件名 = function(){}
obj.onblur = function () {
console.log("动态注册onblur事件");
}
}
// 密码：<input id="e1yu" type="text"><br>onchange事件
// 静态注册 onchange事件
function onChangeFun(params) {
alert("静态注册onchange事件");
}
// <select onchange="onChangeFun();">
// <option value="1">鳄鱼君1</option>
// <option value="2">鳄鱼君2</option>
// <option value="3">鳄鱼君3</option>
// </select> // 动态注册onblur事件
window.onload = function () {
// 获取标签对象
var obj = document.getElementById("paopaojun");
// 通过标签对象.事件名 = function(){}
obj.onchange = function () {
alert("动态注册onchange事件");
}
}
// <select id="paopaojun">
// <option value="1">鳄鱼君1</option>
// <option value="2">鳄鱼君2</option>
// <option value="3">鳄鱼君3</option>
// </select>onsubmit事件
// 静态注册 onsubmit事件
function onSubmitFun(params) {
// 验证所有表单项是否合法
alert("静态注册不合法");
return false;
}
// <form action="https://www.e1yu.com" method="GET" onsubmit="return onSubmitFun();">
// <input type="submit" value="静态注册">
// </form> // 动态注册onblur事件
window.onload = function () {
// 获取标签对象
var obj = document.getElementById("form1");
// 通过标签对象.事件名 = function(){}
obj.onsubmit = function () {
alert("动态注册");
return false;
}
}
// <form id="form1" action="https://www.e1yu.com" method="GET">
// <input type="submit" value="动态注册">
// </form>