不同的浏览器绑定事件的代码都不太一样,所以我们使用jQuery来写代码的话,可以屏蔽不同浏览器之间的差异。

在jQuery中,可以使用 on 来绑定一个事件,指定事件的名称和对应的处理函数:
// 获取超链接的jQuery对象:
var a = $('#test-link');
a.on('click', function () {
alert('Hello!');
});
5
 
1
// 获取超链接的jQuery对象: 
2
var a = $('#test-link');
3
a.on('click', function () {
4
    alert('Hello!');
5
});

但是通常,我们不这样使用,因为我们可以直接使用封装好的事件方法,比如上面的 on click 我们可以直接写成:
a.click(function () {
alert('Hello!');
});
3
 
1
a.click(function () {
2
    alert('Hello!');
3
});

1、常用事件

1.1 鼠标事件

click 鼠标单击时触发
dblclick 鼠标双击时触发
mouseenter 鼠标进入时触发
mouseleave 鼠标移出时触发
mousemove 鼠标在DOM内部移动时触发
hover 鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave

1.2 键盘事件

键盘事件仅作用在当前焦点的DOM上,通常是<input>和<textarea>。
keydown 键盘按下时触发
keyup 键盘松开时触发
keypress 按一次键后触发

1.3 其他事件

focus 当DOM获得焦点时触发
blur 当DOM失去焦点时触发
change 当<input>、<select>或<textarea>的内容改变时触发
submit 当<form>提交时触发
ready 当页面被载入并且DOM树完成初始化后触发

注意:ready仅作用于document对象,我们的JS代码通常要等待DOM加载完成后再执行,否则经常会找不到DOM,所以我们自己初始化的代码需要放到ready事件中,保证DOM已经完成了初始化:
<html>
<head>
<script>
$(document).on('ready', function () {
$('#testForm).on('submit', function () {
alert('submit!');
});
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
15
 
1
<html>
2
<head>
3
    <script>
4
        $(document).on('ready', function () {
5
            $('#testForm).on('submit', function () {
6
                alert('submit!');
7
            });
8
        });
9
    </script>
10
</head>
11
<body>
12
    <form id="testForm">
13
        ...
14
    </form>
15
</body>

或者:
$(document).ready(function () {
// on('submit', function)也可以简化:
$('#testForm).submit(function () {
alert('submit!');
});
});
6
 
1
$(document).ready(function () {
2
    // on('submit', function)也可以简化:
3
    $('#testForm).submit(function () {
4
        alert('submit!');
5
    });
6
});

通常我们使用的是如下的方式,更简洁:
$(function () {
// init...
});
3
 
1
$(function () {
2
    // init...
3
});

2、事件参数

有些事件比如mousemove和keypress,我们需要获得鼠标的位置和按键的值。所有事件都会传入 Event 对象作为参数,可以从该对象上获取更多的信息:
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
});
});
5
 
1
$(function () {
2
    $('#testMouseMoveDiv').mousemove(function (e) {
3
        $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
4
    });
5
});
如下图所示,鼠标移动的话x,y坐标值会不断变化:
 

3、取消绑定

一个已被绑定的事件可以解除绑定,通过off('xxx', function)实现,值得注意的是,off方式的取消绑定是无法取消直接的事件方法的,如下方式取消绑定是无效的:
// 绑定事件:
a.click(function () {
alert('hello!');
}); // 解除绑定:
a.off('click', function () {
alert('hello!');
});
x
 
1
// 绑定事件:
2
a.click(function () {
3
    alert('hello!');
4
});
5

6
// 解除绑定:
7
a.off('click', function () {
8
    alert('hello!');
9
});

这是两个不同的函数对象,所以off无法取消已经banding的第一个匿名函数。

可以使用 off('click') 移除所有已绑定的 click 事件的函数,或者 off() 移除已绑定的所有类型的事件处理函数。

4、事件触发条件

记住,事件的触发总是由用户操作引发的,即如果用JS代码去改变值,不会触发对应的事件!

如果一定要使用JS触发事件,可以直接调用无参的事件方法来触发,例如:
var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件
// input.change()相当于input.trigger('change'),它是trigger()方法的简写
 
1
var input = $('#test-input');
2
input.val('change it!');
3
input.change(); // 触发change事件
4
// input.change()相当于input.trigger('change'),它是trigger()方法的简写

另外,有些JS代码即使设定触发,也因为浏览器的安全设置无法实现,只能由用户触发。


06jQuery-05-事件的更多相关文章

  1. JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数

    本篇体验JavaScript事件的基本面,包括: ■ 事件必须在页面元素加载之后起效■ 点击事件的一个简单例子■ 为元素注册多个点击事件■ 获取事件参数 ■ 跨浏览器事件处理 □ 事件必须在页面元素加 ...

  2. 读书笔记(05) - 事件 - JavaScript高级程序设计

    HTML依托于JavaScript来实现用户与WEB网页之间的动态交互,接收用户操作并做出相应的反馈,而事件在此间则充当桥梁的重要角色. 日常开发中,经常会为某个元素绑定一个事件,编写相应的业务逻辑, ...

  3. jQuery中的事件冒泡

    1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...

  4. JavaScript进阶系列07,鼠标事件

    鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...

  5. JavaScript进阶系列06,事件委托

    在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制.现在需要使用这个 ...

  6. 20160227.CCPP体系详解(0037天)

    程序片段(01):01.一对一模式.c+02.中介者模式.c+03.广播模式.c 内容概要:事件 ///01.一对一模式.c #include <stdio.h> #include < ...

  7. 20160226.CCPP体系详解(0036天)

    程序片段(01):01.多线程.c+02.多线程操作.c 内容概要:多线程 ///01.多线程.c #include <stdio.h> #include <stdlib.h> ...

  8. JavaScript进阶系列04,函数参数个数不确定情况下的解决方案

    本篇主要体验函数参数个数不确定情况下的一个解决方案.先来看一段使用函数作为参数进行计算的实例. var calculate = function(x, y, fn) { return fn(x, y) ...

  9. JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象

    本篇体验通过硬编码.工厂模式.构造函数来创建JavaScript对象. □ 通过硬编码创建JavaScript对象 当需要创建一个JavaScript对象时,我们可能这样写: var person = ...

  10. JavaScript进阶系列02,函数作为参数以及在数组中的应用

    有时候,把函数作为参数可以让代码更简洁. var calculator = { calculate: function(x, y, fn) { return fn(x, y); } }; var su ...

随机推荐

  1. 【Ubuntu 16】 wifi连接 并解决无桌面图标问题

    笔记本上装了win10和ubuntu16双系统,ubuntu16有半年多没使用了,今天一登录成功后,没有桌面啦,一个干净的壁纸映入眼帘,真操蛋. 上网搜索后总结:应该是应用软件中心出了问题,可是,没法 ...

  2. 错误Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future:

    今天写PHP代码,遇到了这个非常不友好的报错(Deprecated: mysql_connect(): The mysql extension is deprecated and will be re ...

  3. iOS 主题/皮肤之 SakuraKit

    前言 目前市场上很多 App 都有主题变更.皮肤切换的功能.随着项目代码量的不断增长,业务不断完善,功能性代码逐渐趋于模块化,尤其是在多人协作开发同一个项目时,模块解耦尤为重要,同时,公共基础库的功能 ...

  4. Yii2 报错Getting unknown property: app\models\Product::

    解决方法:查看是否存在 "$a->$abc"的写法,应改成$a->abc

  5. 高效使用 Python 可视化工具 Matplotlib

    Matplotlib是Python中最常用的可视化工具之一,可以非常方便地创建海量类型的2D图表和一些基本的3D图表.本文主要介绍了在学习Matplotlib时面临的一些挑战,为什么要使用Matplo ...

  6. virtualbox下正确虚拟机修改设备名称

    在学习大数据管理过程中,想要修改虚拟机的设备名称(因为名称太长),所以就直接在右上角的设置中找到详细设置,直接修改设备名称,结果启动Hadoop失败!!!! 后来参考网上问题解决弄好了,现在给出修改设 ...

  7. python基础教程(七)

    本章介绍如何将语句组织成函数,这样,可以告诉计算机如何做事. 下面编写一小段代码计算婓波那契数列(前两个数的和是第三个数)   fibs = [0,1] # 定义一个列表,初始内容是0,1 for i ...

  8. ThreadLoacl的反思

    在我的随笔 spring mvc:注解@ModelAttribue妙用  中使用ThreadLocal来简化spring mvc控制层controller中的ModelMap,Response.Jso ...

  9. 转载 Java基本数据类型

    Java语言是静态类型的(statical typed),也就是说所有变量和表达式的类型再编译时就已经完全确定.由于是statical typed,导致Java语言也是强类型(Strong typed ...

  10. startsWith和endWith方法

    startsWith(): 例如:if(a.startsWith(b)) //判断字符串a 是不是以字符串b开头. 语法1 public boolean startsWith(String prefi ...