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 form 验证函数 弹出对话框形式
Jun 23 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
Openlayers实现地图的基本操作
Sep 28 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
介绍几个array库的新函数 php
2006/12/29 PHP
php xml-rpc远程调用
2008/12/19 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
浅谈django orm 优化
2018/08/18 Python
python实现维吉尼亚算法
2019/03/20 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python连接PostgreSQL过程解析
2020/02/09 Python
python脚本和网页有何区别
2020/07/02 Python
django和flask哪个值得研究学习
2020/07/31 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
装潢设计专业推荐信模板
2013/11/26 职场文书
廉政教育心得体会
2014/01/01 职场文书
创新比赛获奖感言
2014/02/13 职场文书
个人工作表现评语
2014/04/30 职场文书
离婚协议书格式
2014/11/21 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
员工开除通知书
2015/04/25 职场文书