鼠标事件
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";
}
| 属性 | 描述 |
|---|---|
| 在用户点击鼠标左键打开上下文菜单时触发 | |
| 在用户点击鼠标右键打开上下文菜单时触发 | |
| 在用户点击鼠标左键打开上下文菜单时触发 | |
| 鼠标按钮被按下。 | |
| 当鼠标指针移动到元素上时触发。 | |
| 当鼠标指针移出元素时触发 | |
| 鼠标被移动。 | |
| 鼠标移到某元素之上。 | |
| 鼠标从某元素移开。 | |
| 鼠标按键被松开。 |
键盘事件
| 属性 | 描述 | DOM |
|---|---|---|
| 某个键盘按键被按下。 | 2 | |
| 某个键盘按键被按下并松开。 | 2 | |
| 某个键盘按键被松开。 | 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>| 属性 | 描述 |
|---|---|
| 元素失去焦点时触发 | |
| 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) | |
| 元素获取焦点时触发 | |
| 元素即将获取焦点时触发 | |
| 元素即将失去焦点时触发 | |
| 元素获取用户输入时触发 | |
| 表单重置时触发 | |
| 用户向搜索域输入文本时触发 (<input="search">) | |
| 用户选取文本时触发 ( <input> 和 <textarea>) | |
| 表单提交时触发 |
681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
