一、事件绑定及移除
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. myeclipse10.7安装git插件

    如果想把github上的一些开源项目导入到myeclipse中,一种方法是从github网站上将开源项目下载下来,另一种是使用myeclipse的egit插件直接从github网站上down下来,下面 ...

  2. JQuery控制下拉列表

    //遍历option和添加.移除option function changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE ...

  3. linux系统管理--进程管理

    这两天一直维护公司的服务器,主要对进程管理和linux工作管理,把一些零散的知识整理一下,书归正传~ 什么进程?  以下是百度给的解释的进程,说实话,云里雾里的,其实linux进程和windows进程 ...

  4. Natas Wargame Level 9 Writeup(bash injection)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAArAAAAClCAYAAACkwM63AAAABHNCSVQICAgIfAhkiAAAIABJREFUeF

  5. 微信小程序demo

    微信小程序demo github地址 去年小程序刚发布时特别火,赶潮流做了个demo.感觉小程序开发还是比较简单的,主要是官方文档写得比较好,遗憾的是很多API需要微信认证才能使用. 由于小程序包大小 ...

  6. javaWeb学习总结(4)- HTML 关于head中的<meta>标签

    关于<meta> 标签 <meta>标签出现在网页的标题部分,这些信息并不会出现在浏览器页面的显示之中,只会显示在源代码中.也就是在...当中. 主要用途是设置网页语言的编码方 ...

  7. 开涛spring3(12.1) - 零配置 之 12.1 概述

    12.1  概述 12.1.1  什么是零配置 在SSH集成一章中大家注意到项目结构和包结构是不是很有规律,类库放到WEB-INF/lib文件夹下,jsp文件放到WEB-INF/jsp文件夹下,web ...

  8. Win10 + Python + GPU版MXNet + VS2015 + RTools + R配置

    最近入手一台GTX 1070的笔记本,手痒想在win10上试下GPU跑模型,所以就有了接下来的安装GPU版mxnet的坎坷历程,经过多重试验终于搞定了python和R安装mxnet,现将主要点记录如下 ...

  9. RFM模型——构建数据库营销的商业战役!(转)

    RFM模型:R(Recency)表示客户最近一次购买的时间有多远,F(Frequency)表示客户在最近一段时间内购买的次数,M (Monetary)表示客户在最近一段时间内购买的金额.一般原始数据为 ...

  10. iphone手机中对于html和css的一些特殊处理

    1.iphone safari iso系统不兼容:hover的解决办法: 方法一: a:hover设置的样式在IOS系统的浏览器内显示不出来,看来是IOS系统的移动设备中,需要在按钮元素或者是body ...