事件

最新推荐文章于 2024-02-19 10:29:24 发布

转载最新推荐文章于 2024-02-19 10:29:24 发布 · 121 阅读

文章标签：

#javascript #ViewUI

本文介绍了BJUI框架内置的各种自定义事件，包括监听和触发事件的方法，并详细解释了全局事件的作用，如框架初始化事件和ajax请求状态事件等。通过一个具体的示例展示了如何使用这些事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本框架内置组件的事件基本上都是jquery自定义事件。

监听事件

$(selector).on('Event me',function(e){

　　//do something

})

触发事件

$(selector).trigger('Event name');

全局事件

事件名称	中文说明	描述
bjui.initUI	框架初始化事件	监听改时间，可以为指定的DOM初始化组件以及插件。例如：本框架使用该事件用于在文档加载完成或者ajax加载完成时，初始化框架以及插件
bjui.beforeInitUi	框架初始化前事件	监听改时间，可以在框架初始化前进行相关操作。例如：本框架的任一容器DOM如果添加了属性[data-noinit="true"]，该容器内的元素都不会被初始化，实现这个流程就使用了本事件监听
bjui.afterInitUI	框架初始化事件	监听该事件，可以在框架初始化后进行相关操作，示例同上。
bjui.ajaxStatus	ajax请求状态事件	框架内部事件。本事件用于在ajax请求过程中（ajaxStart ->ajaxStop），显示/隐藏框架的Mask loading效果。
bjui.resizeGrid	窗口缩放事件	监听该事件，可以在浏览器窗口或者dialog窗口进行缩放时进行相关操作
bjui.beforeAjaxLoad	ajax载入前事件	监听该事件，可以在使用ajaxUrl方法（navtab/dialog均用此方法加载子页片内容）前进行相关操作，例如：本框架监听该事件用于在重载入子叶片前释放在body中生成的selectpicker插件资源

bjui.initUI事件示例：

1、定义一个div容器，为它添加一个文本框，让div容器监听bjui.initUI事件（将文本框的边框颜色改为红色）。

2、点击“创建div容器”，将div容器附加到按钮后面。

3、点击“触发bjui.initUI事件”按钮，让div容器触发bjui.initUI事件。

demo代码：

    <script type="text/javascript">
        var $doc_div=$('<div class="doc-eventbox" style="display:inline-block;margin-left:10px;"><input type="text"></div>' );
        $doc_div.on('BJUI.initUI',function(){
            alert(1);
            $(this).find('input').css('border-color','red');
        });
        $('a.doc-event-1').click(function(){
            $doc_div.insertAfter('a.doc-event-2');
            $('a.doc-event-2').removeClass('hide');
            $(this).hide();
        });
        $('a.doc-event-2').click(function(){
            $(this).hide();
            $doc_div.trigger('BJUI.initUI');
        });
    </script>
    <a href="javascript:;" class="btn btn-default doc-event-1">创建div容器</a>
    <a href="javascript:;" class="btn-default hide doc-event-2">出发BJUI的initUI事件</a>