日期:2014-05-16  浏览次数:20621 次

felayman------在html中使用javascript事件的几种方式
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
    <button id="btn">点击</button>
    </body>
     <script type="text/javascript">
         /*
            在html中javascript的几种事件使用方法
            1.我们直接在html中使用javascript事件,如
         */
        </script>
    <input type="button" value="按钮1" onclick="(function(){alert('点击了我按钮1')})()"/>
    <!--
        我们之所以能在html中这样直接使用javascript函数,并不是因为html解析器能识别它,因为它不是
        html规范的一部分,而是javascript的规范的一部分,而浏览器作为html和javascript的宿主容器
        它能够识别我们写入的是javascript标准还是html标准,因此当浏览器解析到该行语句的时候,发现
        需要进行脚本的解析,便会去开启另一个线程来处理脚本,但是这么写并不好,就像我们在jsp页面中写入
        了大量的java代码一样,既不美观,也不便维护,因此这种直接在html标签内来使用事件的方式我们极力
        不推荐
-->
</html>
<html>
    <head>
        <meta charset="utf-8"/>
 <script type="text/javascript">
         /*
            在html中javascript的几种事件使用方法
            2.在html元素中使用函数调用
            如,我们在两个脚本中都分别定义了tanchu函数
            当浏览器解析到该事件的时候,会去执行下面脚本
            的函数,而在上面被定义的函数会被忽略掉.这种
            事件的绑定方式为前期绑定,即浏览器事先已经为
            我们绑定了onclike事件,我们只需要去负责如何
            实现点击触发的内容即可.这种方式逻辑清晰,是
            我们极力推荐的写法.
         */
         function tanchu(value){
             alert("hello,"+value);
         }
        </script>
    </head>
    <body>
           <input type="button" value="按钮1" onclick="tanchu(this.value)"/>
    </body>
 <script type="text/javascript">
         function tanchu(value){
             alert("hellohello,"+value);
         }
        </script>

</html>

<html>
    <head>
        <meta charset="utf-8"/>
 <script type="text/javascript">
        </script>
    </head>
    <body>
           <input type="button" value="按钮1" onclick="tanchu(this.value)"/>
    </body>
 <script type="text/javascript">
        /*
            在html中javascript的几种事件使用方法
            3.在脚本中动态绑定事件
            如下面,我们不需要一个具有onclick属性的html元素来装载
            事件,而是我们自己在脚本中动态绑定事件,这样有什么好处呢?
            当我们在开发的时候需要为某一个元素在不同的情况赋予不同的
            点击效果的时候,我们可以来动态绑定事件,因为我们绑定的时候
            我们也可以取消绑定,这样我们就可以为一个元素来呈现多种点击
            效果,在jquery中也很大程度上体现这种思想,当前这样去绑定事
            件的方法,我们也需要注意,我们的脚本内容必须在你所想要绑定的
            元素之后,因为如果我们的脚本象想在这样,那么浏览器会先解析我
            们的脚本内容,而没有加载到我们需要绑定的元素,那么绑定则必然
            失败,因此,我们需要把该脚本移动到绑定的元素之后
         */
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            alert("hello,点击我了.");
        };
/*
        当我们需要取消该事件的事件,我们只需要将点击事件取消即可
       */
        btn.onclick = null;
        </script>
    <button id="btn">按钮</button>
</html>