文档章节

Jquery-事件处理

啃不动地大坚果
 啃不动地大坚果
发布于 2017/05/10 22:35
字数 470
阅读 24
收藏 0

1.注册事件

1)bind()方法
bind(eventType,[eventData],handle(eventObject)/false)
bind(events)
eventType 事件名字符串 如:click blur
eventData 要传给事件处理函数的数据映射
handle(eventObject) 表示事件触发时 执行的函数 当返回值为false时中断冒泡处理
events 事件函数

2)事件方法 如click() blur()
eg: 

				$("div").bind("click",function(){
					console.log("function");
				});
				$("p").bind("click",{a:"AA",b:"BB"},function(event){
					console.log("data function"+event.data.a+event.data.b);
					//return false;
				});
				$("div").click({a:"AA",b:"BB"},function(event){
					console.log("data function"+event.data.a+event.data.b);
				});

3)one()方法
one是bing的一个特例 由它绑定的函数在执行一次后就会失效
one(eventType,[eventData],handle(eventObject)/false)

2.注销事件
1)unbind()方法
unbind(eventType,handle(eventObject)/false)
unbind(event)
unbind()
eventType 事件名字符串 如:click blur
handle(eventObject) 表示事件触发时 执行的函数 当返回值为false时中断冒泡处理
events 事件函数
参数为空时 去除所有绑定事件

2.事件应用
1)事件触发
trigger(eventName,[param])
trigger(event)
eventName 事件名称字符串 如click blur
param 额外的参数数组
event  event事件对象

2)事件切换
toggle(handle(eventObject),handle(eventObject),[handle(eventObject)])
第一次点击执行第一个函数 第二次执行第二个 第N次个函数 循环执行
hover(handlein(eventObject),handleout(eventObject))
handlein 鼠标进入元素时触发 handleout鼠标离开元素时触发

3)事件委托
live(eventName,handle) 添加委托
live(eventName,data,handle)
die() 移除委托
die(eventName,[handle])

4)事件命名空间
没有命名空间的事件指定时 应该用! eg:$("div").trigger("click!");

				$("div").bind("mouseleave.a",function(){
					console.log("function");
				});
				$("div").bind("click.a",function(){
					console.log("function2");
				});
				$("div").bind("click.a",function(){
					console.log("function3");
				});
				$("div").bind("click.b",function(){
					console.log("function4");
				});
				$("div").bind("click",function(){
					console.log("function5");
				});
				$("span").bind("click",function(){
					console.log("in");
					$("div").trigger("click.a");//命名空间为a的click
					$("div").trigger("click!");//没有命名空间的click
					$("div").trigger("click");//所有click
				});

5)绑定多个事件
6)自定义事件

$("div").bind("click.a mouseleave.a meevent",function)

 

© 著作权归作者所有

上一篇: Jquery-ajax操作
下一篇: Jquery-DOM操作
啃不动地大坚果
粉丝 6
博文 120
码字总数 249840
作品 0
其它
程序员
私信 提问
jQuery源码剖析(五) - 事件绑定原理剖析

jQuery 源码解析代码及更多学习干货:猛戳GitHub 本篇代码为 my-jQuery 1.0.5.js 一、基础知识 1.DOM 0级事件模型: 通过JS指定事件处理程序传统方式,就是将一个函数赋值为一个事件处理程序属性...

极客James
07/27
0
0
第78天:jQuery事件总结(一)

jQuery事件总结(一)   现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。   JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。...

半指温柔乐
2017/11/08
0
0
jQuery基础 - 常用基本属性

jQuery简介 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程 jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它...

ZHAO_JH
2018/07/31
18
0
jQuery中.live()方法的使用方法

jQuery中.live()方法的使用方法 live(type, [data], fn) 概述 jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。 这个方法是基本是的 .bind() 方法的一...

风子
2012/09/12
192
0
jQuery对象与DOM对象的相互转换

下面介绍jquery对象和DOM对象的相互转换: 在使用jquery框架进行处理时,当我们使用$(expression)方法时,如:获取id="jquery_a"的div元素对象时,实际上获取到的值不是DOM对象,而是jquery对...

Sandy_wu
2013/03/27
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部