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