jQuery

jQuery 知识量:7 - 32 - 105

3.5 改变事件的旅程><

事件对象- 3.5.1 -

事件对象是一种DOM结构,当某个元素获得了事件处理机会时,就可以将事件对象作为参数传递给这个元素的事件处理函数,而在处理函数内部利用事件对象进行下一步的操作。

事件对象中包含了与事件相关的信息,比如发生事件的元素、发生时鼠标指针的位置等等。

事件目标- 3.5.2 -

要理解事件目标,可以利用以下代码来解释:

HTML代码如下:

<div>
    <p>
        <a>look</a>
    </p>
</div>

对应的JavaScript代码如下:

$(document).ready(function () {
    $('div').click(function (event) {
        var eventTag = event.target.tagName;
        alert(eventTag);
    });
});

以上代码中click事件处理函数function()的参数为event。

  • event就是事件对象。

  • event.target就是发生事件的元素,即事件目标,代表着实际被单击的元素。

  • event.target.tagName就是发生事件的元素的标签名。

阻止事件冒泡- 3.5.3 -

事件对象还有一个非常有用的方法是.stopPropagation(),它的作用是完全阻止事件冒泡,可以在需要停止事件传播的地方调用它。

HTML代码如下:

<div>
    <p>
        <a>look</a>
    </p>
</div>

对应的JavaScript代码如下:

$(document).ready(function () {
    $('div').click(function () {
        alert('DIV is clicked');
    });
    $('a').click(function (event) {
        alert('A is clicked');
        event.stopPropagation();
    });
});

以上代码中,分别给div和a绑定了click事件。当点击p时,因为事件冒泡,会调用div的事件处理函数。而当点击a时,因为a的事件处理函数中调用了.stopPropagation()阻止了事件冒泡,所以,只会调用a的事件处理函数。如果去掉event.stopPropagation(),则会先后调用a和div的事件处理函数,先后显示两个警告框。

阻止默认操作- 3.5.4 -

每当链接a被点击后,浏览器就会依据a标签href属性指定的URL地址加载一个新的页面,这是链接a的默认操作。这种默认操作不是在正常的事件旅程中发生,因此,即使调用.stopPropagation()也无法阻止这种默认操作。

好在,jQuery提供了.preventDefault()方法,它可以在触发默认操作以前阻止默认动作。

事件传播与默认操作是相互独立的两套机制,任何一方发生都可以终止另一方。在实际应用中,如果想同时阻止事件冒泡和默认操作,除了同时调用.stopPropagation()和.preventDefault()方法外,推荐的一种办法是在事件处理函数中返回false,这等同于同时调用了以上两种方法。

$(document).ready(function () {
    $('a').click(function () {
        alert('A is clicked');
        return false;
    });
});

以上代码中,点击a后,页面不会跳转,也不会有事件冒泡。

事件委托- 3.5.5 -

事件委托就是将原本由子元素处理的事件上移到父元素或祖先元素处理。事件委托实际上是对事件冒泡的一项应用。如果说事件冒泡有副作用,那么事件委托就是它的积极作用。

绑定在父元素的事件会因为其子元素满足触发条件而被触发,利用事件冒泡原理,当出现以下情况时就可以使用事件委托。

  • 需要绑定某一同类事件处理程序的子元素特别多,如果给每个子元素都绑定该事件处理程序,会消耗大量的系统资源。

  • 当使用jQuery重构页面DOM树的结构时,如果涉及了绑定事件的子元素,即原本绑定了事件的子元素被重写或修改,那么,原先绑定的事件就会失效。

jQuery为实现事件委托专门提供了一组方法,其中包括.on()方法。

$(document).ready(function () {
    $('div').on('click', 'a', function () {
        ...
    });
});

.on()方法中有三个参数,第一个是绑定的事件类型,第二个是监测的目标,由一个选择符表达式指定,第三个是事件处理函数(程序)。

以上代码中,jQuery会将click事件及处理程序绑定到div对象上,每当事件被触发,就会比较事件目标event.target和第二个参数(这里是“a”),如果匹配,就会把this对应到匹配的元素(a),并执行事件处理程序。