页面上的一个动作,一般情况是客户在页面上的一个操作,
比如:单击按钮,让输入框获得焦点,失去焦点,表单提交
另外,也可以浏览器的一个动作
获得焦点 ----- onfocus
失去焦点 ----- onblur
按钮单击 ----- onclick
表单提交 ----- onsubmit
页面加载 ----- onload
鼠标移入事件 ---- onmouseover
鼠标移出事件 ---- onmouseout
改变事件----onchange
使用:
格式1:A、标签中使用属性 onxxx = "函数"
B、JS编写函数实现
格式2:A、页面加载完,获取对象
B、对象.onxxx = function(){}
window.onload = function(){
var t1 = document.getElementById("t1");
t1.onfocus = function(){
//alert(t1.value);//这种格式可能有安全隐患,后面会接触,不建议使用
//this 代表 t1
alert(this.value);
}
}
表单校验:
window.onload = function(){
var un = document.getElementById("username");
var unmsg = document.getElementById("unmsg");
//添加获得焦点事件
un.onfocus = function(){
//给出提示,提示显示在span 中
unmsg.innerHTML = "账号必填!";
}
//添加失去焦点事件
un.onblur = function(){
//获取到当前录入的数据,然后校验,并给出提示
if(this.value == ""){
unmsg.innerHTML = "<font color='red'>账号不能为空!</font>";
} else {
unmsg.innerHTML = "账号合法";
}
}
var pd = document.getElementById("password");
var pdmsg = document.getElementById("pdmsg");
pd.onfocus = function(){
pdmsg.innerHTML = "密码必填";
}
pd.onblur = function(){
if(this.value == ""){
pdmsg.innerHTML = "<font color='red'>密码不能为空!</font>"
} else {
pdmsg.innerHTML = "密码可用";
}
省市联动:
window.onload = function(){
var province = document.getElementById("province");
province.onchange = function(){
//取出 当前选项的 value 值,获取对应的市
var index = this.value;
//获取市的数组
var cs = cities[index];
//获取第二个下拉列表
var citySelect = document.getElementById("city");
//初始化 citySelect 中的内容
citySelect.innerHTML = "<option>----请您选择一个市----</option>";
for(var i = 0 ; i <cs.length; i++){
//citySelect.innerHTML = "<option>" + cs[i] + "</option>";
//citySelect.innerHTML += "<option>" + cs[i] + "</option>";
//使用面向对象的思想进行技术替换
//1、组织一个 option 标签对象
var opt = document.createElement("option");
//2、将 option 的文本创建成对象
var txt = document.createTextNode(cs[i]);
//将内容设置进 option 标签
opt.appendChild(txt);
opt.setAttribute("type","valud")
//将 option 设置进第二个 select
citySelect.appendChild(opt);
}
}
}
}
}