JavaScript个人学习笔记（七）

最新推荐文章于 2024-07-19 16:47:30 发布

Roxannekkk

最新推荐文章于 2024-07-19 16:47:30 发布

阅读量84

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_44774255/article/details/109584480

版权

前端学习专栏收录该内容

10 篇文章 1 订阅

订阅专栏

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

常见的事件：

1.点击事件：
	1.onclick：单击事件
	2.ondbclick：双击事件
2.焦点事件：
	1.onblur:失去焦点
		一般用于表单验证
	2.onfocus:元素获得焦点
3.加载事件：
	1.onload 一张页面或一幅图像完成加载
4.鼠标事件：
	1.onmousedown	鼠标按钮被按下。
		定义方法时，定义一个形参，接受event对象
		event对象的button属性可以获取鼠标那个键被点击了
	2.onmousemove	鼠标被移动。
	3.onmouseout	鼠标从某元素移开。
	4.onmouseover	鼠标移到某元素之上。
	5.onmouseup	    鼠标按键被松开。

5.键盘事件：
	1.onkeydown		某个键盘按键被按下。
	2.onkeypress	某个键盘按键被按下并松开。
	3.onkeyup		某个键盘按键被松开。
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">
    <title>Document</title>
    <script>
        /*
        1.点击事件：
            1.onclick：单击事件
            2.ondbclick：双击事件
        2.焦点事件：
            1.onblur:失去焦点
            2.onfocus:元素获得焦点
        3.加载事件：
            1.onload 一张页面或一幅图像完成加载
        4.鼠标事件：
            1.onmousedown	鼠标按钮被按下。
            2.onmousemove	鼠标被移动。
            3.onmouseout	鼠标从某元素移开。
            4.onmouseover	鼠标移到某元素之上。
            5.onmouseup	    鼠标按键被松开。

        5.键盘事件：
            1.onkeydown		某个键盘按键被按下。
            2.onkeypress	某个键盘按键被按下并松开。
            3.onkeyup		某个键盘按键被松开。
        6.选择和改变
            1.onchange	域的内容被改变。
            2.onselect	文本被选中。
        7.表单事件
            1.onsubmit	确认按钮被点击。
            2.onreset	重置按钮被点击。
        */
        //1.失去焦点事件
        /*
        document.getElementById("username").οnblur=function(){
            alert("失去焦点");
        }//首先得获得焦点 才能失去焦点 获得一次失去一次
        */
        //document.getElementById("username").οnfοcus=function(){alert("记得你的眼睛将会亮着");}

        //2.加载完成事件onload   （比如说我们把script标签放在input前，这样上面设置函数就无法起效，因为按顺序加载，则函数找不到对应的标签）
        //window.onload()表明等窗口整体加载完成再执行function这个代码
        window.onload = function () {
            /*
            document.getElementById("username").οnblur=function(){
            alert("失去焦点");
            }
            */
            /*
            //3.绑定鼠标移到元素之上事件
            document.getElementById("username").οnmοuseοver=function(){
                alert("来了老弟");
            }
            */
            /*
             //4.绑定鼠标点击事件(左右键都可)
             document.getElementById("username").οnmοusedοwn=function(event){
                 //这个监听器的代码不是我们自己调用的，而是浏览器的引擎自动调用的，方法在调用时会传一个对象进来，利用一个参数接受这个对象，这个对象可以操作有关鼠标的属性，键盘同理
                 alert(event.button);
                //alert("鼠标点击了");
            }
            */

            /*
            //5.绑定键盘点击事件
            document.getElementById("username").οnkeydοwn=function(event){
                 //这个监听器的代码不是我们自己调用的，而是浏览器的引擎自动调用的，方法在调用时会传一个对象进来，利用一个参数接受这个对象，这个对象可以操作有关鼠标的属性，键盘同理
                 if(event.keyCode==13)//回车
                 {
                    alert("提交表单");
                 }
            }

            */

            /*
            //6.选择和改变
            document.getElementById("city").οnchange=function(event){
                 alert("the content has been changed!");
            }//onchange 常用于下拉列表
            
            document.getElementById("username").οnchange=function(event){
                 alert("the content has been changed!");
            }
            */
            /*
            //这种写法我只是定义，并没有调用是别人调用的，得到了flag，会拿flag去判断真假，如果是true 就可以正确提交 返回false就可以阻止提交
            document.getElementById("form").οnsubmit=function(){
                //校验用户名格式是否正确
                var flag=false;//不能只设置，还需要被使用
                return flag;//返回true 就可以正确提交 返回false就可以阻止提交
            }
            */
            
        }
        //onload后期使用较多，一般情况下，我们会等所有的页面加载完成了，才会触发执行js代码
        function checkform(){//这种写法是我自己定义自己调用
                return false;
            }
    </script>
</head>

<!--
οnclick= "checkform()这样的写法，在内部实际运行如下

function fun(){
    checkform();
    //虽然checkform是flase，但最后是否阻断运行是看fun()这个函数的返回值，checkform();的返回值不是最终的返回值
    return checkform();//这样写才保证我写的方法的返回值才是真正的返回值
}

-->
<body>
    <form action="#" id="form" οnsubmit= "return checkform();">
        <input name="username" id="username">
        <select id="city">
            <option>-----请选择-----</option>
            <option>北京</option>
            <option>上海</option>
            <option>西安</option>
            <option>乌鲁木齐</option>
        </select>
        <input type="submit" value="提交">
    </form>
</body>

</html>