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 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 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使用curl获取https请求的方法
2015/02/11 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
[00:14]护身甲盾
2019/03/06 DOTA
Python psutil模块简单使用实例
2015/04/28 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python简单验证码识别的实现方法
2019/05/10 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
基于Pytorch SSD模型分析
2020/02/18 Python
启动一个线程是用run()还是start()
2016/12/25 面试题
专业毕业生个性的自我评价
2013/10/03 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
关于期中考试的反思
2014/02/02 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
物业保安员岗位职责
2014/03/14 职场文书
元旦寄语大全
2014/04/10 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
信息技术国培研修日志
2015/11/13 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript