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. Azure Function & AWS Function With C#

    Using C# with Azure Functions Two important prerequisites need to be met to build Azure Functions ap ...

  2. 深入理解 GIL:如何写出高性能及线程安全的 Python 代码

    深入理解 GIL:如何写出高性能及线程安全的 Python 代码 本文由 伯乐在线 - 郑芸 翻译.未经许可,禁止转载!英文出处:A. Jesse.欢迎加入翻译组. GIL对多线程的影响:http:/ ...

  3. 数据库设计很棒的参考CDM-PDM-LDM-PowerDesigner

    此页面显示了涵盖主题领域的  50 个类别中的行业特定数据模型列表,用于创建企业数据模型. 以下是我们所有 1,700 多种数据模型的字母顺序列表 1. 广告 1. 顾客 1. 派对 1.   广告中 ...

  4. js实现一个长页面中的图片懒加载即滚动到其位置才加载

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 互相关(cross-correlation)及其在Python中的实现

    互相关(cross-correlation)及其在Python中的实现 在这里我想探讨一下“互相关”中的一些概念.正如卷积有线性卷积(linear convolution)和循环卷积(circular ...

  6. Nginx 反向代理 负载均衡 虚拟主机

    Nginx 反向代理 负载均衡 虚拟主机配置 通过本章你将学会利用Nginx配置多台虚拟主机,清楚代理服务器的作用,区分正向代理和反向代理的区别,搭建使用Nginx反向搭理和负载均衡,了解Nginx常 ...

  7. docker etcd

    etcd是CoreOS团队于2013年6月发起的开源项目,它的目标是构建一个高可用的分布式键值(key-value)数据库,用于配置共享和服务发现 etcd内部采用raft协议作为一致性算法,etcd ...

  8. Gradle创建项目(IntelliJ IDEA)

    创建Gradle项目 步骤一: 步骤二: 步骤三: 步骤四: 步骤五: 此时, 项目已经建好, 如果是第一次使用, 或者本地没有该版本的Gradle时, 就会触发下载.如图所示. 点击红色方框中标识的 ...

  9. 使用numpy的小惊喜

    今天使用 numpy.true_divide 发现个有趣的事情, 下面的代码18.19行如果去掉,就会报下面的  RuntimeWarning def multivalue_divide(timese ...

  10. 一张图11招学会Python网络黑客

    全部学起来: 第一招:搭建Python防范环境 第二招:扫描漏洞 第三招:暴力破解的秘密 第四招:防SQL注入 第五招:防命令注入 第六招:看清文件上传木马 第七招:看清Web攻击 第八招:利用Pyt ...