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 相关文章推荐
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
javascript 特殊字符串
Feb 25 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
小程序云开发实战小结
Oct 25 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php防注
2007/01/15 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
python采用getopt解析命令行输入参数实例
2014/09/30 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
python flask中静态文件的管理方法
2018/03/20 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
python实现淘宝秒杀脚本
2020/06/23 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
写好自荐信要注意的问题
2013/11/10 职场文书
运动会宣传口号
2014/06/09 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
2015年超市工作总结
2015/04/09 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
Python编程源码报错解决方法总结经验分享
2021/10/05 Python