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读取XML文件数据并显示的实现代码
Dec 16 Javascript
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
深入解析ES6中的promise
Nov 08 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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 数字左侧自动补0
2008/03/31 PHP
PHP 文件上传全攻略
2010/04/28 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
yii添删改查实例
2015/11/16 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
javascript prototype 原型链
2009/03/12 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中list常用操作实例详解
2015/06/03 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Python基础教程之异常详解
2019/01/10 Python
Python如何实现动态数组
2019/11/02 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
python使用建议技巧分享(三)
2020/08/18 Python
单位介绍信范文
2014/01/18 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
安全教育实施方案
2014/03/02 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书