jQuery的event事件
1、冒泡和默认行为
<div class="aa">
<div class="bb">
<div class="cc">
<em>
<strong>
冒泡测试3
</strong>
</em>
</div>
</div>
</div>
<div>
<form action="http://www.baidu.com" method="post">
<input type="submit" value="提交">
</form> <a href="http://www.baidu.com">百度一下</a> </div> <script src="jquery-3.2.1.js"></script>
<script>
$(function () {
// $(document).bind("click",function () {
//
// alert("第一层冒泡")
// })
// $("div .bb").bind("click",function () {
// alert("第二层冒泡测试")
// })
// $("div .cc").bind("click",function (e) {
// e.stopPropagation()
// alert("第三层冒泡测试")
// }) // 第一层里是document,第二层是div,第三层还是div,都绑定了click事件,如果直接点第三层的事件,则首先会执行第三层绑定的函数,然后会执行第二层的函数,最后
// 在实行最后一层的函数,如果我们想阻止这样的行为该怎么处理e.stopPropagation(),这样,这一层就不会出现冒泡行为了 // 阻止默认行为是上面意思呢?比如我们的按钮,和超链接,如果我们点击了就会提交数据或者跳转到超链接,我们就可以使用代码实现阻止这样的默认行为
// 看到下面的例子,就阻止了a标签和input标签的默认行为,preventDefault // $("a").bind("click",function (event) {
// event.preventDefault()
// })
// $(":input[type='submit']").bind("click",function (event) {
// event.preventDefault()
// )} // 如果在函数中直接返回false,就可以实现取消默认行为+阻止冒泡行为
2、模拟用户操作
<input type="button" value="提交">
<script src="jquery-3.2.1.js"></script>
<script>
$(function () { // 这个是用户的真实操作,而不是浏览器模拟用户操作,如果在加上下面的代码,就实现了浏览器模拟用户的click事件
// $(this).bind('click',function () {
// alert("模拟用户点击页面")
//
// $(this).trigger('click')
//
// }) // 用下面这种写法也可以实现模拟用户行为
// $('input').bind('click',function () {
// alert("第二种模拟用户点击页面的方法")
// }).trigger('click') // 自定义事件,主要是用在只要浏览器刷新就会自动执行的事件,相当于刷新页面触发一个函数一样的效果
// $(':input').bind('myevent',function () {
// alert("自定义事件")
// }).trigger('myevent') //trigger和triggerHandler的区别
// 1、如果标签有默认行为,则riggerHandler不会执行默认行为,trigger则会执行默认行为,比如点击按钮提交数据,这里就会有一个默认的行为
// 2、如果匹配到多个标签,则trigger会每个标签执行一次,而triggerHandler只第一个标签会执行默认行为,后面的标签不会执行默认行为
// 3、返回值不一样 //命令空间,比如下面的例子,一个input上绑定了2个click事件,但是我们只想把abc这个事件去掉该怎么办呢,我们可以在click后加一个点,在一些随机数就可以了 // $("input").bind('click',function () {
// alert('abc')
// })
// $("input").bind('click',function () {
// alert('123')
// })
//
// $("input").bind('click.abc',function () {
// alert('abc')
// })
// $("input").bind('click.123',function () {
// alert('123')
// })
//
// $("input").unbind('click.123') })
3、事件委托
<div class="aa" id="box">
<input type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(function () {
// $(':button').bind('click',function () {
// alert("事件不委托")
// }) // 使用live绑定的是document,而非button,所有永远只会绑定一次事件
// $(":button").live('click',function () {
// alert('事件委托绑定')
// // })
// bind不能动态绑定,比如下面的例子,我开始有4个button按钮,我点击这4个中的任何一个
// 都会触发下面的click事件,然后复制出来一个按钮,但是如果我点击复制出来的按钮,则不会
// 在复制出来新的按钮,这就是bind不能动态绑定的意思;同样live可以实现动态绑定,因为事件是
// 绑定在document上,而点击button是冒泡到document,如果要触发这个冒泡,还会校验event type
// 和event target
// $(':button').bind('click',function () {
// $(this).clone().appendTo(".aa")
//
// })
// live已经被废弃了,live的替代方法是delegate<,他只绑定父元素
// $("#box").delegate('input','click',function () {
// $(this).clone().appendTo('#box')
// })
//
// $("#box").undelegate("input",'click') //on off one 这个才是重点 //普通的绑定:bind
//普通的解绑:unbind
//普通的事件委托:delegate
//普通的事件委托解绑:undelegate
//方法太多,导致换乱,所有这里提供了新的方法 on和off
//新方法绑定:on
//新方法解绑:off
// 普通使用
// $(":input").on('click',function () {
// alert('替代bind')
//
// }) // 额外数据也是可以的
// $(":input").on('click',{user:'cui'},function (e) {
// alert('替代bind' + e.data.user)
//
// }) // 执行多个事件也是可以的
// $(":input").on('click dblclick',{user:'cui'},function (e) {
// alert('替代bind' + e.data.user)
//
// })
// $(":input").on({
// click:function () {
// alert('鼠标单击')
// },
// dblclick:function () {
// alert('鼠标双击')
// }
// }) //同样阻止默认行为和冒泡也是可以的,方法和bind是一样的 //通过off来移除事件,也支持移除多个,也支持明明空间 //on如何替换delegate呢?也是通过父元素绑定和删除
// $("#box").on('click',':input',function () {
// $(this).clone().appendTo('#box')
// })
//移除事件委托
// $("#box").off('click',':input') //one的意思,仅仅触发一次,然后就会移除事件 // $(":input").one('click',function () {
// alert("one来触发事件")
// }) // 同样one的委托效果也是一样的 ,只有第一次生效
// $("#box").one('click',':input',function () {
// $(this).clone().appendTo("#box")
// }) })
jQuery的event事件的更多相关文章
- JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件
JQuery 常用API 参考资料:JQuery 官网 jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...
- jQuery通过event获取点击事件的事件对象
要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流 事件对象: 当事件发生时会产生事件对象,事件对象的作用是用来记录“事件发生是一些相关的信息.注意事件对象只有在事件发生时才会 ...
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery:详解jQuery中的事件(一)
之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...
- jQuery原生框架-----------------事件
jQuery.extend({ // 绑定事件 addEvent: function( ele, type, fn ) { // ele不是DOM,type不是字符串,fn不是函数,打包打走 if( ...
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
- 关于jQuery新的事件绑定机制on()的使用技巧
关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...
随机推荐
- 历史上的重大软件BUG启示录第9篇---微软的硬件尝试
(图片来源于网络) 2001年苹果公司发布第一代iPod,它的推出在当时引起了轰动,它拥有大容量存储空间和全新的操作方式,并且还非常漂亮(在当时看来),因此在市场上大受欢迎,苹果公司也因此赚的盆满钵满 ...
- 在webView 中使用JS 调用 Android / IOS的函数 Function
最近做一个项目,混合了NativeCode 和 HTML,为了便于JS 调用App的一些方法,统一封装一个Js方法,记录如下 Android 端首先要再WebView中允许JS的调用 WebView ...
- Oozie_02安装遇到错误【20161116】
[错误原因]hadoop的core-site.xml配置错误 把用户名hadoop配置成了主机名hadoop01 <!-- OOZIE --><property> <n ...
- 《DSP using MATLAB》Problem 2.14
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- TCP滑动窗口与回退N针协议
[转]TCP 滑动窗口协议/1比特滑动窗口协议/后退n协议/选择重传协议 2014-1-5阅读884 评论0 本文转自 http://www.cnblogs.com/ulihj/archive/201 ...
- oracle Union 中 ORA-12704:字符集不匹配问题的解决 .
在使用Union all连接时,若A集合中某列为nvarchar2或nvarchar类型,而B集合中无此列,用‘ ’ 来代替是会报字符集不匹配,解决方法有两种,见下面的示例 例: select '中国 ...
- RabbitMQ 概念与Java例子
RabbitMQ简介 目前RabbitMQ是AMQP 0-9-1(高级消息队列协议)的一个实现,使用Erlang语言编写,利用了Erlang的分布式特性. 概念介绍: Broker:简单来说就是消息队 ...
- 智能家居入门DIY——【三、GP2Y10之颗粒物传感器】
这个传感器接线算比较简单的,程序也不麻烦.不过这东西是颗粒物传感器吧,不是神马PM2.5(总悬浮颗粒物),不是神马PM10(可吸入颗粒物).插个螺丝刀进去度数也是变的,不是说的很清楚原理是反光嘛……… ...
- java课程设计-坦克大战
团队课程设计博客链接 个人负责模块 枚举类.工具类.子弹类.图片素材的查找,地图制作 Git管理 包名类名的命名 详细说明 枚举类 如 单人和双人模式 工具类 将每个图片的路径使用字符串保存,便于调用 ...
- mac下安装wxPython2.8.12.1方法
搭建robot_framework 环境 找不到 wxPython2.8.12.1的解决方法 1.mac终端pip安装robotframework-ride后 启动ride.py报: wxPython ...