Web前端----JavaScript入门(二)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的常用事件</title>
</head>
<body>
    <script type="text/javascript">
        //对于当前程序来说，sayHello函数被称为回调函数（callback函数）
        //回调函数的特点：自己把这个函数代码写出来了，但是这个函数不是自己负责调用，由其他程序负责调用该函数。
        function sayHello() {
            alert("hello js!");
        }
    </script>

    <!--注册时间的第一种方式，直接在标签中使用事件句柄-->
    <!--以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数。-->
    <input type="button" value="hello" onclick="sayHello()"/>
    <input type="button" value="hello2" id="mybtn"/>
    <input type="button" value="hello3" id="mybtn1"/>
    <input type="button" value="hello4" id="mybtn2"/>
    <script type="text/javascript">
        function doSome() {
            alert("do some!");
        }
        /*
            第二种注册事件的方式，是使用纯JS代码完成事件的注册。
         */
        //第一步：先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
        var btnObj = document.getElementById("mybtn");//通过id去获取这个元素
        //第二步：给按钮对象的onclick属性赋值
        btnObj.onclick = doSome;//注意：千万别加小括号。btnObj.onclick = doSome();这是错误的写法。

        var mybtn1 = document.getElementById("mybtn1");
        mybtn1.onclick = function () {//这个函数没有名字，叫做匿名函数，这个匿名函数也是一个回调函数。
                                      //这个函数在页面打开的时候只是注册上，不会被调用，在click事件发生之后才会调用。
            alert("test...");
        }

        document.getElementById("mybtn2").onclick = function () {
            alert("test2....");
        }

    </script>
</body>
</html>

2.5.2 代码的执行顺序

加一个页面加载完毕事件load。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS代码的执行顺序</title>
</head>
<body>
    <script type="text/javascript">
        /*
        window.onload = ready;//页面全部加载完成之后才会执行ready函数。
        function ready() {
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                alert("hello js");
            }
        }
         */
        //页面加载的过程中，将a函数注册给了load事件
        //页面加载完毕之后，load事件发生了，此时执行回调函数a
        //回调函数a执行的过程中，把b函数注册给了id = "btn"的click事件
        //当id="btn"的节点发生click事件之后，b函数被调用并执行。
        window.onload = function () {//这个回调函数叫做a
            document.getElementById("btn").onclick = function () {//这个回调函数叫做b
                alert("hello js");
            }
        }

    </script>
    <input type="button" value="hello" id="btn"/>
</body>
</html>

2.5.3 设置节点的属性

通过id获得这个元素后，可以使用"."来访问该元素的属性，对属性值进行修改。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS代码设置节点的属性</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                var mytext = document.getElementById("mytext");
                //一个节点对象中只要有的属性都可以"."
                mytext.type = "checkbox";
            }
        }
    </script>
    <input type="text" id="mytext"/>
    <input type="button" value="将文本框修改为复选框" id="btn"/>
</body>
</html>

2.5.4 捕捉键盘按下事件

捕捉回车键。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS代码捕捉回车键</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function () {
            var uesenameElt = document.getElementById("username");
            //回车键的键值是13，ESC键的键值是27

            /*
            uesenameElt.onkeydown = function (a,b) {
                alert(a);//[object KeyboardEvent] 在发生这个事件的时候，浏览器会new一个对象，然后将这个对象传回来
                alert(b);//undefined
            }
             */
            /*
            uesenameElt.onkeydown = function (event) {
                //获取键值
                //对于"键盘事件对象"来说，都有keyCode属性用来获取键值。
                alert(event.keyCode);
            }
             */
            uesenameElt.onkeydown = function (event) {
                if(event.keyCode === 13){
                    alert("正在进行验证");
                }
            }

        }
    </script>
    <input type="text" id="username"/>
</body>
</html>