JavaWeb笔记---JavaScript基础知识2(js中的事件)

最新推荐文章于 2024-09-14 18:52:56 发布

漂酿男骸

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量246

点赞数 1

分类专栏： JavaWeb基础知识学习文章标签： javascript js

本文链接：https://blog.csdn.net/SLSLSLSLSLSLS/article/details/116837734

版权

JavaWeb基础知识学习专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1.js中的事件
**1.1定义:**什么是事件?事件是电脑输入设备与页面进行交互的响应,能称之为事件
常用的事件:
onload加载完成事件: 页面加载完成后,常用于做页面js代码初始化操作(刚打开这个页面后的提示)
onclick单击事件:常用于按钮点击的响应事件
onblur失去焦点事件:常用于输入框失去焦点后验证其输入内容是否合法
onchange内容发生改变事件:常用于下拉列表和输入框内容发生改变后的操作
onsubmit表单提交事件:常用于表单提交前,验证所有表单项是否合法
1.2事件的注册的分类:静态注册,动态注册
**事件的注册:**告诉浏览器,当事件响应后要执行哪些操作,叫事件注册或事件绑定
**静态注册时事件:**通过HTML标签的事件属性直接赋予想i也能够后的代码
**动态注册事件:**先通过js代码得到标签的dom对象,然后再通过dom对象.事件名 = function(){}(这里是上一篇基础知识1中对象常见函数的第一种方法)
动态注册的基本步骤:
1.获取标签对象
2.标签对象.时间名 = function(){}
回忆:对象创建函数的方法:两种
1.对象.函数名 = function(){}
2.对象名 {
函数名:function(){}
}
2.onload加载完成事件
2.1静态注册(需要在body中调用)

<head>
    <meta charset="UTF-8">
    <title>onload</title>
    <script type="text/javascript">
        //onload静态事件的方法
        function fun(){
            alert('静态注册onload事件所有代码')
        }
    </script>
</head>

<body onload="fun()">

</body>

2.2动态注册(不需要调用,自己执行)

<head>
    <meta charset="UTF-8">
    <title>onload</title>
    <script type="text/javascript">
        //onload事件的方法
        window.onload = function(){
            alert("动态onload");
        }
    </script>
</head>

3.onclick事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    	//静态注册onclick实现
        function onclickfun(){ //此处定义一个函数,
            alert("静态注册onclick实现");
        }
        //动态注册onclick实现
        window.onclick = function () {
        //利用动态注册来实现单机操作:首先在单击事件时,如果单击的是id为"bt01"的按钮,则会执行onclick函数里面的语句
            //1.获取标签对象
            /*
                document 是JavaScript语言提供的一个对象(文档)
                get 获取
                element 元素
                by 通过
                id id属性
             */
            var btnobj = document.getElementById("bt01")
            //alert(btnobj);
            //2.通过标签对象.事件名 = function(){}
            btnobj.onclick = function () {
                alert("动态注册的onclick");
            }
        }
    </script>
</head>

<body>
<!--静态注册onclick事件-->
    <button onclick="onclickfun()">按钮1</button>
<!--动态注册onclick事件-->
    <button id="bt01" >按钮2</button>
</body>

4.onblur失去焦点事件

<head>
    <meta charset="UTF-8">
    <title>onblur数据焦点</title>
    <script type="text/javascript">
        //静态注册
        function onblurfun(){
        //控制台对象,js中专门用来向浏览器的控制器打印输出,用于测试使用:点击F12,然后点击console查看
            //log()打印的方法
            console.log("静态注册失去焦点事件")
        }

        //动态注册onblue事件
        window.onblur = function(){
            var password = document.getElementById("ps01");//获取标签对象通过id属性
            //alert(password);可以查看得到的对象是什么:[object HTMLInputElement]:是一个对象
            password.onblur = function () {
                console.log("动态注册失去焦点事件");
            }//设置移开该对象的框时控制台显示的语句
        }
    </script>
</head>

<body>
    用户名:<input type="text" onblur="onblurfun()"><br/>
    密码:<input type="text" id = "ps01"><br/>
</body>

5.onchange内容发生改变事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangefun() {
        //静态方法
            alert("女神已经改变了");
        }

        //动态方法
        window.onchange = function () {
        //通过id属性获得对象
            var res = document.getElementById("sl01");
            res.onchange = function () {
                alert("动态改变女神");
            }
        }
    </script>
</head>

<body>
    请选择你心中的女神:
    <!--静态注册onchange事件-->
    <select onchange="onchangefun()">
        <option>---女神---</option>
        <option>---柳岩---</option>
        <option>---关之琳---</option>
        <option>---哈哈---</option>
        <option>---拉拉---</option>
    </select>
    请选择你心中的女神:
    <!--静态注册onchange事件-->
    <select  id="sl01">
        <option>---女神---</option>
        <option>---柳岩---</option>
        <option>---关之琳---</option>
        <option>---哈哈---</option>
        <option>---拉拉---</option>
    </select>
</body>

6.onsubmit表单提交事件

<head>
    <meta charset="UTF-8">
    <title>onsubmit</title>
    <script type="text/javascript">
        //静态注册表单提交事件
        function onsubmitfun(){
            //验证所有表单是否合法
            alert("静态注册表单提交事件---发现不合法");
            return false;
        }
		//动态注册表单
        window.onload = function () {
            //1.获取标签
            var obj = document.getElementById("123");
            obj.onsubmit = function () {
                alert("不合法");
                return false; //return可以阻止表单提交
            }
        }
    </script>
</head>

<body>
    <!--return false 可以阻止表单提交-->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitfun()">
    //这里为什么要return onsubmitfun():因为函数返回值为false,而阻止提交是return false
    <input type="submit" value="静态注册"/>
    </form>

    <form action="http://localhost:8080" method="get" id="123">
    //这里已经定义了动态的提交,所以不需要加onsubmit
        <input type="submit" value="动态注册"/>
    </form>
</body>