html鼠标事件
onload 页面加载
onclick 鼠标单击
onmouSEOver 鼠标移入
onmouSEOut 鼠标移出
onfocus 获取焦点
onblur 失去焦点
onchange 域的内容改变
在事件触发中，this表示对当前dom对象的引用
1、html事件，在html元素上直接绑定事件
charset="UTF-8"title>Document.btn{width:140px;height30pxbackground#abcdefline-heighttext-aligncenterfont-size14pxborder-radius5pxcursorpointer;
}divmargin50px 0}
bodybuttonid="btn"classοnclick="alert('我被点击啦！');">我是按钮buttondivonmouSEOver="myFun(this,'orange')"onmouSEOut>我是divdivscript>
functionmyFun(obj,bgcolor){
obj.style.backgroundColor=bgcolor;
}html>
DOM 0级
通过dom获取元素，并绑定事件
如果事件绑定跟的是函数名，千万不要加括号，否则不需要点击，页面一刷新即会触发函数
.btn-activepink="btn">解锁varbtndocument.getElementById("btn);
btn.onclickmyFun;//此处函数后面一定不能加括号，否则不需要点击会直接调用
myFun(){if(this.className==){btn-active;.innerHTML锁定;
}else{解锁;
}
}>
当把获取dom元素的脚本，放置在元素的前面，会报错
>
>
>
把脚本写在window.onload事件中，确保元素已经生成
window.onload(){);
btn.onclick此处函数后面一定不能加括号，否则不需要点击会直接调用
myFun(){){;;
}{;
}
}
}>
onfocus事件和onblur事件
#tipdisplaynonepasswordpassword);tiptip);
password.onfocus(){
tip.style.displayinline-block;
}
password.onblur(){val.value;密码是6位数字
(val.length6 && !isNaN(val)){
tip.innerHTMLok{
tip.innerHTMLerrorinputtype="password"idname="password"span="tip">请输入密码span>
获取body元素 document.body
当select中的option被选择时，select的value值就会等于被选中的option的value值
因此可以用this.value得到被选择的option的value值
body100%menumenu);
menu.onchangecolor(color""){
document.body.style.backgroundColor#fff{
document.body.style.backgroundColorcolor;
}
}
}p>请选择你喜欢的颜色呀selectname="menu"="menu"optionvalue="">请选择option="orange">元气橙="pink">仙女粉="#abcdef">森系蓝select>
鼠标事件
onmousedown 鼠标按下
onmousemove 鼠标在元素内移动
onmouseup 鼠标松开
onresize 浏览器窗口大小调整
onscroll 拖动滚动条
onsubmit 表单提交 加在form表单上，而不是加在提交按钮上
onmousedown+οnmοuseup=onclick
200pxoverflowauto#myformmargin-top50pxdivdiv);
div.onmousedownonmousedown;
}
div.onmousemoveonmousemove;
}
div.onmouseuponmouseup;
}
window.onresize(){
console.log(resized);
}
div.onscroll.style.colororange;
}myformmyform);
myform.onsubmit(){
alert(表单提交啦~);
}
}="div">br>文字form="myform"="submit"form>
键盘事件
onkeydown 键盘被按下
onkeypress 键盘被按下(只有字母+数字+符号)
onkeyup 键盘被释放
keyCode 键码
countcounttexttext);
text.onkeyup(e){
console.log(e.keyCode);lentext.value.length;
count.innerHTML30-len;
}
}>还可以输入="count">30>/30textarea="text"cols="60"rows="3">
总结
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您喜欢交流学习经验，点击链接加入交流1群：1065694478(已满)交流2群：163560250
