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. LODOP中tfoot和tbody中间线连不起来

    这种情况发生在使用ADD_PRINT_TABLE时,ADD_PRINT_TABLE是Lodop中专门用来输出table表格的语句,它有很多特点,比如该语句不切行(详细可参考查看本博客相关博文:LODO ...

  2. 百度编辑器html网页显示

    $(function () { var ue = UE.getEditor('content',{ serverUrl:'{:\\think\\Url::build("Ueditor/ind ...

  3. OrCAD原理图中怎么导出FPGA的引脚分配

    流程 (1)选择tool下的export FPGA: (2)选择厂商,选择器件型号.选择生成文件类型. 以上.

  4. Jupyter Notebook不能在系统命令行里全局启动

    Anaconda安装好Juypyter Notebook之后,只能在base环境里启动,在系统的命令行里要全局启动Jupyter NoteBook失败了 C:\Users\HP>jupyter ...

  5. 【dp】P2642 双子序列最大和

    题目描述 给定一个长度为n的整数序列,要求从中选出两个连续子序列,使得这两个连续子序列的序列和之和最大,最终只需输出最大和.一个连续子序列的和为该子序列中所有数之和.每个连续子序列的最小长度为1,并且 ...

  6. 对于CAN ID的理解

    本文主要讲的是自己对于CAN ID的理解,希望对需要的人有帮助,本文以通俗的方式来理解,不涉及到具体CAN通信. 在接触CAN之前,应该接触过IIC通信,在IIC通信中,在同一条IIC通信总线上每个d ...

  7. Hall定理 二分图完美匹配

    充分性证明就先咕了,因为楼主太弱了,有一部分没看懂 霍尔定理内容 二分图G中的两部分顶点组成的集合分别为X, Y(假设有\(\lvert X \rvert \leq \lvert Y \rvert\) ...

  8. docker 删除镜像

    有时候我们不需要某个镜像,需要对它进行删除.1.停止所有的container,这样才能够删除其中的images: docker stop $(docker ps -a -q) 如果想要删除所有cont ...

  9. 计算机网络Web应用层与运输层(HTTP/TCP)

    应用层协议原理 Web和HTTP DNS:英特网的目录服务 运输层 面向连接的运输:TCP及拥塞原理 一.应用层协议原理 DNS域名解析: (用例:www.baidu.com)域名解析是网络请求的第一 ...

  10. 1. Ansible 简介

    目录 1. Ansible 是什么? 2. Ansible 特性 3. 控制主机需求 4. 被管理节点需求 1. Ansible 是什么? Ansible 是一个配置管理系统(configuratio ...