JS-事件及监听知识点

一、页面加载事件

主要两种类型：

1、window 的load 事件

页面载入完成时触发

    jQuery(window).bind("load",function() {        $("#signinForm").submit(checkForm);    });

2、DOMContentLoaded

DOM构建完成时触发这个事件，这是图片和样式可能还未完成加载。也就是说这个时间一定会在用户和页面交互之前触发。

并不是所有浏览器都支持DOMContentLoaded，因此jQuery将它融入到了ready()函数，这个函数兼容各个浏览器。

    jQuery.ready(function($)){        $("#myForm").bind("submit", function(){            /*...*/        });    });

更简洁的写法，可以不用ready()函数而直接将回调函数写入jQuery 对象。

    jQuery(function($){        //当页面内容可用时调用    });

二、切换上下文

调用事件回调函数时上下文会发生切换，从局部上下文切换成目标元素上下文：

    new function(){        this.appName = "wem";        document.body.addEventListener("click", function(e){            // 上下文发生改变，因此appName 是undefined            alert(this.appName);        }, false);    };

要想保持原有的上下文，需要将回调函数包装进一个匿名函数，然后用一个引用指向它。

jQuery中提供的proxy函数可解决：

    new function(){         this.appName = "wem";        $("#btnSubmit").click($.proxy(function(){             //这里的this指向proxy函数参数中的this            alert(this.appName);         }, this));    }; 

proxy函数的大致实现方式：

    var proxy = function(func, thisObject){         return (function() {            return func.apply(thisObject, arguments);         });    };

三、委托事件

直接给父元素绑定事件监听，用来检测在其子元素内发生的事件。

能减少事件监听的数量，改善代码性能。

所有为元素动态添加的子元素都具有事件监听。

    // 不要这样做，这样会给每个li 元素都添加事件监听（非常浪费）    $("ul li").click(function(){ /* ... */ });

1、原生js的做法：

    // 在ul 列表上做了事件委托    list.addEventListener("click", function(e){        if (e.target.tagName == "LI") {            /* ... */            return false;        }    }, false);

2、jquery的实现：

    // 这样只会添加一个事件监听    // 在页面载入完成后添加的li 节点同样可以触发点击事件的回调    $("ul").delegate("li", "click", function(e){        /* ... */        return false;    });

四、自定义事件

自定义事件是很好的解耦代码的处理方法，jQuery 的很多插件都是利用自定义事件来实现。

和内置事件一样，自定义事件同样会沿着DOM 树做冒泡。

1、原生js的做法：

    var myEvent = {};    //创建事件    myEvent.createEvent = function (eventStr, datatype, data) {        var e;        if ( document.createEvent) {            e = document.createEvent('Events'); //W3C创建新事件的写法            e.initEvent(eventStr, true , false);        } else if (document.createEventObject) {            e = document.createEventObject(); //IE的创建新事件的写法        } else {            return null;        }        e.datatype = datatype;        e.data = data;        return e;    };    //触发事件    myEvent.send = function (target, eventStr, datatype, data) {        if ( typeof target == 'string') {            target = document.getElementById(target);        }        var e = this.createEvent(eventStr, datatype, data);        if(e == null) {            return;        }        if (target.dispatchEvent) {            target.dispatchEvent(e);        } else if (target.fireEvent) {            target.fireEvent('on' + eventStr, e);        }    };    //绑定事件    myEvent.receive = function (target, eventStr, handler) {        if (typeof target == 'string') {            target = document.getElementById(target);        }        if (target.addEventListener) {            target.addEventListener(eventStr, handler, false);        } else if( target.attachEvent) {            target.attachEvent('on' + eventStr, handler); //IE        }    };

        myEvent.receive("menuList", "event.chen.menuClick", function(e) {            alert(e.data + "被点击！");        });

        $("#menuList").click(function(e) {            if (e.target.tagName == "LI") {                myEvent.send("menuList", "event.chen.menuClick", "string", e.target.innerHTML);            }        });

2、jquery的实现：

        $("#menuList").bind("event.chen.menuClick", function(e, data){            alert(data.menuName + "被点击！");        });

        $("#menuList").delegate("li", "click", function(e){            $("#menuList").trigger("event.chen.menuClick", {menuName:e.target.innerHTML});        });

事件并不是只能被绑定到DOM元素上，我们可以将其绑定到自定义的对象上，从而开发出类似于JAVA的事件驱动框架，又称为发布/订阅模式。

发布者向某个信道发布一条消息，订阅者绑定这个信道，当有消息发布至信道时就会接收到一个通知。发布者和订阅者是完全解耦的，甚至彼此可以并不知晓对方的存在。