js中函式的一些”坑“

helloworlddm發表於2017-12-30
原文網址 : https://blog.csdn.net/helloworlddm/article/details/78938614
JS函式

（1）點選事件寫法如下，這裡會先顯示文字，點選之後彈出對話方塊。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test for function</title>
    </head>
    <body>
        <p id="Burning">My name is Burning</p>
        <script type="text/javascript">
        window.onload = function(){
            var bur = document.getElementById("Burning");
            bur.onclick = Hello;

            function Hello(){


                alert("Hello world");
            }
        }   
        </script>
    </body>
</html>

（2）這樣些會首先彈出對話方塊，然後顯示文字。這個的原因百度了一下，沒懂！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test for function</title>
    </head>
    <body>
        <p id="Burning">My name is Burning</p>
        <script type="text/javascript">
        window.onload = function(){
            var bur = document.getElementById("Burning");
            bur.onclick = Hello();

            function Hello(){


                alert("Hello world");
            }
        }   
        </script>
    </body>
</html>

（4）這裡會先顯示文字，點選之後彈出對話方塊。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test for function</title>
    </head>
    <body>
        <p id="Burning" onclick="Hello()">My name is Burning</p>
        <script type="text/javascript">

            //var bur = document.getElementById("Burning");
            //bur.onclick = Hello();
            /*if (typeof Hello == "function"){
                console.log("right");
            }*/
            function Hello(){


                alert("Hello world");
            }

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

（5）只顯示文字，點選事件不好使。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test for function</title>
    </head>
    <body>
        <p id="Burning" onclick="Hello">My name is Burning</p>
        <script type="text/javascript">

            //var bur = document.getElementById("Burning");
            //bur.onclick = Hello();
            /*if (typeof Hello == "function"){
                console.log("right");
            }*/
            function Hello(){


                alert("Hello world");
            }

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

（6）同（1）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test for function</title>
    </head>
    <body>
        <p id="Burning">My name is Burning</p>
        <script type="text/javascript">
        window.onload = function(){
            var bur = document.getElementById("Burning");
            console.log(bur);
            bur.onclick = function(){
            /*if (typeof Hello == "function"){
                console.log("right");
            }*/


                alert("Hello world");
            };
        }

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

（7）同（2）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test for function</title>
    </head>
    <body>
        <p id="Burning">My name is Burning</p>
        <script type="text/javascript">
        window.onload = function(){
            var bur = document.getElementById("Burning");
            console.log(bur);
            bur.onclick = function(){
            /*if (typeof Hello == "function"){
                console.log("right");
            }*/


                alert("Hello world");
            }();
        }

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

一段小程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test for function</title>
    </head>
    <body>
        <p id="Burning">My name is Burning</p>
        <script type="text/javascript">
        window.onload = function(){
            var bur = document.getElementById("Burning");
            console.log(bur);
            //bur.onclick = Hello;
            if (typeof Hello() == 'function')
            {
                console.log("Hello world");
            }//typeof Hello()會執行Hello程式
            function Hello(){
                alert("Hello world");
            }
        }

        </script>
    </body>
</html

相關文章