一、事件绑定及移除
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. 命令模式(Command Pattern)

    命令模式属于对象的行为模式.命令模式又称为行动(Action)模式或交易(Transaction)模式.命令模式把一个请求或者操作封装到一个对象中.命令模式允许系统使用不同的请求把客户端参数化,对请求 ...

  2. Ajax,纯Js+Jquery

    AJAX:Asynchronous Javascript and xml 异步,Js和Xml 交互式网页开发 不刷新页面,与服务器交互 详情请参照Jquery工具指南用在浏览器端的技术,无刷新,通过X ...

  3. java企业架构 spring mvc +mybatis + KafKa+Flume+Zookeeper

    声明:该框架面向企业,是大型互联网分布式企业架构,后期会介绍linux上部署高可用集群项目. 项目基础功能截图(自提供了最小部分)      平台简介        Jeesz是一个分布式的框架,提供 ...

  4. MSSQL-Scripter,一个新的生成T-SQL脚本的SQL Server命令行工具

    这里向大家介绍一个新的生成T-SQL脚本的SQL Server命令行工具:mssql-scripter.它支持在SQL Server.Azure SQL DB以及Azure SQL DW中为数据库生成 ...

  5. java集合(2)- java中HashMap详解

    java中HashMap详解 基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了非同步和允许使用 null 之外,HashMap 类与 H ...

  6. 使用Charles Proxy提升iOS开发效率

    以前做前端开发的时候,使用最多的工具就是 Fiddler ,用来定位问题.模拟特定场景非常方便,极大提升了开发效率.而转做 iOS 开发以后,一大头疼的问题是 Fiddler 没有 Mac 版,幸亏找 ...

  7. Cohort Analysis and LifeCycle Grids mixed segmentation with R(转)

    This is the third post about LifeCycle Grids. You can find the first post about the sense of LifeCyc ...

  8. 深度解析PHP数组函数array_merge

    很久之前就用到过这个函数,只不不过是简单的用用而已并没有做太深入的研究 今天在翻阅别人博客时看到了对array_merge的一些使用心得,故此自己来进行一次总结. array_merge是将一个或者多 ...

  9. php 二级级联菜单

    找了很多个级联的菜单,都不好用,自己弄个简单点的,共享下,希望有朋友用得着 <?php //建立表country,有三个字段Id,parentId,area. $pro = $_POST['pr ...

  10. 【JAVAEE学习笔记】hibernate01:简介、搭建、配置文件详解、API详解和CRM练习:保存客户

    今日学习:hibernate是什么 一.hibernate是什么 框架是什么: 1.框架是用来提高开发效率的 2.封装了好了一些功能.我们需要使用这些功能时,调用即可.不需要再手动实现. 3.所以框架 ...