鼠标事件
1.onclick
语法:
object.οnclick=function(){SomeJavaScriptCode};
定义和用法
onclick 事件会在元素被左键点击时发生。
实例:
// 鼠标左键单击事件
box.onclick = function() {
box.style.backgroundColor = "red";
}
支持 onclick 事件的 HTML 标签:
onclick 属性可以使用与所有 HTML 元素,除了 :<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.
2.ondblclick
语法:
object.ondblclick=function(){SomeJavaScriptCode};
定义和用法
ondblclick事件会在元素左键被双击时发生。
实例:
// 鼠标左键双击事件
box.ondblclick = function() {
box.style.backgroundColor = "chocolate";
}
3.oncontextmenu
语法:object.oncontextmenu=function(){SomeJavaScriptCode}
定义和用法
oncontextmenu事件会在元素右键键被点击时发生。
实例:
// 鼠标右键单击事件
box.oncontextmenu = function() {
box.style.color = "#fff";
}
属性 | 描述 |
---|---|
onclick | 在用户点击鼠标左键打开上下文菜单时触发 |
oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
ondblclick | 在用户点击鼠标左键打开上下文菜单时触发 |
onmousedown | 鼠标按钮被按下。 |
onmouseenter | 当鼠标指针移动到元素上时触发。 |
onmouseleave | 当鼠标指针移出元素时触发 |
onmousemove | 鼠标被移动。 |
onmouseover | 鼠标移到某元素之上。 |
onmouseout | 鼠标从某元素移开。 |
onmouseup | 鼠标按键被松开。 |
键盘事件
属性 | 描述 | DOM |
---|---|---|
onkeydown | 某个键盘按键被按下。 | 2 |
onkeypress | 某个键盘按键被按下并松开。 | 2 |
onkeyup | 某个键盘按键被松开。 | 2 |
表单事件
<script>
window.onload = function(){
var inp = document.querySelector("input");
var form = document.querySelector("form");
inp.onchange = function(){
console.log("表单内容发生了变化");
}
inp.oninput = function(){
console.log("你输入了内容");
}
inp.onfocus = function(){
console.log("获取了焦点");
this.style.backgroundColor = "red";
}
inp.onblur = function(){
console.log("失去了焦点");
// this.style.backgroundColor = "red";
}
form.onsubmit = function(){
alert("表单提交了");
}
form.onreset = function(){
// alert("表单重置");
console.log("表单重置");
}
}
</script>
</head>
<body>
<form action="">
<input type="text" value="">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
属性 | 描述 |
---|---|
onblur | 元素失去焦点时触发 |
onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) |
onfocus | 元素获取焦点时触发 |
onfocusin | 元素即将获取焦点时触发 |
onfocusout | 元素即将失去焦点时触发 |
oninput | 元素获取用户输入时触发 |
onreset | 表单重置时触发 |
onsearch | 用户向搜索域输入文本时触发 (<input="search">) |
onselect | 用户选取文本时触发 ( <input> 和 <textarea>) |
onsubmit | 表单提交时触发 |