JavaScript 常用事件

JavaScript事件

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

---

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

---

前言

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

---

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

一、常见的事件

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>