.on()方法用来处理事件

$("li").on("click",function(){
$(this).addClass("complete")
})

.on()方法处理的最常用的一些事件如下表所示。为了方便开发人员,jquery同样会添加一些额外的事件,比如ready事件,在当前页面准备好之后触发。

用户界面

focus、blur、change

键盘

input、keydown、keyup、keypress

鼠标

click、dbclick、mouseup、mousedown、mouseover、mousemove、mouseout、hover

表单

submit、select、change

文档

ready*、load、unload

浏览器

error、resie、scroll

事件对象

每个事件处理函数都会获得一个时间对象

$("li").on("click",function(e){
eventType = e.type
})

e:将事件对象作为命名参数

e.type:在函数中使用这个名称来指代事件对象,在该对象上使用你所熟悉的点好(成员操作符)来访问其属性和方法

下面表格中的实例使用字母e作为事件对象的缩写。

属性 说明
type 事件类型(比如click,mouseover)
which 被按下的按钮或键值
data  当事件发生时传入该函数的一些额外信息
target  发生这个事件的DOM元素
pageX 鼠标相对可视区域左边缘的位置
pageY 鼠标相对可视区区域上边缘的位置
timeStamp 事件发生时间距离1970年1月1日的毫秒数,在火狐下无效
   
方法 说明
.preventDefault 阻止默认行为
.stopPropagation 停止冒泡

jQuery的事件处理方法的更多相关文章

  1. jquery.on()超级方法

    $.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...

  2. jquery之 on()方法

    原文地址:http://www.365mini.com/page/jquery-on.htm on()函数用于为指定元素的一个或多个事件绑定事件处理函数. 此外,你还可以额外传递给事件处理函数一些所需 ...

  3. jquery中Live方法不可用,Jquery中Live方法失效

    jquery中Live方法不可用,Jquery中Live方法失效 >>>>>>>>>>>>>>>>> ...

  4. jQuery事件绑定方法bind、 live、delegate和on的区别

    我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 1.准备知识 当我们在开始的时候,有些知识是必须具备的: 1 ...

  5. jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...

  6. jQuery系列 第六章 jQuery框架事件处理

    第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...

  7. Jquery常用的方法总结

    1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom ...

  8. jQuery中on()方法用法实例

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...

  9. jQuery三——筛选方法、事件

    一.jquery常用筛选方法 以下为jquery的常用筛选方法: 代码示例如下: <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. Scala极速入门

    摘要 当面向对象遇到函数式编程,这就是Scala.简练的语言描述与简单的例子相辅相成,希望能够对大家学习Scala有所帮助. scala 入门 定义 Scala语言是一种面向对象语言,同时又结合了命令 ...

  2. python whl包的安装

    1.首先安装PIP. https://pip.pypa.io/en/latest/installing.html#install-pip python get-pip.py 2.设置好环境变量: C: ...

  3. string类的常用功能演示

    这个程序可用随着我对string的用法的增多而有调整. /* 功能说明: string类的常用功能演示. 实现方式: 主要是演示string的常用函数的用法和它与字符数组的区别与联系 限制条件或者存在 ...

  4. <Yii 学习>写入日志

    $postStr ='test:'.(empty( $GLOBALS["HTTP_RAW_POST_DATA"])?'':$GLOBALS["HTTP_RAW_POST_ ...

  5. vim直接编辑远程文件

    本文由Suzzz原创,发布于http://www.cnblogs.com/Suzzz/p/4116341.html,转载请保留此声明. Linux环境下 vim scp://user@hostIP/P ...

  6. JavaScript去除字符串两边空格trim

    去除字符串左右两端的空格,在大部分编程语言中,比如PHP.vbscript里面可以轻松地使用 trim.ltrim 或 rtrim实现.但在js中却没有这3个内置方法,需要手工编写.下面的实现方法是用 ...

  7. RPCServiceClient-调用webservice客户端

    import javax.xml.namespace.QName; import org.apache.axis2.AxisFault; import org.apache.axis2.address ...

  8. Jconsole 测试.

    Jconsole 测试. 1 下载并安装 d:\Program Files\Java\jdk1.8.0_111\ JDK自带,Windows下图形界面,监控分析Java程序 2 查看jmx进程号 [r ...

  9. Java8 日期和时间实用技巧

    新的日期API ZoneId: 时区ID,用来确定Instant和LocalDateTime互相转换的规则 Instant: 用来表示时间线上的一个点 LocalDate: 表示没有时区的日期, Lo ...

  10. python的文件锁使用

    python的文件锁目前使用的是fcntl这个库,它实际上为 Unix上的ioctl,flock和fcntl 函数提供了一个接口. 1.fcntl库的简单使用 import fcntl import ...