一、事件绑定及移除
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. Java_中快速获取系统时间

    直接调用System的currentTimeMillis()即可! long start = System.currentTimeMillis(); System.out.println(" ...

  2. 头皮发麻的HTML课时一

    话说我都不知道有多少天没有更新我的随笔了,不过我忽的一下发现到灵魂深处的罪孽:好吧,不扯淡了,其实就是自己懒得外加上HTML这个东西又实在是很重要,所以良心发现把我自己所学的给记录下来,我会尽量的写的 ...

  3. Unity 遮罩 点击panel以外的位置,panel关闭

    public Class Panel_ATMRechage : IPanel{ private Dictionary<string,UISprite>mSprites; } protect ...

  4. 时间序列分析算法【R详解】

    简介 在商业应用中,时间是最重要的因素,能够提升成功率.然而绝大多数公司很难跟上时间的脚步.但是随着技术的发展,出现了很多有效的方法,能够让我们预测未来.不要担心,本文并不会讨论时间机器,讨论的都是很 ...

  5. css因Mime类型不匹配而被忽略,怎么解决

    问题:在火狐.谷歌都可以正常显示出来,在别人的IE浏览器上也可以正常显示出来,但是在自己的ie浏览器就完全不能加载的熬样式了 控制台报告 SEC7113: CSS 因 Mime 类型不匹配而被忽略 答 ...

  6. MyEclipse使用技巧详解

    MyEclipse使用技巧的掌握是和我们开发效率挂钩的,那么如何掌握MyEclipse使用技巧呢?这里向你详细介绍了几种使用技巧的操作方法. 在了解MyEclipse使用技巧之前我们来看看MyEcli ...

  7. Mysql数据库二进制安装

    MySQL数据库有四种安装方法: 源码包编译安装 RPM包安装 二进制文件安装 官方yum源安装 这里我们主要介绍二进制包的安装方法 在MySQL官网下载二进制包并且上传到服务器上 解压二进制包 [r ...

  8. Java对字符串进行的操作

    本篇总结归纳对字符串或数组进行相关操作问题 数组倒序输出 查找字符串中第一次重复的字符 查找字符串中第一次没有重复的字符 删除字符串中重复的元素 倒序输出问题 第一种:对于数组 public int[ ...

  9. css块级元素居中

    <!DOCTYPE html> <html> <head> <title>index</title> </head> <b ...

  10. Javascript事件模型(一):DOM0事件和DOM2事件

    javascript事件模型,本文主要有以下内容: DOM0事件模型 DOM2事件模型  一.DOM0事件模型 早期的事件模型称为DOM0级别. DOM0的事件具有极好的跨浏览器优势, 会以最快的速度 ...