一、事件绑定及移除
1.bind()
bind()为每个匹配的元素绑定一个或多个事件处理函数;
语法:bind(event,fn)//不能给未来元素添加事件;
bind(event,fn);
bind({
key1: value1,
key2: value2,
key3: value3
});
unbind(event,fn)-->bind()的反向操作,删除元素的一个或者多个事件。
2.live()
live()把事件绑定到当前及以后添加的元素上面//JQ1.9已经放弃使用。
语法:live(event,fn);
live(event,fn);
JQ1.4之前使用的比较多,现在已经放到不推荐的使用列表中;
die(event,fn)-->live()的反向操作,删除先前使用的live()绑定的事件。
3.delegate();
delegate()把事件绑定到当前及以后添加的元素上面。
语法:delegate(selector,event,fn);
JQ1.4之后加入的,和live有点相似;
undelegate(selector,event,fn) --> 删除由delegate()方法添加的一个或多个事件处理程序。
4.on();
on() 把事件绑定到当前及以后(采用事件委托的方法)添加的元素上面。
语法:on(event,seletor,fn);
JQ1.7开始引入了全新的事件绑定机制;
off(event,seletor,fn)-->on()的方向操作,移除on()绑定的事件处理程序。
总结:从JQ1.7开始,JQuery开始引入了全新的事件绑定机制,on()和off()两个函数统一事件绑定。
JQuery退出on()的目的有两个,一个是为了统一接口,二是为了提高性能。建议使用on()和off()。
5.one();
one()为匹配的元素绑定一次性的事件处理函数。
语法:one(event,fn);//未来元素无效;
当使用one()方法时,每个元素只能运行一次事件处理器函数,执行完之后事件就会被移除。
6.JQ合成事件---hover();
语法:hover(fn1,fn2);鼠标进入时执行fn1,鼠标离开时执行fn2。
7.JQ合成事件 ---toggle();
语法:1.toggle(fn1,fn2,fn3,fn4,...);
2.响应匹配元素的轮流的click事件或隐藏或显示。
8.事件对象
事件对象存储了和事件相关的信息
原生JS事件对象:
oDiv.onclick = function(ev) {
var oEvent = ev || window.event;
console.log(oEvent);//oEvent即为事件对象;
}
JQ处理了其中的兼容问题,可以直接使用
$('body').click(function(e){
console.log(e);//e即为事件对象;
});
常用的事件对象的属性:
阻止冒泡/传播:e.stopPropagation();
阻止默认行为:e.preventDefault();
事件类型:e.type;
触发事件的元素:e.target;
相对文档的坐标:e.clientX/Y e.pageX/Y;
鼠标事件中离开或者进入的DOM元素:e.relatedTarget;
事件发生的时间戳:e.timeStamp;(返回总毫秒数);
指示按了哪个键或者按钮:e.which;
9.转换
使用JS获取的DOM对象,然后在JQ中使用;
使用JQ获取的DOM对象,然后在JS中使用。

JQuery事件机制笔记的更多相关文章

  1. JQuery操作样式以及JQuery事件机制

    1.操作样式     1.1 css的操作     功能:设置或者修改样式,操作的是style属性 操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...

  2. JQuery事件机制

    1 事件操作 1.1 页面载入事件 $(document).ready(function(){ // 在这里写你的代码... }); 或者 $(function($) { // 你可以在这里继续使用$ ...

  3. jquery 事件对象笔记

    jQuery元素操作 设置或获取元素固有属性   获取               prop(属性名)    修改               prop(属性名,值) 获取自定义属性          ...

  4. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  5. jquery事件学习笔记(转载)

    一.页面载入1.ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向wi ...

  6. javascript事件机制

    ① javascript绑定事件的方式 http://blog.iderzheng.com/dom-javascript-event-binding-comparison/ ② javascript事 ...

  7. 第78天:jQuery事件总结(一)

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

  8. jQuery事件:bind、delegate、on的区别

    最近在AngularJS的开发中,遇到一个神奇的事情:我们用到livebox来预览评论列表中的图片, 然而评论列表是由Angular Resource动态载入的.不可思议的是,点击这些动态载入的图片仍 ...

  9. jQuery中的事件机制深入浅出

    昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...

随机推荐

  1. PipedInputStream和PipedOutputStream详解

    PipedInputStream类与PipedOutputStream类用于在应用程序中创建管道通信.一个PipedInputStream实例对象必须和一个PipedOutputStream实例对象进 ...

  2. Brief introduction to Cassandra 【Cassandra简介】

    From wikipedia  https://en.wikipedia.org/wiki/CAP_theorem In theoretical computer science, the CAP t ...

  3. Nginx教程(一) Nginx入门教程

    Nginx教程(一) Nginx入门教程 1 Nginx入门教程 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like协议下发行.由 ...

  4. 019 关联映射文件中集合标签中的lazy(懒加载)属性

    <set>.<list>集合上,可以取值:true/false/extra,(默认值为:true) 实例一:(集合上的lazy=true(默认))class默认lazy=tru ...

  5. iOS下KVO使用过程中的陷阱 (转发)

    iOS下KVO使用过程中的陷阱   KVO,全称为Key-Value Observing,是iOS中的一种设计模式,用于检测对象的某些属性的实时变化情况并作出响应.网上广为流传普及的一个例子是利用KV ...

  6. R实现地理位置与经纬度相互转换

    本实例要实现目标通过输入城市名或者地名,然后找出其经度纬度值,以及通过可视化展现其线路流向以及周边地图展示 address_list数据: 山西省太原市小店区亲贤北街77号 贵州省贵阳市云岩区书香门第 ...

  7. 移动端车牌识别——可以嵌入智能手机系统里的新OCR识别技术

    移动端车牌识别技术,是在OCR光学字符识别技术的基础上研发的用来识别汽车号牌特征信息的图像识别技术.在国内,该项技术由北京易泊时代携手清华大学成功地将"国家863计划"项目成果-- ...

  8. ajax传数组到后台,后台springmvc接收数组参数

    var   ids= new Array();  $("input[class='detailCheck']:checked").each(function(i,k){   var ...

  9. Python教程(2.1)——控制台输入

    这一节,我们来学习如何写一个简单的Python程序. 我们知道,很多编程语言一开始就是学习怎么输出"Hello, world",对吧?那么,现在我们来学习怎么用Python输出&q ...

  10. 基于谱聚类的三维网格分割算法(Spectral Clustering)

    谱聚类(Spectral Clustering)是一种广泛使用的数据聚类算法,[Liu et al. 2004]基于谱聚类算法首次提出了一种三维网格分割方法.该方法首先构建一个相似矩阵用于记录网格上相 ...