搜索

事件的概述以及常见事件的演示


发布时间: 2022-11-24 20:15:00    浏览次数:37 次

事件_概述

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

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

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

  监听器:代码

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

常见事件:

  点击事件

    onclick:单击事件

    ondblclick:双击事件

  焦点事件

    onblur:失去焦点

    onfocus:元素获得焦点

  加载事件:

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

  鼠标事件

     onmousedown:鼠标按钮被按下。 

     onmouseup:鼠标按键被松开。 

     onmousemove:鼠标被移动。 

     onmouseover:鼠标移到某元素之上。 

     onmouseout:鼠标从某元素移开。 

  键盘事件 

    onkeydown:某个键盘按键被按下。 
    onkeypress:某个键盘按键被按下并松开。 
    onkeyup:某个键盘按键被松开

  选择和改变

    onchange:域的内容被改变时触发( <input>, <keygen>, <select>, 和 <textarea>

    onselect:文本被选中

  表单事件

    onsubmit:表单提交时触发 

    onreset:表单重置时触发 

 

 

事件_常见事件演示

常见事件:
  点击事件
    onclick:单击事件
    ondblclick:双击事件
  焦点事件
    onblur:失去焦点
一般用于表单验证
    onfocus:元素获得焦点
  加载事件:
    onload:一张页面或一幅图像完成加载
  鼠标事件
     onmousedown:鼠标按钮被按下。
定义方法时,定义一个形参,接收event对象
event对象的button属性可以获取鼠标按钮键被点击了
    onmouseup:鼠标按键被松开。
    onmousemove:鼠标被移动。
    onmouseover:鼠标移到某元素之上。
    onmouseout:鼠标从某元素移开。
  键盘事件
    onkeydown:某个键盘按键被按下。
    onkeypress:某个键盘按键被按下并松开。
    onkeyup:某个键盘按键被松开
  选择和改变
    onchange:域的内容被改变时触发( <input>, <keygen>, <select>, 和 <textarea>
    onselect:文本被选中
  表单事件
    onsubmit:表单提交时触发
可以阻止表单提交
方法返回false则表单被阻止
    onreset:表单重置时触发
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <script>
        /*
            常见事件:
              点击事件
                onclick:单击事件
                ondblclick:双击事件
              焦点事件
                onblur:失去焦点
                       一般用于表单验证
                onfocus:元素获得焦点
              加载事件:
                onload:一张页面或一幅图像完成加载
              鼠标事件
                 onmousedown:鼠标按钮被按下。
                        定义方法时,定义一个形参,接收event对象
                        event对象的button属性可以获取鼠标按钮键被点击了
                 onmouseup:鼠标按键被松开。
                 onmousemove:鼠标被移动。
                 onmouseover:鼠标移到某元素之上。
                 onmouseout:鼠标从某元素移开。
              键盘事件
                onkeydown:某个键盘按键被按下。
                onkeypress:某个键盘按键被按下并松开。
                onkeyup:某个键盘按键被松开
              选择和改变
                onchange:域的内容被改变时触发( <input>, <keygen>, <select>, 和 <textarea>
                onselect:文本被选中
              表单事件
                onsubmit:表单提交时触发
                       可以阻止表单提交
                            方法返回false则表单被阻止
                onreset:表单重置时触发
         */
        //2.加载事件 onload
        window.onload=function () {
            //1.失去焦点 onblur
            document.getElementById("username").onblur = function () {
                // alert("失去焦点了...")
            }
            //3.绑定鼠标移动元素之上事件 onmouseover
            document.getElementById("username").onmouseover = function () {
                // alert("鼠标来了...")
            }
            // 绑定鼠标点击事件 onmousedown
            document.getElementById("username").onmousedown = function (event) {
                // alert("鼠标点击了...")
                // alert(event.button);
            }
            document.getElementById("username").onmouseout = function () { // onmouseout:鼠标从某元素移开。
                // alert("鼠标移开了...")
            }

            //4.键盘事件
            document.getElementById("username").onkeydown = function (event) {
                // alert(event.keyCode);
                if(event.keyCode == 13){
                    alert("提交表单")
                }
            }

            //5.选择和改变事件
            document.getElementById("city").onchange = function (){
                alert("改变了...")
            }

            //6.表单事件
            //第一种写法
            document.getElementById("from").onsubmit = function () {
                //校验用户名格式是否正确
                // var  flag = false;
                // return flag;
            }
        }
        //第二种写法
        function checkForm() {
            return true;
        }
    </script>
</head>
<body>

    <form action="#" id="from" onclick="return checkForm();">
        <input type="text" name="username" id="username">
        <select id="city">
            <option>--请选择--</option>
            <option>北京</option>
            <option>杭州</option>
            <option>河南</option>
        </select>
        <input type="submit" value="提交">
    </form>



</body>

 

免责声明 事件的概述以及常见事件的演示,资源类别:文本, 浏览次数:37 次, 文件大小:-- , 由本站蜘蛛搜索收录2022-11-24 08:15:00。此页面由程序自动采集,只作交流和学习使用,本站不储存任何资源文件,如有侵权内容请联系我们举报删除, 感谢您对本站的支持。 原文链接:https://www.cnblogs.com/qihaokuan/p/16922871.html