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"> < ...
随机推荐
- asp.net core开源项目
Orchard框架:https://www.xcode.me/code/asp-net-core-cms-orchard https://orchardproject.net/ https://git ...
- 配置spring的监听器 让spring随项目的启动而启动
<!-- 配置spring的监听器 让spring随项目的启动而启动 --> <listener> <listener-class>org.springframew ...
- tensorflow-TFRecord报错ValueError: Protocol message Feature has no "feature" field.
编写代码用TFRecord数据结构存储数据集信息是报错:ValueError: Protocol message Feature has no "feature" field.或和 ...
- AB PLC教程
把文档贴到Blog.BBS或个人站等: 复制 预览 普通尺寸(450*500pix) 较大尺寸(630*500pix)
- Bootstrap 模态框(Modal)插件id冲突
<!DOCTYPE html><html><head> <meta charset="utf-8"> <titl ...
- JPA javax.persistence.TransactionRequiredException
直接说一下解决方案 Dao层,一定要是Dao层. 1 增加Transactional,必须要事务! 2 增加Modifying,告诉jpa这是修改! @Transactional @Modifying ...
- Dlib Python 检测人脸特征点 Face Landmark Detection
首先安装Dlib,Opencv库 Dlib安装链接:http://www.cnblogs.com/as3asddd/p/7237280.html 环境:Mac Sierra 10.12.1 Pytho ...
- 与scrollTop相关的一些方法(更新)
刷新页面回到页面顶部 $(document).ready(function () { $(window).scrollTop(0); } 滑动到页面指定位置执行某项操作 $(document).rea ...
- SpringMVC 文件上传下载
目录 文件上传 MultipartFile对象 文件下载 上传下载示例 pom.xml增加 创建uploadForm.jsp 创建uploadForm2.jsp 创建userInfo.jsp spri ...
- 关于objdump的博文整理
objdump主要用于查看对象文件的内容信息 objdump一些基本命令:http://www.169it.com/article/330129798173630299.html 使用readelf和 ...