码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript.事件

时间:2015-10-28 21:01:07      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:

DOM0级事件处理程序

<!DOCTYPE html>
<html>
<head>
    <title>DOM Level 0 Event Handler Example</title>
</head>
<body>
    <input type="button" id="myBtn" value="Click Me" />
    <input type="button" id="myRemoveBtn" value="Remove Event Handler" />
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        btn.onclick = function(){
            alert(this.id);
        };
        
        var removeBtn = document.getElementById("myRemoveBtn");
        removeBtn.onclick = function(){
            btn.onclick = null;
        };
    </script>
</body>
</html>

 

DOM2级事件处理程序

<!DOCTYPE html>
<html>
<head>
    <title>DOM Level 2 Event Handler Example</title>
</head>
<body>
    <input type="button" id="myBtn" value="Click Me" />
    <p>This example won‘t work in Internet Explorer.</p>
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        btn.addEventListener("click", function(){
            alert(this.id);
        }, false);
        btn.addEventListener("click", function(){
            alert("Hello world!");
        }, false);

    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>DOM Level 2 Event Handler Example</title>
</head>
<body>
    <input type="button" id="myBtn" value="Click Me" />
    <input type="button" id="myRemoveBtn" value="Remove Event Handler" />
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        var handler = function(){
            alert(this.id);
        };
        btn.addEventListener("click", handler, false); 
        
        var removeBtn = document.getElementById("myRemoveBtn");
        removeBtn.onclick = function(){
            btn.removeEventListener("click", handler, false);  //works!
        };
     </script>
</body>
</html>

IE事件处理程序

<!DOCTYPE html>
<html>
<head>
    <title>Internet Explorer Event Handler Example</title>
</head>
<body>
    <input type="button" id="myBtn" value="Click Me" />
    <p>This example works only in Internet Explorer.</p>
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        btn.attachEvent("onclick", function(){
            alert("Clicked");
        });
        btn.attachEvent("onclick", function(){
            alert("Hello world!");
        });

    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Internet Explorer Event Handler Example</title>
</head>
<body>
    <input type="button" id="myBtn" value="Click Me" />
    <input type="button" id="myRemoveBtn" value="Remove Event Handler" />
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        var handler = function(){
            alert("Clicked");
        };
        btn.attachEvent("onclick", handler); 
        
        var removeBtn = document.getElementById("myRemoveBtn");
        removeBtn.onclick = function(){
            btn.detachEvent("onclick", handler); 
        };
        
    </script>
</body>
</html>

 

 

 

跨浏览器的事件处理程序

<!DOCTYPE html>
<html>
<head>
    <title>Cross-Browser Event Handler Example</title>
    <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
    <input type="button" id="myBtn" value="Click Me" />
    <input type="button" id="myRemoveBtn" value="Remove Event Handler" />
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        var handler = function(){
            alert("Clicked");
        };
        EventUtil.addHandler(btn, "click", handler); 
        
        var removeBtn = document.getElementById("myRemoveBtn");
        EventUtil.addHandler(removeBtn, "click", function(){
            EventUtil.removeHandler(btn, "click", handler); 
        });
        
    </script>
</body>
</html>
var EventUtil = {

    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    
    getButton: function(event){
        if (document.implementation.hasFeature("MouseEvents", "2.0")){
            return event.button;
        } else {
            switch(event.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 2;
                case 4: return 1;
            }
        }
    },
    
    getCharCode: function(event){
        if (typeof event.charCode == "number"){
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },
    
    getClipboardText: function(event){
        var clipboardData =  (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    
    getEvent: function(event){
        return event ? event : window.event;
    },
    
    getRelatedTarget: function(event){
        if (event.relatedTarget){
            return event.relatedTarget;
        } else if (event.toElement){
            return event.toElement;
        } else if (event.fromElement){
            return event.fromElement;
        } else {
            return null;
        }
    
    },
    
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    
    getWheelDelta: function(event){
        if (event.wheelDelta){
            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
            return -event.detail * 40;
        }
    },
    
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    
    setClipboardText: function(event, value){
        if (event.clipboardData){
            event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData){
            window.clipboardData.setData("text", value);
        }
    },
    
    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

};

 

JavaScript.事件

标签:

原文地址:http://www.cnblogs.com/fatoland/p/4918398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!