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 ...
随机推荐
- 这是一个比较全的Android UI 组件
Android组件及UI框架大全 原文地址:http://blog.csdn.net/smallnest/article/details/38658593 Android 是目前最流行的移动操作系统 ...
- WebUpLoder 能自动预览,能多实例,包括后台demo
样式在网上找的.样子: 懒得写别的了,代码里面我写的注释挺详细的:https://github.com/zhangsai521314/WebUpLoder 写文不易,转载请注明出处:http://ww ...
- About next_permutation
哈哈没错这个又是我们C++党的语言优势之一,用这个函数可以求当前排序的下一个排序,也就是说可以方便的求全排列,用这个函数需要用到algorithm这个头文件. 与这个函数相反的是prev_permut ...
- 基础笔记12(socket,url网络通信)
进一步深入socket 1.网络通信条件: .IP地址,可用主机名. .传输数据时将不用的应用程序通过数字标识区分开来,这种标识称为逻辑端口,也称端口.(0-65535端口,一般系统预留0-1024) ...
- js this理解
原文链接:http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html this是js语言的几个关键字,代表 ...
- 转:OSGi 入门篇:模块层
OSGi 入门篇:模块层 1 什么是模块化 模块层是OSGi框架中最基础的一部分,其中Java的模块化特性在这一层得到了很好的实现.但是这种实现与Java本身现有的一些模块化特性又有明显的不同. 本文 ...
- property内存管理策略
1普通数据,用weak 2delegate,用weak 3一般对象,用strong 4NSString,用copy 5block,用copy
- SpringMVC之controller篇
概述 继 spring 2.0 对 Spring MVC 进行重大升级后,Spring 2.5 又为 Spring MVC 引入了注解驱动功能.现在你无须让 Controller 继承任何接口,无需在 ...
- css划隔横线的两种方法
css划隔横线的两种方法 方法一:用DIV,代码如下:(推荐此方法) <div style="width:800px;height:1px;margin:0px auto;pa ...
- 读取中文目录(python)
前言:需要对某目录下的文件进行分类,目录是中文名字就会报错,偶尔会手动修改文件名字,不太方便 解决办法:使用unicode()对路径进行处理 举例: 未进行处理前,该目录下的文件中文名称也是乱码显示的 ...