JavaScript 常用事件

野性酷女 2022-12-25 07:59 121阅读 0赞

# JavaScript事件 #

事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。  
事件是javaScript和DOM之间交互的桥梁。  
你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。  
典型的例子有：页面加载完毕触发load事件；用户单击元素，触发click事件。

--------------------

概念：某些组件被执行了某些操作后，触发某些代码的执行。

### 文章目录 ###

*  JavaScript事件
 *  前言
 *  一、常见的事件
 *   *  1.点击事件
     *  2.焦点事件
     *  3.加载事件
     *  4.鼠标事件
     *  5.键盘事件
     *  6.选择和改变
     *  7.表单事件

--------------------

# 前言 #

\* 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了  
\* 事件源：组件。如： 按钮 文本输入框…  
\* 监听器：代码。  
\* 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

--------------------

提示：以下是本篇文章正文内容，下面案例可供参考

# 一、常见的事件 #

## 1.点击事件 ##

1.  onclick：单击事件
2.  ondblclick：双击事件

<input type="text" id="onclick" > 
    <input type="text" id="ondblclick">
    <script> //单击时执行 document.getElementById("onclick").onclick = function() { alert("被点击了。") } //双击时执行 document.getElementById("ondblclick").ondblclick = function() { alert("被双击了。") } </script>

## 2.焦点事件 ##

1.  onblur：失去焦点
2.  onfocus:元素获得焦点。

<input type="text" id="onblur" >
    <input type="text" id="onfocus">
    <script> //失去鼠标焦点时执行 document.getElementById("onblur").onblur = function() { alert("失去焦点。") } //获得鼠标焦点时执行 document.getElementById("onfocus").onfocus = function() { alert("获得焦点。") } </script>

## 3.加载事件 ##

1.  onload：一张页面或一幅图像完成加载。

//加载完页面后执行
    	 window.onload = function () { 
            alert("加载完成")
        }

## 4.鼠标事件 ##

1.  onmousedown 鼠标按钮被按下。
2.  onmouseup 鼠标按键被松开。
3.  onmousemove 鼠标被移动。
4.  onmouseover 鼠标移到某元素之上。
5.  onmouseout 鼠标从某元素移开。

*  参数：左键 1、中间 0、右键2

<input type="text" id="onmousedown">
    <input type="text" id="onmouseup">
    <input type="text" id="onmousemove">
    <input type="text" id="onmouseover">
    <input type="text" id="onmouseout">
    
    <script> document.getElementById("onmousedown").onmousedown = function ( event ) { if(event == 0){ document.write("鼠标左键被点击"); }else if (event ==1){ document.write("鼠标中间键被点击"); }else { document.write("鼠标右键被点击"); } } document.getElementById("onmouseup").onmouseup = function () { alert("鼠标被松开"); } document.getElementById("onmousemove").onmousemove = function () { alert("鼠标被移动"); } document.getElementById("onmouseover").onmouseover = function () { alert("鼠标被移动到某元素上"); } document.getElementById("onmouseout").onmouseout = function () { alert("鼠标从某元素移开"); } </script>

## 5.键盘事件 ##

1.  onkeydown 某个键盘按键被按下。 （不区分大小写）
2.  onkeyup 某个键盘按键被松开。（不区分大小写）
3.  onkeypress 某个键盘按键被按下并松开。(区分大小写)

<input type="text" id="onkeydown">
    <input type="text" id="onkeyup">
    <input type="text" id="onkeypress">
    
    <script> document.getElementById("onkeydown").onkeydown = function (event) { alert("键盘"+event.keyCode+"键被按下"); } document.getElementById("onkeyup").onkeyup = function (event) { alert("键盘"+event.keyCode+"键被松开"); } document.getElementById("onkeypress").onkeypress = function (event) { alert("键盘"+event.keyCode+"键被按下并松开"); } </script>

## 6.选择和改变 ##

1.  onchange 域的内容被改变。
2.  onselect 文本被选中。

<input type="text" id="onchange">
    <input type="text" id="onkeyup">
    <script> document.getElementById("onchange").onchange = function () { alert("域的内容被改变"); } document.getElementById("onkeyup").onkeyup = function () { alert("文本被选中"); } </script>

## 7.表单事件 ##

1.  onsubmit 确认按钮被点击。
2.  onreset 重置按钮被点击。

<form id="onsubmit">
        <input type="text" name="username" >
        <select >
    
         <option>--爱好--</option>
         <option>唱</option>
         <option>跳</option>
         <option>rap</option>
    
        </select>
    <input type="submit" value="提交">
    </form>
    
    <script> //可以阻止表单提交，多用于表单校验 document.getElementById("onsubmit").onsubmit = function () { var flag = false; return flag; } </script>