jQueryInAction Reading Note 4.

事件模型：javascript相关

事件模型的概念是浏览器的内容，却又与javascript相关

DOM第0级事件模型

在出现标准的事件模型之前，网景公司的网景航海家浏览器中引入了事件模型的概念。

$("#someId")[0].onclick = function(event){//...}

<img src="..." onclick="someFunction();" />

Event实例

javascript的每一个函数都有一个event实例作为默认参数。

在非IE浏览器中，event作为一个类的实例，传递给函数；在IE中，Event类的实例赋给了window.event变量。

事件冒泡

当点击一个元素的时候，这个元素的点击事件触发以后，包含这个元素的父元素的点击事件也会触发，以此类推，直到HTML元素。

这种特性成为冒泡事件。

阻止冒泡事件

event实例有一个stopPropagation()方法，这个方法能够阻止冒泡事件的继续发生。

而IE的做法是把event的一个名叫cancelBubble的属性的值设为true。

DOM第2级事件模型

$("someId")[0].addEventListener("click", function(event){//some work to do}, false);

这里面click是eventType，常见的有click，dbclick，blur，mouseover等；

function就是针对这个元素的eventType事件的处理函数；

false，成为useCapture。

这个useCapture的值为true的时候，发生冒泡的逆运算；false的时候，发生冒泡；

这种形式的好处是可以给一个元素追加多个同意eventType类型的函数处理；

jQuery事件模型：jQuery相关

bind(eventType, data, listener)

给一个包装集中的各个元素的eventType类型的event追加一个listener类型的处理函数，而data能够传递给默认的event实例的data属性

eventType支持"click.editMode"这种形式，这种形式处理的仍然是click事件，但是这个click事件只有在editMode模式下有效。

导致模式失效的是下面的unbind方法；

one(eventType, data, listener)

跟bind基本相同，不过这个元素上绑定的这个事件类型发生一次之后自动移除。

unbind(eventType, listener)

unbind(evnet)

就是把绑定到元素上的eventType类型的event处理函数去除掉

trigger(eventType)

触发指定的eventType类型的event。

这个方法仅仅是触发这个event，不会发生连带反应。

toggle(listenerOdd, listenerEven)

点击事件，当点击次数为奇数次时触发listenerOdd函数，偶数次时触发listenerEven函数。

hover(overListener, outListener)

覆盖事件，当覆盖当前元素时触发overListener函数，当从当前元素上移开时触发outListener函数。

$(":checkbox").click(function(event){

　　var checked = this.checked; // 判断当前checkbox是否为选中状态

　　$("div", $(this).parents("div:first")) // 从当前checkbox元素的父节点中找到第一个div元素，并且从这个div元素内部查找div元素。

　　　　.css("display", checked ? "block" : "none");

});

$(‘span[price] input[type=text]‘).change(function(event){　　// 查找拥有price属性的span元素的子节点中类型为text的input元素

　　$(‘~ span:first‘, this)　　// this指代的是input元素，查找this的兄弟节点中第一个span

　　　　.text(　　// 设定其span的text内容

　　　　　　$(this).val() * $(this).parents("span[price]:first").attr(‘price‘);　　// 获取input的值，乘以这个input元素的父节点中第一个拥有price属性的span的特性price的值

　　　　)

});

jQueryInAction Reading Note 4.,古老的榕树,5-wow.com