JavaScript中的Event，Date，Form对象

最新推荐文章于 2023-06-08 14:02:29 发布

awjdwb

最新推荐文章于 2023-06-08 14:02:29 发布

阅读量842

点赞数

分类专栏： JavaScript 文章标签： Event对象 Date对象 Form对象

本文链接：https://blog.csdn.net/awjdwb/article/details/81478761

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Event对象：Event对象代表事件的状态，比如事件在其中发生的元素，键盘按键的状态，鼠标的位置，鼠标按钮的状态。
事件标签属性：
1.onclick：鼠标点击某个对象时出现此事件
2.onchange：用户改变域的内容时或选项变化时出现此事件

<script>
        function text(){
            console.log("你好");
    }
</script>
<textarea onchange="text()"></textarea>//当文本域中内容改变时执行一次text()方法

3.onmousedown，onmouseup：当鼠标按键被按下,被松开时触发此事件
4.onmouseover,onmouseout：当鼠标被移动到元素之上，从元素移开时触发此事件
5.onmousemove：当鼠标被移动时触发此事件
6.onkeydown,onkeyup：当某个键盘的键被按下，被松开时触发
7.onkeypress：当某个键盘的键被按下或被按住时触发
8.onfocus,onblur：当元素获得焦点（通俗的讲即有光标闪烁可以往里面写内容的状态），失去焦点时触发
9.onload：当某个页面或图像被完成加载时触发（一般写在body标签中）

<html>
    <head>
        <script>
                function text(){
                        document.getElementById("picture").src="img/376X212TransA.png";
                        console.log("你好");
                }
        </script>
    </head>
    <body onload="text()">
        <img id="picture"/>
    </body>
</html>

10.onsubmit,onreset：当提交按钮，重置按钮被点击时触发
注意：两者专门用于form表单，且事件语法为οnsubmit=”return 方法名()”;方法中要有return语句

<script>
        function text(){
            console.log("你好")；
            return true;//当return false;时不会触发submit按钮
    }
</script>
<form action="http://www.baidu.com" onsubmit="return text()">
    <input name="wd"/>
    <input type="submit" value="百度一下"/>
</form>

Date对象：
创建Date对象的语法：new Date();
Date对象的prototype属性：向对象添加属性和方法
Date对象方法：
1.getFullYear(),getMonth(),getDate(),getDay()：从Date对象中分别返回四位数字表示的年份，月份（0~11），一个月中的某一天（1~31），一周中的某一天（0~6,其中星期日对应的是0）
2.getHours(),getminutes(),getSeconds(),getMiliseconds()：返回Date对象的小时（0~23，其中24点对应的是0），分钟（0~59），秒数（0~59），毫秒（0~999）

<span id="times"></sapn>
<script>
        function time(){
            var date=new Date();
            var year=date.getFullYear();
            var month=date.getMonth()+1;
            var day=date.getDate();
            var week=date.getDay();
            var hour=date.getHours();
            var minute=date.getMinutes();
            var second=date.getSeconds();
            var currentTime=year+"-"+month+"-"+day+"   "+hour+":"+minute+":"+second+"   "+"星期:"+week;
            document.getElementById("times").innerHTML=currentTime;
    }
    setInterval("time()",1000);//一秒执行一次time()方法
</script>//此代码可动态的显示当前的时间

在此顺便介绍一下Form对象中的submit()和reset()方法：
submit()：用于提交表单，调用该方法提交表单的效果和单击 submit 按钮一样
reset()：把表单中的所有元素重置为它们的默认值，调用该方法的结果和点击reset按钮一样

<script>
        function formsubmit(){
                document.getElementById("Form").submit();
    }
    function formreset(){
            document.getElementById("Form").reset();
    }
</script>
<form id="Form">
    <input type="text" placeholder="请输入用户名"/><br/>
    <input type="password" placeholder="请输入密码"/><br/>
    <input type="button" value="提交" onclick="formsubmit()"/>
    <input type="button" value="重置" onclick="formreset()"/>
</form>

另Form对象的一些属性：
action：设置或返回表单的action属性
id：设置或返回表单的id
name：设置或返回表单的名字
上述属性和直接在form用标签属性写值效果一样
length：返回表单中元素的数目（包括input标签，textarea标签，select标签等）

awjdwb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的Event，Date，Form对象

Event对象：Event对象代表事件的状态，比如事件在其中发生的元素，键盘按键的状态，鼠标的位置，鼠标按钮的状态。事件标签属性： 1.onclick：鼠标点击某个对象时出现此事件 2.onchange：用户改变域的内容时出现此事件&amp;amp;lt;script&amp;amp;gt; function text(){ console.log(&amp;quot;你好&amp;quot;); }...
复制链接

扫一扫