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入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
JavaScript运行原理分析
Feb 09 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
如何利用React实现图片识别App
Feb 18 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
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
详解JavaScript的变量
2019/04/04 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
python基础 range的用法解析
2019/08/23 Python
python实现logistic分类算法代码
2020/02/28 Python
Django models文件模型变更错误解决
2020/05/11 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
老公给老婆的道歉信
2014/01/10 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
保护环境的建议书
2014/03/12 职场文书
运动员口号
2014/06/09 职场文书
实习生矿工检讨书
2014/10/13 职场文书
领导工作表现评语
2015/01/04 职场文书
迎新生欢迎词
2015/01/23 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
卫生主题班会
2015/08/14 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js