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事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
js断点调试经验分享
Dec 08 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
js笔试题-接收get请求参数
Jun 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Python备份Mysql脚本
2008/08/11 Python
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
python标准库OS模块详解
2020/03/10 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
澳大利亚百货公司:David Jones
2018/02/08 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
写好自荐信的几个要点
2013/12/26 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
安徽导游词
2015/02/12 职场文书
python中如何对多变量连续赋值
2021/06/03 Python