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 相关文章推荐
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
Vue.js用法详解
Nov 13 Javascript
vue项目实现多语言切换的思路
Sep 17 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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实现插入排序
2015/03/29 PHP
PHP培训要多少钱
2017/06/06 PHP
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
详细介绍Python函数中的默认参数
2015/03/30 Python
python在不同层级目录import模块的方法
2016/01/31 Python
python简单商城购物车实例代码
2018/03/15 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
python 中如何获取列表的索引
2019/07/02 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
运行Python编写的程序方法实例
2020/10/21 Python
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
20年同学聚会邀请函
2014/02/04 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
产品推广策划方案
2014/05/10 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
教师学期末个人总结
2015/02/13 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
如何理解及使用Python闭包
2021/06/01 Python
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis