关于自定义事件属性的讨论

关于自定义事件属性的讨论

关于自定义事件，大多数游览器都未有实现标准的方法，但是我们都可以通过JQuery prototype等库来实现自定义事件。自定义事件给我们带来了很多不一样的好处，比如在我们需要做tabs选项卡的时候，传统的方式，是利用闭包的特性，来实现这样的效果。但是有了自定义事件，那么我们完全没必要通过闭包来实现这些。

上个例子，基于JQuery。在JQuery中有trigger方法，来实现触发自定义事件。

首先需要在写dom结构时，添加上自定义的属性，如下data-tab。

    <ul id="tabs">        <li data-tab ="users"><a href="#">USERS</a></li>        <li data-tab ="groups"><a href="#">GROUPS</a></li>    </ul>    <div id="tabsContent">        <div data-tab="users" >我的</div>        <div data-tab="groups" >你的</div>    </div>

首先我们要获取，每个li与div的data-tab属性，在监听click事件时触发自定义事件。每个库对于自定义事件的写法不一样，但是理论是一样的，我们可以给它取一个命名空间，如yu.tabs。

jQuery.fn.tabs = function (control) {            var element = $(this);            control = $(control);            element.delegate('li', 'click', function () {                var tabName = $(this).attr('data-tab');                element.trigger('change.tabs', tabName);            });            element.bind('change.tabs', function (e, tabName) {                element.find('li').removeClass('active');                element.find('>[data-tab="' + tabName + '"]').addClass('active');            });            element.bind('change.tabs', function (e, tabName) {                control.find('>[data-tab]').removeClass('active');                control.find('>[data-tab="' + tabName + '"]').addClass('active');            });            var fistName = element.find('li:first').attr('data-tab');            element.trigger('change.tabs', fistName);            return this;        }

最后我们只需要调用这个JQuery的方法，tabs选项卡功能就完成了。这里的自定义事件，还可以方便扩展，不像使用传统的方式闭包那样，不易于扩展。

TAG: