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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
Javascript之datagrid查询详解
Sep 15 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+ajax实现无刷新分页的方法
2014/11/04 PHP
smarty中常用方法实例总结
2015/08/07 PHP
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
Python实现批量转换文件编码的方法
2015/07/28 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
大二自我鉴定
2014/01/31 职场文书
药店主任岗位责任制
2014/02/10 职场文书
合作意向书模板
2014/03/31 职场文书
实习单位鉴定评语
2014/04/26 职场文书
科技之星事迹材料
2014/06/02 职场文书
讲党性心得体会
2014/09/03 职场文书
奖学金个人总结
2015/03/04 职场文书
检讨书模板大全
2015/05/07 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python