delegate注册委托事件

delegate--代理、委托
事件代理----事件最终不是由$("#first")执行,它只是代理元素
第一个参数:最终发生事件的元素
第二个参数:事件类型
第三个参数:函数

事件执行顺序:对于被委托者来说先执行委托事件,后执行简单事件。
例:下面的例子中,如果为p、div都注册点击事件,再为div注册委托事件,
则先执行p的点击事件,再执行div注册的委托事件,最后执行div的点击事件

on方法注册简单事件与委托事件

<script>
/**
* jQuery-1.7版本后综合所有的注册事件的方式,出现了on方法
* on注册事件
* 第一个参数:事件类型
* 第二个参数:如果使用事件代理的方式,则需要填写最终触发事件的元素
* 第三个参数:data(暂时不知有什么用,但不用填写)
* 第四个参数:function(){}--函数
*/

// on注册事件的两种方式
// 第一种-----为自己注册事件
// 这种方式对于新建的元素不会附加事件
$("#second>p").on("click",function () {
alert("second");
});
// 第二种----事件代理(为父元素注册事件)
// 这种方式对于新建的子元素同样有事件附加
$("#third").on("click","p",function () {
alert("third");
});
</script>

<!--off方法解除绑定事件-->
<script>
// 第一种解除方法
// $("p").click();

// 第二种方法:off方法解除
$("p").off("click");
//由于只有第二个div中的p本身注册了点击事件,所以只有第二个div中p解除了事件
</script>

<!--trigger方法触发事件-->
<script>
$("#dv").on("click",function () {
alert("点击了");
});
$("#btn").on("click",function () {
// 第一种方法---直接调用它的click函数
// $("#dv").click();
// 第二种方法---使用trigger方法
$("#dv").trigger("click");
alert("由按钮触发的");
});
</script>

jQuery-委托事件和on方法注册事件的更多相关文章

  1. 使用jquery的on方法注册事件遇到的坑

    1,使用on注册事件 $(selector).on(event,childSelector,data,function) 2,$(selector)中的selector可以是document,那么意味 ...

  2. mousewheel事件的兼容方法

    在垂直方向上滚动页面时,会触发mousewheel事件,这个事件会在任何元素上触发,最终都会冒泡到document(IE8)或window(IE9+及其他主流现代浏览器)对象. 在给元素指定mouse ...

  3. JQuery的事件委托;jQuery注册事件;jQuery事件解绑

    一.事件 ①事件委托:就是给子元素的父元素或者祖先元素注册一个事件,但是事件的执行者是子元素,委托事件的好处是能够给动态创建出来时元素也加上事件. ②简单事件:就是给自己注册事件自己执行动态创建出来的 ...

  4. jquery on方法(事件委托)

    jquery绑定事件处理函数的方法有好几个,比如:bind(),on(),delegate(),live(). 其中delegate和live都是用on实现的,效果也类似,live好像在1.7版本中已 ...

  5. 【转】jquery 注册事件的方法

    原文链接:http://outofmemory.cn/code-snippet/2123/jquery-zhuce-event-method 1.使用事件名来绑定,可用的事件名有 change,cli ...

  6. jquery生成元素注册事件无效,及事件委托的使用

    在页面加载完成之后,我们在页面操作用js生成html代码到页面,动态的添加元素带页面上 但是,这里可能很多人就必须碰到的一个问题就出现了,当你之后动态添加了元素到页面上,发现这个元素的绑定事件无效,如 ...

  7. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  8. Jquery中bind(), live(), on(), delegate()四种注册事件的优缺点,建议使用on()

    jquery中注册的事件,注册事件很容易理解偏差,叫法不一样.我第一反应就是如何添加事件,使用onclick之类的,暂时不讨论js注册事件的方法. 也看到园内前辈写过相关的帖子,但不是很详细,我找到了 ...

  9. jQuery三——筛选方法、事件

    一.jquery常用筛选方法 以下为jquery的常用筛选方法: 代码示例如下: <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. docker容器运行后退出,怎么才能一直运行?【转】

    现象 启动docker容器 docker run –name [CONTAINER_NAME] [CONTAINER_ID] 查看容器运行状态 docker ps -a 发现刚刚启动的mydocker ...

  2. JS前端无侵入实现防止重复提交请求技术

    JS前端无侵入实现防止重复提交请求技术 最近在代码发布测试的过程中,我发现有些请求非常的消耗服务器资源,而系统测试人员因为响应太慢而不停的点击请求.我是很看不惯系统存在不顺眼的问题,做事喜欢精益求精, ...

  3. centos7使用kubeadm安装部署kubernetes 1.14

    应用背景: 截止目前为止,高热度的kubernetes版本已经发布至1.14,在此记录一下安装部署步骤和过程中的问题排查. 部署k8s一般两种方式:kubeadm(官方称目前已经GA,可以在生产环境使 ...

  4. 树莓派wiringPi,BCM,BOARD编码对应管脚

    wiringPi,BCM,BOARD编码 由于上课需要, 嵌入式学习从树莓派开始 树莓派中执行: $> gpio readall 即可得到关于树莓派管脚的各种信息 上面的图可能不是特别清楚, 可 ...

  5. Redis主从配置和哨兵监控配置——服务器端环境搭建

    一:介绍 公司用到的redis框架,主要分为cluster的缓存集群和sentinel中的哨兵主从.这种的选用方式一般需要更具业务场景来做区分,两种框架的配置图为:右图为哨兵主从框架和cliuster ...

  6. <知识整理>树--堆及其应用

    预备知识: 完全二叉树的定义:一个深度为k数的二叉树(设根节点的深度为1),若二叉树深度从1到k-1层都是满的,而第k层的节点都集中在左边(即第k层不存在两节点之间有空缺),那么此数就被叫做完全二叉树 ...

  7. Dijkstra【迪杰斯特拉算法】

    有关最短路径的最后一个算法——Dijkstra 迪杰斯特拉算法是由荷兰计算机科学家迪杰斯特拉于1959 年提出的,因此又叫迪杰斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有权图中最短路 ...

  8. 全局鼠标钩子:WH_MOUSE_LL, 在【 win 10 上网本】上因为太卡,运行中丢失全局鼠标钩子

    一台几年前买的上网本,让我安装了一个 win 10,然后用来测试程序的时候, 发现 使用 SetWindowsHookEx(WH_MOUSE_LL, mouseHook, GetModuleHandl ...

  9. CTF--web 攻防世界web题 robots backup

    攻防世界web题 robots https://adworld.xctf.org.cn/task/answer?type=web&number=3&grade=0&id=506 ...

  10. php操作excel表格的导入和导出

    前言:对于excel大家肯定熟悉不过了的,那么我们在日常的业务中应该是有对这些文件的导入导出操作的 类的下载:composer require phpoffice/phpexcel,其中Classes ...