事件

1. 事件简单学习

  • 功能：某些组件被执行了某些操作后，触发某些代码的执行。
    • 事件源：组件。如按钮，文本输入框等
    • 监听器：代码
    • 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件则触发执行某个监听器代码。
  • 如何绑定事件
    1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
      • 事件：onclick单击事件
    2. 通过JS获取元素对象，指定事件属性，设置一个函数
1
2
3
4
5
6
7
8
9
10
<img src="../img/off.gif" alt="开灯" id="light1" onclick="alert('我被1点了')">
<img src="../img/off.gif" alt="开灯" id="light2" onclick="fun()">
<img src="../img/off.gif" alt="开灯" id="light3">
<script>
	function fun(){
        alert('我被点了')
    }
    var light3 = document.getElementById("light3");
    light3.onclick = fun;
</script>

2.常见事件

  1. 点击事件：

    • onclick：单击事件

    • ondblclick：双击事件

  2. 焦点事件

  • onblur：失去焦点

    一般用于表单校验

  • onfocus：元素获得焦点。

    1
    2
    3
    4
    5
    6
    7
    <script>
            window.onload = function () {
                document.getElementById("username").onblur=function () {
                    alert("失去焦点");
                }
            }
    </script>
  1. 加载事件：
  • onload：一张页面或一幅图像完成加载。
  1. 鼠标事件：
  • onmousedown 鼠标按钮被按下。
    • 定义方法时，定义一个形参，接收event对象
    • event对象的button属性可以获取鼠标按钮键被点击
  • onmouseup 鼠标按键被松开。
  • onmousemove 鼠标被移动。
  • onmouseover 鼠标移到某元素之上。
  • onmouseout 鼠标从某元素移开。

  1. 键盘事件：

    • onkeydown 某个键盘按键被按下。

      • event对象的keyCode属性为接受的键盘的字符，可接受判断是否为回车进行表单提交

    • onkeyup 某个键盘按键被松开。

    • onkeypress 某个键盘按键被按下并松开。

  2. 选择和改变

  3. onchange 域的内容被改变。

    • 下拉列表中应用，比如省市区三级选择

  4. onselect 文本被选中。

  5. 表单事件：

  6. onsubmit 确认按钮被点击。

    • 可以组织表单提交，方法返回false时阻止提交
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <form action="#" id="form"onclick="return check()">
        <input type="text" id="username"placeholder="请输入用户名">
        <input type="submit"value="提交">
    </form>
    <script>
        function check(){
            return false;
        }
        document.getElementById("form").onsubmit = function () {
            return false;
        }
    </script>

  7. onreset 重置按钮被点击。