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 相关文章推荐
jQuery Ajax文件上传(php)
Jun 16 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
Vue实现Layui的集成方法步骤
Apr 10 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字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php 函数中使用static的说明
2012/06/01 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
求职简历自荐信范文
2013/10/21 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
大专生自我评价
2014/01/28 职场文书
爱情保证书范文
2014/02/01 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
Python Pandas 删除列操作
2022/03/16 Python