美文网首页
未完jQuery基础(三)—事件篇-----jQuery事件对象

未完jQuery基础(三)—事件篇-----jQuery事件对象

作者: 王翔爱摇滚乐爱电影爱心理学爱哲 | 来源:发表于2017-08-02 11:15 被阅读0次

    1、jQuery事件对象的作用

    事件中的Event对象容易被初学者忽略掉,可能大多时候初学者不知道怎么去用它,但有些时候它还是非常有用的

    这里不在千篇一律的说方法的使用,通过实际的一个小案例,从而来了解事件对象的作用

    <ul>
    <li class="even1"></li>
    <li class="even2"></li>
    <li class="even2"></li>
    .........
    </ul>
    ul有N个子元素li(这里只写了3个),如果我要响应每一个li的事件,那么常规的方法就是需要给所有的li都单独绑定一个事件监听,这样写法很符合逻辑,但是同时有显得繁琐
    因为li都有一个共同的父元素,而且所有的事件都是一致的,这里我们可以采用要一个技巧来处理,也是常说的"事件委托"
    事件没直接和li元素发生关系,而且绑定父元素了。由于浏览器有事件冒泡的这个特性,我们可以在触发li的时候把这个事件往上冒泡到ul上,因为ul上绑定事件响应所以就能够触发这个动作了。唯一的问题怎么才知道触发的li元素是哪个一个?
    这里就引出了事件对象了
    事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁
    回到上面的问题,既然事件对象是跟当前触发元素息息相关的,所以我们就能从里面相关的信息,从事件对象中找到 event.target
    target 属性可以是注册事件时的元素,或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托
    简单来说:event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素
    http://js.jirengu.com/xucelewahi/1/

    相关文章

      网友评论

          本文标题:未完jQuery基础(三)—事件篇-----jQuery事件对象

          本文链接:https://www.haomeiwen.com/subject/zueghxtx.html