jQuery事件用法详解


Posted in Javascript onOctober 06, 2016

JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码。

我们可以用jQuery这样绑定一个click事件:

/* HTML:
 *
 * <a id="test-link" href="#0">点我试试</a>
 *
 */

// 获取超链接的jQuery对象:
var a = $('#test-link');
a.on('click', function () {
  alert('Hello!');
});

on方法用来绑定一个事件,我们需要传入事件名称和对应的处理函数。
另一种更简化的写法是直接调用click()方法:

a.click(function () {
  alert('Hello!');
});

jQuery能够绑定的事件

鼠标事件

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

键盘事件
键盘事件仅作用在当前焦点的DOM上,通常是<input>和<textarea>

keydown:键盘按下时触发;
keyup:键盘松开时触发;
keypress:按一次键后触发

其他事件
ready仅作用于document对象。由于ready事件在DOM完成初始化后触发,且只触发一次,所以非常适合用来写其他的初始化代码。

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

<html>
<head>
  <script>
    // 代码有误:
    $('#testForm).on('submit', function () {
      alert('submit!');
    });
  </script>
</head>
<body>
  <form id="testForm">
    ...
  </form>
</body>

因为JavaScript在此执行的时候,<form>尚未载入浏览器,所以$('#testForm)返回[],并没有绑定事件到任何DOM上

正确版本:

<script>
    $(document).on('ready', function () {
      $('#testForm).on('submit', function () {
        alert('submit!');
      });
    });
  </script>

ready事件使用非常普遍,也这样简化:

$(document).ready(function () {
  $('#testForm).submit(function () {
    alert('submit!');
  });
});

甚至还可以再简化为(最为常见):

$(function () {
  // init...
});

可以反复绑定事件处理函数,它们会依次执行:

$(function () {
  console.log('init A...');
});
$(function () {
  console.log('init B...');
});
$(function () {
  console.log('init C...');
});

事件参数

有些事件,如mousemove和keypress,我们需要获取鼠标位置和按键的值,否则监听这些事件就没什么意义了。所有事件都会传入Event对象作为参数(下边e就是一个event对象),可以从Event对象上获取到更多的信息:

$(function () {
  $('#testMouseMoveDiv').mousemove(function (e) {
    $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
  });
});

取消绑定

一个已被绑定的事件可以解除绑定,通过off('click', function)实现:

function hello() {
  alert('hello!');
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
  a.off('click', hello);
}, 10000);

可以使用off('click')一次性移除已绑定的click事件的所有处理函数
无参数调用off()一次性移除已绑定的所有类型的事件处理函数

事件触发条件

事件的触发总是由用户操作引发的。例如,我们监控文本框的内容改动,当用户在文本框中输入时,就会触发change事件。但是,如果用JavaScript代码去改动文本框的值,将不会触发change事件。

有些时候,我们希望用代码触发change事件,可以直接调用无参数的change()方法来触发该事件:

var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件

input.change()相当于input.trigger('change'),它是trigger()方法的简写。

浏览器安全限制
在浏览器中,有些JavaScript代码只有在用户触发下才能执行,例如,window.open()函数。

以上就是本文的全部内容,希望对大家有所帮助,希望大家继续关注三水点靠木的最新内容。

Javascript 相关文章推荐
YUI的Tab切换实现代码
Apr 11 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
js特殊字符转义介绍
Nov 05 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 #Javascript
js改变html的原有内容实现方法
Oct 05 #Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 #Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 #Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 #Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 #Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 #Javascript
You might like
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
js的闭包的一个示例说明
2008/11/18 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
Python实现网站注册验证码生成类
2017/06/08 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
python numpy存取文件的方式
2020/04/01 Python
python连接mongodb集群方法详解
2020/02/13 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
文明餐桌行动实施方案
2014/02/19 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
战略合作协议书范本
2014/04/18 职场文书
融资合作协议书范本
2014/10/17 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android