JavaWeb之JavaScript（Day02）

最新推荐文章于 2024-07-06 00:11:00 发布

程序彤

最新推荐文章于 2024-07-06 00:11:00 发布

阅读量131

点赞数

分类专栏：前端文章标签： js javascript html html5

本文链接：https://blog.csdn.net/m0_47119598/article/details/109338995

版权

前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

对象

用var 变量名来定义

Object自定义对象

var obj = new Object();
obj.name = “…”; // 调用属性对象.属性名
obj.f1 = function(){…};
obj.f1(); // 调用方法对象.方法名()

<script type="text/javascript">
        let obj = new Object();
        obj.name = "lwt";
        obj.f1 = function () {
            alert("姓名为："+this.name);
        }
        obj.f1();
        alert(obj.name);
    </script>

{}花括号自定义对象

var 变量名 = {
属性名:值,
属性名:值,
函数名:function(){}
};

 <script type="text/javascript">
        // var obj = {};
        // alert(obj);
        // alert(typeof obj);
        var obj = {
            name:"lwt",
            age:18,
            f1:function () {
                alert(obj.name+" "+obj.age);
            }
        };
        obj.f1();


    </script>

事件

是电脑与页面进行交互的响应。

事件的绑定

告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册绑定

静态绑定注册

通过html标签的事件属性直接赋予事件响应后的代码

动态绑定

是指先通过js代码得到标签的dom对象点事件名=function(){}这种形式赋予事件响应后的代码
步骤：通常先动态绑定onload事件
1.获取标签对象
2.标签对象.事件名=function(){}

常用的事件

onload 加载完成事件。页面加载完成后，做页面js代码初始化操作
onclick 单击事件常用于按钮的点击响应操作
onblur 失去焦点事件常用用于输入框失去焦点后验证其输入内容是否合法
onchange 内容发生改变事件常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件常用与表单提交前，验证所有表单项是否合法。

onload事件

onload静态绑定

如果在body中静态绑定onload事件,静态优先
在script中function 函数名(){}，在body上 οnlοad=“函数名();”

<head>
    <meta charset="UTF-8">
    <title>js onload事件</title>
    <script type="text/javascript">
        function onloadFun(){
            alert('静态注册onload事件的所有代码')
        }
    </script>
</head>
<!--浏览器解析完页面之后就会自动执行触发的事件-->
<body onload="onloadFun();">

</body>

onload动态绑定

在script中window.onload = function(){}

<head>
    <meta charset="UTF-8">
    <title>js 动态绑定onload事件</title>
    <script type="text/javascript">
        function onloadFuning() {
            alert('如果在body中静态绑定onload事件,静态优先');
        }
    // onload动态绑定事件，固定写法
        window.onload = function () {
            alert('动态绑定onload事件');
        }
    </script>
</head>
<body>

</body>

onclick事件

在动态绑定绑定onload事件的基础上，动态绑定onclick事件
步骤：

动态绑定onload事件 window.onload = function(){
获取标签对象： var btobj = document.getElementById(“按钮的id名”);
通过标签对象.事件名 = function(){}: btobj.onclick = function(){alert(“动态”);}
}

<head>
    <meta charset="UTF-8">
    <title>绑定onclick事件</title>
    <script type="text/javascript">
        function onclickFun() {
            alert('静态绑定onclick事件');
        }
        // 动态绑定onclick事件
   
        window.onload = function () {
            // 1.获取标签对象
            
            var btobj = document.getElementById("btid1");
            alert(btobj);
            // 2.通过标签对象.事件名 = function(){}
            btobj.onclick = function () {
                alert("动态绑定的onclick事件")
            }

        }
    </script>
</head>
<body>
<!--静态绑定onclick事件-->
    <button onclick="onclickFun()">静态绑定按钮</button>

    <button id="btid1">按钮2</button>
</body>

onblur失去焦点事件

动态绑定onblur失去焦点事件
步骤:

动态绑定onload事件 window.onload() = function(){
获取标签对象 var onblurEvent = document.getElementById(“input的id名”);
通过标签对象.事件名 = function(){}
onblurEvent.onblur = function(){console.log(“动态绑定blur”)}
}

<head>
    <meta charset="UTF-8">
    <title>绑定blur失去焦点事件</title>
    <script type="text/javascript">
        // 动态绑定onblur事件
        window.onload = function () {
            var user = document.getElementById("user"); // 获取标签对象
            user.onblur = function () { // 通过标签对象.onblur = function(){}
                console.log("动态绑定blur事件");
            }
        }
    </script>
</head>
<body>
用户名：<input id="user" type="text" ><br>
密码：<input type="password"><br>

</body>

onchange下拉列表改变事件

<head>
    <meta charset="UTF-8">
    <title>onchange事件</title>
    <script>
        window.onload = function () {
            let selectObj = document.getElementById("airen");
            selectObj.onchange = function () {
                alert("女神已经改变");
            }
        }
    </script>
</head>
<body>
请选择心中的爱人
<select name="" id="airen">
    <option value="">lwt</option>
    <option value="">佳佳</option>
</select>
</body>

onsubmit表单提交事件

<head>
    <meta charset="UTF-8">
    <title>表单提交事件</title>
    <script>
        window.onload = function () {
            let formObj = document.getElementById("biaodan");
            alert(formObj);
            formObj.onsubmit = function () {
                alert("动态绑定表单提交事件————发现不合法——已阻止表单提交");
                return false;
            }
        }
    </script>
</head>
<body>
<form id="biaodan" action="http://localhost:8080" method="get">
    <input type="submit" value="动态绑定">
</form>
</body>

程序彤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb之JavaScript（Day02）

对象用var 变量名来定义Object自定义对象var obj = new Object();obj.name = “…”; // 调用属性对象.属性名obj.f1 = function(){…};obj.f1(); // 调用方法对象.方法名()<script type="text/javascript"> let obj = new Object(); obj.name = "lwt"; obj.f1 = function (
复制链接

扫一扫