jQuery入门第四章(JQ 事件绑定 )

简介: jQuery入门第四章(JQ 事件绑定 )

写法1 把事件处理函数封装成方法调用


$('选择器').click(function(){   });


写法2  用 on( ) 方法绑定事件


$('选择器').on('click', function(){   });


事件委托 - 只能用 on 方式绑定


事件委托常用于列表的事件绑定,减少事件绑定次数,提高程序效率。


  • 需要利用了事件冒泡的特征实现的。


  • 把 on 方法事件绑定委托给 某个祖先级元素(列表的分区)。


  • 在 on 方法的第二个参数传入目标元素的选择器(真正由谁触发实现)。


  • 事件处理函数内部的 this 代表目标元素( e.target 指向给了 this ) 。


$('列表选择器').on('事件类型', '目标元素选择器', function () {
    // $(this)  就是触发事件的目标元素
});

 20210908211005358.png


相关文章
|
6月前
|
JavaScript 前端开发 索引
jQuery入门&以及选择器
jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
31 0
|
7月前
|
存储 JavaScript 前端开发
JQuery(入门~选择器)
JQuery 是快速、简洁的JavaScript库,也就是写好的JS文件。
|
6月前
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
|
6月前
|
存储 JavaScript 前端开发
jQuery 入门&选择器
jQuery 入门&选择器
37 0
|
8月前
|
XML JSON JavaScript
jQuery入门到实战
jQuery入门到实战
jQuery入门到实战
|
4月前
|
存储 JavaScript 前端开发
JQuery入门基础
JQuery入门基础
25 0
|
5月前
|
JavaScript 前端开发 开发工具
jQuery入门级别介绍及选择器的使用----详细介绍
jQuery入门级别介绍及选择器的使用----详细介绍
27 0
|
6月前
|
JavaScript 前端开发
JQuery入门到精通教程(二)
JQuery入门到精通教程(二)
23 0
|
6月前
|
JavaScript 前端开发
JQuery入门到精通教程()
JQuery入门到精通教程()
35 0
|
7月前
|
存储 JavaScript 前端开发
jQuery:入门
jQuery:入门
89 0