• 技术文章 >web前端 >前端问答

    jquery事件委托方法有哪些

    青灯夜游青灯夜游2022-03-10 17:01:21原创156

    jquery事件委托方法有:1、blind()方法,主要用于给选择到的元素进行事件绑定;2、live()方法,向当前或未来的匹配元素添加一个或多个事件处理器;3、delegate()方法;4、on()方法,用于将监听事件绑定到就近父级元素。

    本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

    什么是事件委托?

    子元素的事件委托给父元素,而不是分给子元素自己去绑定事件,然后触发事件的时候找到对应的event.target

    是指利用事件冒泡,只指定一个事件处理程序,来管理某一类型的所有事件

    为什么要用事件委托?

    因为在js中添加到页面的事件处理程序个数会影响到页面的整体运行性能

    其次对列表逐个添加事件处理程序太过于麻烦,所以,事件委托极大地提高了页面运行的性能

    通过for循环给ul底下的li遍历绑定事件,看似没有问题但实际非常影响页面的运行性能

    此时,就用到冒泡模式的事件委托来解决

    然而,有会想到绑定给ul的事件,实现后岂不是每个li都会受影响吗?

    出此案了新概念:事件源:不管事件绑定在那个元素中,都指的是实际触发事件的内个目标

    event.target

    eg:ul.onclick=function(event){}

    简单点就是 减少DOM访问,减少内存,提高页面的运行性能

    jquery事件委托方法有哪些

    1、blind

    定义和用法:主要用于给选择到的元素进行事件绑定

    语法:

    blind("事件类型",data,function(){ });
    //data是传入函数的参数用event.data获取(平时用的.click()等都是其简化用法)

    特点;适用于静态页面,只能给调用它时已存在的元素绑定,不能给未来新增的元素绑定

    当页面加载完时,才进行blind;

    2、live(1.7以后不支持)

    定义:向当前或未来的匹配元素添加一个或多个事件处理器;

    语法:

    live("事件类型",data, 函数名);//data可选

    特点:live并没有将事件绑定到自身(this)上,而是绑定到this.context上

    正是利用了事件委托机制完成事件的监听处理,把节点的处理委托给 document

    新添加的元素不必再绑定一次监听器,可多事件处理

    只能放在直接选择的元素的后面

    3、delegate

    定义:将监听事件绑定到就近父级元素,因为事件可以更快的冒泡上去

    语法:

    delegate(selector,type,[data],fn)

    特点:更精确的小范围使用事件代理,性能优于.live()。可以用在动态添加的元素上。

    ("父级选择器").delegate(".a","click",function())//表示:.a的事件通过父级元素进行委托,(this)获取的是触发事件的子元素

    4、on

    定义;将监听事件绑定到就近父级元素

    语法:

    on(type, 选择器,方法)

    特点:给父元素底下新添加的标签也可以用监听事件

    也支持多时事件处理

    【推荐学习:jQuery视频教程web前端视频

    以上就是jquery事件委托方法有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery 事件委托
    上一篇:javascript宿主对象和内置对象的区别是什么 下一篇:jquery中append是什么意思
    PHP编程就业班

    相关文章推荐

    • 浅析js的事件绑定&事件监听&事件委托的之间内容• js事件委托是什么?使用js事件委托的好处有哪些?• javascript事件委托和jquery事件委托• 深入浅析JS中的事件委托• 浅谈JavaScript中的事件委托

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网