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

JavaScript之事件处理程序

时间:2015-11-07 23:22:39      阅读:636      评论:0      收藏:0      [点我收藏+]

标签:

一.原生JavaScript事件处理程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="EvenUtil.js" charset="UTF-8"></script>
    <script src="demo1.js" charset="UTF-8"></script>
    <!--<script src="eventDemo.js" charset="UTF-8"></script>-->
    <title>example</title>
</head>
<body>
    <button id="myBtn">Click</button>
    <a href="http://www.baidu.com" title="跳转到百度" target="_blank" name="baiduLink">点我链接到百度首页</a>
    <!-- 不添加http://的话,默认会在当前domain下查找该资源文件-->
    <!--<a href="www.baidu.com" title="跳转到百度">点我链接到百度首页</a>-->
    <input type="button" value="Echo Username" name="Echo Username">
</body>
</html>

 

    //DOM 0级指定的事件处理程序,被认为是元素的方法(在元素的作用域中运行,即this引用当前元素)
    document.getElementsByName("Echo Username")[0].onclick = function () {
        alert(this.value);
    }
    document.getElementsByName("Echo Username")[0].onclick = null;//删除绑定事件

    //Dom 2级事件处理程序,可以实现添加多个点击事件现,第三个参数若为true:捕获阶段调用事件处理程序,false:冒泡阶段调用事件处理程序
    var Btn = document.getElementById("myBtn");
    Btn.addEventListener("click",function(){
        alert(this.id);
    },false);
    Btn.addEventListener("click",function(){
        alert("My id is Btn!");
    },false);
    //删除绑定事件要使用removeEventListener,并传入要移除的事件处理函数引用,所以这会导致匿名函数无法移除!
    //removeEventListener("click",handler,false);

二.兼容性问题

    //兼容性问题:IE的实现方式为:attachEvent和detachEvent,attachEvent("onclick",handler)/detachEvent("onclick",handler)
    //而且IE更丧心病狂的是,事件处理函数在全局作用域中运行,即this == window
    var Btn = document.getElementById("myBtn");
    Btn.attachEvent("onclick",function(){
        $this = Btn;
        alert($this.id);//myBtn
        alert(this.id);//undefined
    });

三.封装对象解决该兼容性问题

var EvenUtil = {
    addHandler:function(element,evenType,handler){
        if(element.addEventListener){
            element.addEventListener(evenType,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on"+evenType,handler);
        }else{
            element["on"+evenType]=handler;
        }
    },
    removeHandler:function(element,evenType,handler){
        if(element.removeEventListener){
            element.removeEventListener(evenType,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+evenType,handler);
        }else{
            element["on"+evenType]=null;
        }
    }

}

四.事件对象

技术分享

技术分享

常用的事件对象的属性/方法:

    //事件对象的currentTarget、target属性
    var Btn = document.getElementById("myBtn");
    EvenUtil.addHandler(document.body,"click",function(event){
        console.log(this == document.body);
        console.log(event.currentTarget == this);//currentTarget指代程序当前正在处理事件的那个元素.必定等同于this
        console.log("target is Btn ? "+(event.target == Btn));//target指代你点击的那个元素.当你点击Btn时,该属性就是Btn
    });

    //事件对象的type属性
    var handler = function(event){
        switch (event.type){
            case "click" :
                alert("click");
                break;
            case "mouseover" :
                event.target.style.backgroundColor = "red";
                break;
            case "mouseout" :
                event.target.style.backgroundColor = "";
                break;
        }
    };
    EvenUtil.addHandler(Btn,"click",handler);
    EvenUtil.addHandler(Btn,"mouseover",handler);
    EvenUtil.addHandler(Btn,"mouseout",handler);
};

 

    //事件对象的stopPropagation方法:阻止冒泡
    var bubbleDemo = (function(element){
        document.body.onclick = function(){
            alert("body click!");
        }
        element.onclick = function(){
            alert(element.id+" click!");
        }
        return {
            stopClickBubble:function(){
                EvenUtil.addHandler(element,"click",function(event){
                    alert("Is can use stopProgatation ? "+event.bubbles)
                    if(event.bubbles){
                        event.stopPropagation();
                    }
                });
            }
        };
    })(document.getElementById("myBtn"));

    //阻止myBtn的onclick事件冒泡
    bubbleDemo.stopClickBubble();

 

    //事件对象的preventDefault方法:阻止默认元素默认行为
    var baiduLink = document.getElementsByName("baiduLink")[0];
    var defaultDemo = (function(element){
        element.onclick = function(){
            alert("hello baidu?");
        }
        return{
            stopDefaultAction:function(){
                EvenUtil.addHandler(element,"click",function(event){
                    if(event.cancelable){
                        event.preventDefault();
                    }
                });
            }
        }
    })(baiduLink);
    
    //阻止默认行为:不让其进行百度搜索首页的跳转
    defaultDemo.stopDefaultAction();

JavaScript之事件处理程序

标签:

原文地址:http://www.cnblogs.com/ZHeGeS/p/4946178.html

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