jQuery-委托事件和on方法注册事件
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方法注册事件的更多相关文章
- 使用jquery的on方法注册事件遇到的坑
1,使用on注册事件 $(selector).on(event,childSelector,data,function) 2,$(selector)中的selector可以是document,那么意味 ...
- mousewheel事件的兼容方法
在垂直方向上滚动页面时,会触发mousewheel事件,这个事件会在任何元素上触发,最终都会冒泡到document(IE8)或window(IE9+及其他主流现代浏览器)对象. 在给元素指定mouse ...
- JQuery的事件委托;jQuery注册事件;jQuery事件解绑
一.事件 ①事件委托:就是给子元素的父元素或者祖先元素注册一个事件,但是事件的执行者是子元素,委托事件的好处是能够给动态创建出来时元素也加上事件. ②简单事件:就是给自己注册事件自己执行动态创建出来的 ...
- jquery on方法(事件委托)
jquery绑定事件处理函数的方法有好几个,比如:bind(),on(),delegate(),live(). 其中delegate和live都是用on实现的,效果也类似,live好像在1.7版本中已 ...
- 【转】jquery 注册事件的方法
原文链接:http://outofmemory.cn/code-snippet/2123/jquery-zhuce-event-method 1.使用事件名来绑定,可用的事件名有 change,cli ...
- jquery生成元素注册事件无效,及事件委托的使用
在页面加载完成之后,我们在页面操作用js生成html代码到页面,动态的添加元素带页面上 但是,这里可能很多人就必须碰到的一个问题就出现了,当你之后动态添加了元素到页面上,发现这个元素的绑定事件无效,如 ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- Jquery中bind(), live(), on(), delegate()四种注册事件的优缺点,建议使用on()
jquery中注册的事件,注册事件很容易理解偏差,叫法不一样.我第一反应就是如何添加事件,使用onclick之类的,暂时不讨论js注册事件的方法. 也看到园内前辈写过相关的帖子,但不是很详细,我找到了 ...
- jQuery三——筛选方法、事件
一.jquery常用筛选方法 以下为jquery的常用筛选方法: 代码示例如下: <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- 迁移git
转自:https://www.darrenfang.com/2016/03/transferring-a-repository/ 因为更换服务器,需要将原来的 git 项目迁移到新的服务器上,需要保留 ...
- flex布局实例demo全解
上篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇> ...
- 深入理解 GIL:如何写出高性能及线程安全的 Python 代码
深入理解 GIL:如何写出高性能及线程安全的 Python 代码 本文由 伯乐在线 - 郑芸 翻译.未经许可,禁止转载!英文出处:A. Jesse.欢迎加入翻译组. GIL对多线程的影响:http:/ ...
- centos7下关闭sshd的tcp6
问题现象 不算问题,就是偶然发现新装好的系统默认的sshd服务启动后的监听项有2个,如下图: 想着自己已经明明关闭了ipv6,竟然还起这tcp6...,强迫症犯了,尝试关闭它,百度一眼几乎没有,记录一 ...
- yii2在控制器中调用另一个控制器方法
Yii::$app->runAction(控制器/方法名);
- java 11 实现RFC7539中指定的ChaCha20和Poly1305两种加密算法, 代替RC4
实现 RFC 7539的ChaCha20 and ChaCha20-Poly1305加密算法 RFC7748定义的秘钥协商方案更高效, 更安全. JDK增加两个新的接口 XECPublicKey 和 ...
- python: c_char_p指向的bitmap图像数据,通过c_char_Array最终赋值给PIL的Image对象
def GetCurrentImage(self): ok, bitmap, buff_len = self.GetCurrentFrameBitmap() #调用C函数,返回位图数据的指针. bit ...
- server.xml配置介绍
server.xml位于$TOMCAT_HOME/conf目录下,是Tomcat中最重要的配置文件,server.xml的每一个元素都对应了Tomcat中的一个组件:通过对xml文件中元素的配置,可以 ...
- Grains 与 Pillars
Grains 与 Pillars Grains介绍 Grains接口是salt用来采集底层系统信息的,包含了操作系统信息.域名.IP地址.内核.内存等一些底层信息.就是因为grains采集了这些信息, ...
- palacehoder的自定义样式【输入框input /文本域textarea】
7.palacehoder的自定义样式[输入框input /文本域textarea] 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和texta ...