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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
javascript中的delete使用详解
Apr 11 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
js实现消息滚动效果
Jan 18 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 Javascript
JavaScript流程控制(循环)
Dec 06 Javascript
vue使用echarts实现折线图
Mar 21 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
用PHP实现图象锐化代码
2007/06/14 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
一个javascript图片阅览组件
2010/11/09 Javascript
js DOM的学习笔记
2011/12/22 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
用python爬取租房网站信息的代码
2018/12/14 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
简历上的自我评价怎么写
2014/01/28 职场文书
幼师求职信
2014/06/23 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python