码迷,mamicode.com
首页 > Web开发 > 详细

jQuery的事件委托和this、$(this)

时间:2018-04-16 12:09:55      阅读:2313      评论:0      收藏:0      [点我收藏+]

标签:方法   使用   tar   理解   div   页面   text   代码   元素对象   

  首先什么是事件委托,一般我们设置事件监听的时候都是在需要触发事件的节点上设置。假设一个nav节点下有几十上百个li标签,就算使用循环绑定都是相当耗费内存,使页面速度下降。为了解决这个问题可以使用事件委托,将事件委托给他们共同的父元素节点ul上,通过事件的冒泡将事件传递到点击节点的父节点ul上,从而触发事件。

//需要绑定事件的nav标签
<nav>
            <a href="jq_load.html">HOME</a>
            <a href="jq_load2.html">ROUTE</a>
            <a href="jq_load3.html">TOYS</a>
            <a href="index.html">TIMETABLE</a>
</nav>
//jQuery文件
$(function(){
    $(‘nav‘).on(‘click‘,function(e){
        console.log(e.target.innerText);    //HOME,发生点击事件的DOM元素
        console.log(this);   //<nav>...</nav>,绑定事件的对象
        console.log($(this)); //jQuery.fn.init [nav, context: nav],nav对象
    });
});

  每个事件处理函数都会获得一个事件对象,该对象中包含和此事件相关的方法及属性。on方法的最后一个参数是一个函数,当触发事件时执行这个函数,该函数会自动传入事件对象作为其参数。

  写这个是因为今天写代码,将e.target和this、$(this)弄混淆了

  e.target 获取的是当前触发的那个对象,并不是绑定事件的那个对象。且不可以使用jQuery方法

  this 在全局下默认指向window对象,对象中指向这个对象,构造函数中指向实例对象,在这里则指向绑定事件的nav元素对象,且不可以使用jQuery方法

  $(this) 可以创建一个包含当前元素的jQuery对象,我理解为this的封装(水平有限),和this一样指向nav元素对象,可以使用jQuery方法。

jQuery的事件委托和this、$(this)

标签:方法   使用   tar   理解   div   页面   text   代码   元素对象   

原文地址:https://www.cnblogs.com/tanhuidong/p/8854947.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!