jQuery--事件总结
标准的绑定:
bind(type,[,data],fn)==>第一个参数是事件类型 第二个可选参数作为event.data 传递给事件对象的额外数据对象 第三个参数为用来绑定的处理函数
简写绑定事件:
$('#panel h5.head').mouseover(function(){
});
合成事件:
hover(enter,leave) hover事件用来模拟鼠标的悬停事件 $('.head').hover(function(){},function(){})
toggle(fn1,fn2,fn3....fnN) $('.head').toggle(function(){},function(){}) toggle函数还有一个作用 切换元素的可见状态 $('p').toggle();
事件冒泡:
<div><p><span></span></p></div>例如 在div中添加了点击事件 p也添加了点击事件 span 也添加了点击事件当点击span标签时候会触发三个click事件
这个现象就是事件冒泡
事件冒泡导致的此问题jquery提供了解决方案: event.stopPropagation();
事件对象的属性:
event.type() 获取到事件的类型
event.preventDefault 组织浏览器的默认事件
event.stopPropagation 阻止事件冒泡
event.target 获取事件源
event.pageX()/event.pageY()==>获取光标相对于页面的x坐标和y坐标
event.which() ==>获取作用鼠标的哪个键点击的 1.左键 2.中键 3.右键
移除事件:
unbind $('p').unbind('click');
one(type,[,data],fn) one事件提供了一种方式 一次触发事件后删除
模拟操作:
$('#btn').trigger('click');
其他操作:
同时绑定多个事件类型:
$('div').bind('mouseover mouseout',function(){
$(this).toggleClass('over');
})
添加命名空间:
$('div').bind('click.plugin',function(){})
$('div').bind('mouseover.plugin',function(){})
$('div').bind('dbclick',function(){})
$('button').click(function(){
$('div').unbind('.plugin');
})
事件类型后面添加命名空间,这样删除事件的时候只需要删除命名空间就可以了
触发命名空间的事件:
$(div).trigger('click'); ==>这样有没有命名空间都可以触发
$(div).trigger('click!'); ==>这样有叹号的只能触发不带有命名空间的事件
jQuery--事件总结的更多相关文章
- JQuery选择器JQuery 事件
JQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...
- HTML Select 标签选择后触发jQuery事件代码实例
页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...
- jquery事件核心源码分析
我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...
- 解密jQuery事件核心 - 委托设计(二)
第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...
- 解密jQuery事件核心 - 模拟事件(四)
前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...
- 深入学习jQuery事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...
- jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
- jQuery事件总结
blur() 触发或绑定blur事件.$("input").blur(function(){ $("input").css("background-c ...
随机推荐
- 64位ubuntu下安装微博客户端的方法
最近安装了12.04的ubuntu系统,在unbutu提供的软件中心找不到微博客户端的应用,但在新浪的http://sinatair.sinaapp.com/下找到了官方的客户端. 于是下载了linu ...
- Linux系统移植(1) ------搭建交叉编译环境
本人的开发环境是ubuntu12.05的64版本,运行在11.00的虚拟机上.首先说明为什么需要搭建交叉编译环境.我们知道,我们的开发一般在PC机上,是基于X86架构的,而我们的开发板却是基于ARM架 ...
- MFC编程入门之二十五(常用控件:组合框控件ComboBox)
上一节讲了列表框控件ListBox的使用,本节主要讲解组合框控件Combo Box.组合框同样相当常见,例如,在Windows系统的控制面板上设置语言或位置时,有很多选项,用来进行选择的控件就是组合框 ...
- 12 个CSS 高级技巧汇总[转载]
使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 ma ...
- java中的数据结构(集合|容器)
对java中的数据结构做一个小小的个人总结,虽然还没有到研究透彻jdk源码的地步.首先.java中为何需要集合的出现?什么需求导致.我想对于面向对象来说,对象适用于描述任何事物,所以为了方便对于对象的 ...
- SpringMVC拦截器(资源和权限管理)
1.DispatcherServlet SpringMVC具有统一的入口DispatcherServlet,所有的请求都通过DispatcherServlet. DispatcherServle ...
- oracle 中数据库完全导入导出:cmd命令行模式(转载)
http://www.3lian.com/edu/2012/12-01/47252.html Oracle数据导入导出imp/exp就相当于oracle数据还原与备份.exp命令可以把数据从远程数据库 ...
- gulp教程之gulp-minify-css
简介: 使用gulp-minify-css压缩css文件,减小文件大小,并给引用url添加版本号避免缓存.重要:gulp-minify-css已经被废弃,请使用gulp-clean-css,用法一致. ...
- Input钱币规范化
要求限制input的输入内容,只有输入0-9的数字,backspace,delete,小数点,还有左右移动有效,reFormat函数用于input得到光标时将带逗号的金钱格式转化为没有逗号的字符串,a ...
- Linux vi
修改linux服务器中的文件内容,使用vi编辑器 1.#vi [文件名] 2.点击i,进入编辑模式 3.要退出按ESC,进入中间模式,按冒号 :后面跟命令 :q! (不保存并退出) :wq (保存 ...