Javascrpt 速成篇】 三：js事件处理

ie和chrome,firefox的事件处理，除了函数名字不同，基本大同小异。这样就已chrome为主了，对ie有兴趣的自己去百度。jquery已经处理不同浏览器兼容性问题，推荐使用。

事件处理有两种常用方法，一种通过标签的onXXX属性，第二种是给标签(元素)添加事件监听器，下面已给出实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>js event</title>
</head>

<body>


    <button onclick="clickMe()">Click Me</button>
    <button id="getTimeBtn">Get Time</button>

    <script>
        //处理clickMe
        function clickMe() {
            alert('you clicked me !');
        }
    </script>

    <script>
        //获取btnEle元素
        var btnEle = document.getElementById('getTimeBtn');
        //为点击事件添加监听器
        btnEle.addEventListener('click', function () {

            alert(new Date());

        });
        /*  
          注意，这段代码必须放在getTimeBtn下面，否则将出错，因为如果放在getTimeBtn上面，
          程序从上向下执行，document.getElementById('getTimeBtn')返回的将是
          undefined,这是初学者常见的错误。此外，还有一种方法，就是当文档加载完了，
          去添加事件监听器，这个事件叫onload, 这里作为作业了。
          */
    </script>
</body>

</html>

 

posted on 2015-08-19 20:36  风之阡陌  阅读(302)  评论(0)  编辑  收藏  举报

导航