2018/08/06日志 JavaScript事件

最新推荐文章于 2024-06-06 20:11:22 发布

是月流光

最新推荐文章于 2024-06-06 20:11:22 发布

阅读量196

点赞数

分类专栏：学生

本文链接：https://blog.csdn.net/S500783/article/details/81463521

版权

学生专栏收录该内容

17 篇文章 0 订阅

订阅专栏

今天的学习内容主要是“事件”
一、Event对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

1、onclick  鼠标点击
eg.

        <body>
            <script>
                function text(){
                    console.log("java");
                }
            </script>
            <div onclick="text()">点击</div>
        </body>

2、onchange  内容变动
eg.

        <body>
            <script>
                function text(){
                    console.log("java");
                }
            </script>
            <select onchange="text()">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </select>
            <textarea onchange="text()"></textarea>
        </body>

3、onfocus/onblur  获取/失去焦点事件
eg.

        <body>
            <script>
                function text(){
                    console.log("java");
                }
                function test(){
                console.log("script");
                }
            </script>
            <input onfocus="text()" onblur="test()" />
        </body>

4、onmousemove事件
eg.

        <body>
            <style>
                #mouse{
                    border: 1px solid green;
                    height: 200px;
                    width: 200px;
                }
            </style>
            <script>
                function text(){
                    console.log("java");
                }
            </script>
            <div id="mouse" onmousemove="text()"></div>
        </body>

5、onmouseover/onmouseout事件
eg.

    <body>
            <style>
                #mouse{
                    border: 1px solid green;
                    height: 200px;
                    width: 200px;
                }
            </style>
            <script>
                function text(){
                    console.log("java");
                }
                function test(){
                console.log("script");
                }
            </script>
            <div id="mouse" onmouseover="text()" onmouseout="test()"></div>
        </body>

6、onkeydown/onkeyup事件
eg.

```
    <body>
            <style>
                #mouse{
                    display:inline-block;
                    border: 1px solid green;
                    height: 200px;
                    width: 200px;
                }
            </style>
            <script>
                function text(){
                    console.log("java");
                }
                function test(){
                console.log("script");
                }
            </script>
            <input id="mouse" onkeydown="text()" onkeyup="test()"/>
        </body>

7、onsubmit事件
eg.

<body>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" onsubmit="return submit();"/>
    </form>
</body>

8、onload事件
eg.

<head>
    //getElementById    括号里的id要引起来
    function img(){
        document.getElementById("img").src="img/sina2.jpg";
    }
</head>
<body onload="img()">
    <img id="img"/>
</body>

二、getElement用法

document.getElementById通过id
getElementsByClassName通过class
getElementsByName通过name
getElementsByTagName通过标签名
eg.

<body>
        <span id="aa"></span>
        <p class="p"></p>
        <p class="p"></p>
        <input type="checkbox" name="box" />
        <input type="checkbox" name="box" />
        <input type="checkbox" name="box" />
        <script>
            var a= document.getElementById("aa");
            var b= document.getElementsByClassName("p");
            var c= document.getElementsByName("box");
            var d= document.getElementsByTagName("span");
            console.log(a);
            console.log(b);
            console.log(c);
            console.log(d);
        </script>
</body>

三、Date对象
1、创建 Date 对象的语法：
new Date();
eg. var date = new Date;
2、Date对象方法
getFullYear()—从 Date 对象中返回四位数字表示的年份
getMonth()—从 Date 对象中返回月份 (0 ~ 11)
getDate()—从 Date 对象中返回一个月中的某一天 (1 ~ 31)
getDay()—从 Date 对象中返回一周中的某一天 (0 ~ 6)
getHours()—返回 Date 对象的小时 (0 ~ 23）
getMinutes()—返回 Date 对象的分钟 (0 ~ 59)
getSeconds()—返回 Date 对象的秒数 (0 ~ 59)

eg.

    <head>
        <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 A = (hour>12)? "下午":"上午";
                week="周"+"日一二三四五六".charAt(week);
                month = (month<10)? "0"+month:month;
                day = (day<10)? "0"+day:day;
                hour = (hour>9)? hour:"0"+hour;
                minute = (minute>9)? minute:"0"+minute;
                second = (second>9)? second:"0"+second;
                var currentTime=year+"-"+month+"-"+day+"  "+A+hour+":"+minute+":"+second+"   "+week;
                document.getElementById("time").innerHTML=currentTime;
            }
            setInterval("time()",1);
        </script>
    </head>
    <body onload="time()">
        <div id="time"></div>
    </body>

是月流光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2018/08/06日志 JavaScript事件

今天的学习内容主要是“事件” 一、Event对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。1、onclick 鼠标点击eg. &amp;lt;body&amp;gt; &amp;lt;script&amp;gt; function text(){ ...
复制链接

扫一扫