js问题


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>浏览器添加事件的兼容</title>
    <style type="text/css">
    #cDiv{position:absolute; border:1px solid #000; width:100px; height:50px;}
    #newSpan{ position:relative; top:-10px; left:10px;}
    #msgDiv{border:1px solid #000; display:none; position:absolute;}
    </style>
    <script type="text/javascript">
        function gel(id) {return document.getElementById(id);}
        window.onload = function () {
            var btn = gel("txtName"); //获得按钮对象
            btn.onclick = doClick; //先为按钮对象 onclick事件  设置了一个方法 doClick
            //然后以兼容的方式，向该 事件上 在追加一个 方法 doClick2
            if (btn.addEventListener) {//如果是非IE浏览器
                btn.addEventListener("click", doClick2, false);
            } else {//如果是IE浏览器
                btn.attachEvent("onclick", doClick2);
            }
        }
        function addEvent(obj, evType, fn) {//要追加事件的dom元素，要追加的事件名，要追加的方法
            if (obj.addEventListener) {
                obj.addEventListener(evType, fn, false);
            } else if (obj.attachEvent) {
                obj.attachEvent("on" + evType, fn); 
            }
        } 
        function doClick() {
            alert("1");
        }
        function doClick2() {
            alert("doClick2");
        }
    </script>
</head>
<body>
        <input id="txtName" type="button"  value="测试事件" /><!--onclick="doClick(event)"-->
</body>
</html>想请大神解答一下动态为网页或元素绑定事件的过程
 if (btn.addEventListener) {//如果是非IE浏览器
                btn.addEventListener("click", doClick2, false);
            } else {//如果是IE浏览器
                btn.attachEvent("onclick", doClick2);
            }
        }
        function addEvent(obj, evType, fn) {//要追加事件的dom元素，要追加的事件名，要追加的方法
            if (obj.addEventListener) {
                obj.addEventListener(evType, fn, false);
            } else if (obj.attachEvent) {
                obj.attachEvent("on" + evType, fn); 
            }
        } 
addEventListener 有什么作用以及参数是什么

解决方案 »

  1.   

    addEventListener方法 用于 Mozilla系列
    用按钮click的
    例如
    obj.addEventListener(type, listener, useCapture); type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。 
    listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 
    useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 参考
    http://blog.csdn.net/ca3355/article/details/6899971 
    http://www.jb51.net/article/18220.htm
      

  2.   

    addEventListener(事件类型,回调函数名字，事件流控制)
    function 回调函数名字(evt){
     //代码
    }addEventListener 符合W3C标准的啊。
    随着以后HTML5的发展，网页内的元素会变的越来越丰富或者说复杂，单纯用on去侦听事件有点太弱了~
    统一用addEventListener 注册事件，便于管理。
    同时可以用removeListener 方法将侦听移除，例如循环函数，在不用的时候就移除掉。不过现在还是有很多浏览器（比如IE）存在很多不兼容，但是未来几年应该会好起来