javascript基础:事件

事件:

  概念:某些组件被执行了某些操作后,触发某些代码的执行

    *  事件:某些操作,如:单击,双击,键盘按下了,鼠标移动了

    *  事件源:组件。如:按钮   文本输入框....

    *  监听器:代码

    *  注册监听:将事件,事件源,监听器结合在一起。当事件源发生了某个事件,则触发执行某个监听器代码

  常见的事件:

    1、点击事件:

      1、onclick(单击事件)  当用户点击某个对象时调用的事件句柄

      2、ondblclick(双击事件)

    2、焦点事件

      1、onblur:失去焦点

        一般用于表单校验

      2、onfocus:元素获得焦点

    3、加载事件:

      1、onload:一张页面或一幅图像完成加载

    4、鼠标事件:

      1、onmousedown  鼠标按钮被按下

        *  定义方法时,定义一个形参,接受event对象

        *  event对象的button属性可以获取鼠标按钮键被点击了

      2、onmouseup   鼠标按键被松开

      3、onmousemove  鼠标被移动

      4、onmouseover    鼠标移到某元素之上

      5、onmouseout   鼠标从某元素移开

    5、键盘事件:

      1、onkeydown  某个键盘按键被按下

      2、onkeyup   某个键盘按键被松开

      3、onkeypress  某个键盘按键被按下并松开

    6、选择和改变

      1、onchange  域的内容被改变

      2、onselect   文本被选中

    7、表单事件:

      1、onsubmit  确认按钮被点击

        *  可以阻止表单的提交

          *  方法返回false,则表单被阻止提交

      2、onreset   重置按钮被点击

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>常见事件title>

    <script>
        /*
            常见的事件:
 
    1、点击事件:
 
      1、onclick(单击事件)  当用户点击某个对象时调用的事件句柄
 
      2、ondblclick(双击事件)
 
    2、焦点事件
 
      1、onblur:失去焦点
 
      2、onfocus:元素获得焦点
 
    3、加载事件:
 
      1、onload:一张页面或一幅图像完成加载
 
    4、鼠标事件:
 
      1、onmousedown  鼠标按钮被按下
 
      2、onmouseup   鼠标按键被松开
 
      3、onmousemove  鼠标被移动
 
      4、onmouseover    鼠标移到某元素之上
 
      5、onmouseout   鼠标从某元素移开
 
    5、键盘事件:
 
      1、onkeydown  某个键盘按键被按下
 
      2、onkeyup   某个键盘按键被松开
      3、onkeypress  某个键盘按键被按下并松开
    6、选择和改变
      1、onchange  域的内容被改变
      2、onselect   文本被选中
    7、表单事件:
      1、onsubmit  确认按钮被点击
      2、onreset   重置按钮被点击
        */


        //2、加载完成事件   onload
        window.onload = function () {
            //1、失去焦点事件
            document.getElementById("username").onblur = function () {
                alert("失去焦点了....");

            }

            //3、绑定鼠标移动到元素之上事件
            document.getElementById("username").onmouseover = function(){
                alert("鼠标来了.....");
            }
            //4、绑定鼠标点击事件
            document.getElementById("username").onmousedown = function(event){
                alert("鼠标点击了.....");
                alert(event.button)
            }

            document.getElementById("username").onkeydown = function(event){
                // alert("鼠标点击了.....");
                if(event.keyCode == 13){
                    alert("提交表单");
                }
            }

            document.getElementById("username").onchange = function (event) {

                alert("改变了....")
            }
            document.getElementById("city").onchange = function (event) {

                alert("改变了....")
            }
            document.getElementById("form").onsubmit = function(){
                //校验用户名格式是否争取
                var flag = false;

                return flag;
            }

            function checkForm(){
                return false;
            }
        }

    script>
head>

<body>

    <form action="#" id="form" onclick="return checkForm()">
        <input name="username" id="username">
        <select id="city">
            <option>
                --请选择--
            option>
            <option>
                北京
            option>
            <option>
                上海
            option>
            <option>
                广州
            option>
        select>
        <input type="submit" value="提交">
    form>
body>

html>

 

你可能感兴趣的:(javascript基础:事件)