Java Script Dom事件

不念不忘少年蓝@ 2023-01-06 01:54 113阅读 0赞

## 鼠标事件 ##

### [1.onclick][] ###

语法：

*object*.οnclick=function()\{ *SomeJavaScriptCode*\};

**定义和用法**

onclick 事件会在元素被左键点击时发生。

实例：

// 鼠标左键单击事件
                box.onclick = function() {
                        box.style.backgroundColor = "red";
    
                    }

**支持 onclick 事件的 HTML 标签：**

onclick 属性可以使用与所有 HTML 元素，除了 ：<base>, <bdo>, , <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";
                    }

<table> 
 <tbody> 
 <tr> 
 <th> 属性 </th> 
 <th> 描述 </th> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/jsref-event-onclick.html" rel="nofollow">onclick</a> </td> 
 <td> 在用户点击鼠标左键打开上下文菜单时触发 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/event-oncontextmenu.html" rel="nofollow">oncontextmenu</a> </td> 
 <td> 在用户点击鼠标右键打开上下文菜单时触发 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/jsref-event-ondblclick.html" rel="nofollow">ondblclick</a> </td> 
 <td> 在用户点击鼠标左键打开上下文菜单时触发 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/jsref-event-onmousedown.html" rel="nofollow">onmousedown</a> </td> 
 <td> 鼠标按钮被按下。 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/event-onmouseenter.html" rel="nofollow">onmouseenter</a> </td> 
 <td> 当鼠标指针移动到元素上时触发。 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/event-onmouseleave.html" rel="nofollow">onmouseleave</a> </td> 
 <td> 当鼠标指针移出元素时触发 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/event-onmousemove.html" rel="nofollow">onmousemove</a> </td> 
 <td> 鼠标被移动。 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/jsref-event-onmouseover.html" rel="nofollow">onmouseover</a> </td> 
 <td> 鼠标移到某元素之上。 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/jsref-event-onmouseout.html" rel="nofollow">onmouseout</a> </td> 
 <td> 鼠标从某元素移开。 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/jsref-event-onmouseup.html" rel="nofollow">onmouseup</a> </td> 
 <td> 鼠标按键被松开。 </td> 
 </tr> 
 </tbody> 
</table>

## 键盘事件 ##

<table> 
 <tbody> 
 <tr> 
 <th> 属性 </th> 
 <th> 描述 </th> 
 <th> DOM </th> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/jsref-event-onkeydown.html" rel="nofollow">onkeydown</a> </td> 
 <td> 某个键盘按键被按下。 </td> 
 <td> 2 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/jsref-event-onkeypress.html" rel="nofollow">onkeypress</a> </td> 
 <td> 某个键盘按键被按下并松开。 </td> 
 <td> 2 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/jsref-event-onkeyup.html" rel="nofollow">onkeyup</a> </td> 
 <td> 某个键盘按键被松开。 </td> 
 <td> 2 </td> 
 </tr> 
 </tbody> 
</table>

## 表单事件 ##

<table> 
 <tbody> 
 <tr> 
 <th> 属性 </th> 
 <th> 描述 </th> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/jsref-event-onblur.html" rel="nofollow">onblur</a> </td> 
 <td> 元素失去焦点时触发 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/jsref-event-onchange.html" rel="nofollow">onchange</a> </td> 
 <td> 该事件在表单元素的内容改变时触发( &lt;input&gt;, &lt;keygen&gt;, &lt;select&gt;, 和 &lt;textarea&gt;) </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/jsref-event-onfocus.html" rel="nofollow">onfocus</a> </td> 
 <td> 元素获取焦点时触发 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/jsref-event-onfocusin.html" rel="nofollow">onfocusin</a> </td> 
 <td> 元素即将获取焦点时触发 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/jsref-event-onfocusout.html" rel="nofollow">onfocusout</a> </td> 
 <td> 元素即将失去焦点时触发 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/event-oninput.html" rel="nofollow">oninput</a> </td> 
 <td> 元素获取用户输入时触发 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/event-onreset.html" rel="nofollow">onreset</a> </td> 
 <td> 表单重置时触发 </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/event-onsearch.html" rel="nofollow">onsearch</a> </td> 
 <td> 用户向搜索域输入文本时触发 (&lt;input="search"&gt;) </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/event-onselect.html" rel="nofollow">onselect</a> </td> 
 <td> 用户选取文本时触发 ( &lt;input&gt; 和 &lt;textarea&gt;) </td> 
 </tr> 
 <tr> 
 <td> <a href="https://www.w3cschool.cn/jsref/event-onsubmit.html" rel="nofollow">onsubmit</a> </td> 
 <td> 表单提交时触发 </td> 
 </tr> 
 </tbody> 
</table>

[1.onclick]: https://www.w3cschool.cn/jsref/jsref-event-onclick.html
[ondblclick]: https://www.w3cschool.cn/jsref/jsref-event-ondblclick.html
[oncontextmenu]: https://www.w3cschool.cn/jsref/event-oncontextmenu.html