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 相关文章推荐
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
javascript使用call调用微信API
Dec 15 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
js仿京东放大镜效果
Aug 09 Javascript
JS闭包原理及其使用场景解析
Dec 03 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
js charAt的使用示例
2014/02/18 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
党风廉政承诺书
2014/03/27 职场文书
公司员工离职证明书
2014/10/04 职场文书
推广普通话主题班会
2015/08/17 职场文书
2016年国陪研修感言
2015/11/18 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技