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的面向对象(二)
Nov 09 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
js实现拖拽元素选择和删除
Aug 25 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP 选项及相关信息函数库
2006/12/04 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
javascript数组的扩展实现代码集合
2008/06/01 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
python list使用示例 list中找连续的数字
2014/01/27 Python
python实现自动发送邮件
2018/06/20 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
如何基于python实现归一化处理
2020/01/20 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
一些Solaris面试题
2015/12/22 面试题
企业总经理岗位职责
2014/02/13 职场文书
影视广告专业求职信
2014/09/02 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
安全承诺书
2015/01/19 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
php访问对象中的成员的实例方法
2021/11/17 PHP