JQuery的自定义事件代码,触发,绑定

自定义事件触发

下面的代码是所有它自己的自定义事件触发 你可以绑定到这个自定义事件 并提高它时 你要执行的代码里面绑定

$ event trigger(“myEventName”)

自定义事件绑定

下面的代码创建了一个绑定到自定义事件和自定义事件触发时将被执行

$(this) bind("myEventName" function(){

alert("myEventName triggered")

lishixinzhi/Article/program/Java/JSP/201311/20109

类似 DOM 的行为：你在 DOM 节点（包括 document 对象）监听并触发自定义事件。这些事件既可以冒泡，也可以被拦截。这正是 Prototype、jQuery 和 MooTools 所做的。如果事件不能扩散，就必须在触发事件的对象上进行监听。

命名空间：一些框架需要你为事件指定命名空间，通常使用一个点号前缀来把你的事件和原生事件区分开。

自定义额外数据：JavaScript 框架允许你在触发自定义事件时，向事件处理器传送额外的数据。jQuery 可以向事件处理器传递任意数量的额外参数。

通用事件 API：只用 Dojo 保留了 *** 作原生 DOM 事件的正常API。而 *** 作自定义事件需要特殊的发布/订阅 API。这也意味着 Dojo 中的自定义事件不具有DOM事件的一些行为（比如冒泡）。

声明：我们往往需要在预定义的事件中加入一些特殊的变化（例如，需要Alt键按下才能触发的单击事件），MooTools 运行你定义此类自定义事件。此类事件需要预先声明，即便你只是声明他们的名字。任何未声明的自定义事件不会被触发。

理论太抽象，看看 jQuery 框架中如何使用事件。

jQuery 的事件自定义事件还是通过 on 绑定的，然后再通过 trigger 来触发这个事件。

//给element绑定hello事件

element.bind("hello",function(){

alert("hello world!")

})

//触发hello事件

element.trigger("hello")

这段代码这样写似乎感觉不出它的好处，看了下面的例子也许你会明白使用自定义事件的好处了，参考右边的代码。

trigger需要处理的问题

模拟事件对象，用户模拟处理停止事件冒泡(因为不是通过浏览器系统触发的，而是自动触发的，所以这个事件对象要如何处理？)

区分事件类型，触发标准的浏览器事件 和 自定义事件名绑定的处理程序。

拟冒泡机制

当事件是 click 类型，自然是本身支持冒泡这样的行为，通过 stopPropagation 阻止即可

当然一些事件，如 focusin 和 blur 本身不冒泡，但 jQuery 为了跨浏览器一致性， jQuery 需要在这些事件上模拟了冒泡行为，jQuery 要如何处理？

那么如果是自定义的aaa的事件名，又如何处理冒泡？

<ul id="tabs">

<li data-tab="users">Users</li>

<li data-tab="groups">Groups</li>

</ul>

<div id="tabsContent">

<div data-tab="users">part1</div>

<div data-tab="groups">part2</div>

</div>

<script type="text/javascript">

$.fn.tabs = function(control) {

var element = $(this)

var control = $(control)

element.delegate("li", "click", function() {

var tabName = $(this).attr("data-tab")

//点击li的时候触发change.tabs自定义事件

element.trigger("change.tabs", tabName)

})

//给element绑定一个change.tabs自定义事件

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 firstName = element.find("li:first").attr("data-tab")

element.trigger("change.tabs", firstName)

return this

}

$("ul#tabs").tabs("#tabsContent")

</script>

---