jQuery事件_动力节点Java学院整理


Posted in jQuery onJuly 05, 2017

因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码。

浏览器在接收到用户的鼠标或键盘输入后,会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数,该函数就会自动调用。

由于不同的浏览器绑定事件的代码都不太一样,所以用jQuery来写代码,就屏蔽了不同浏览器的差异,我们总是编写相同的代码。

举个例子,假设要在用户点击了超链接时弹出提示框,我们用jQuery这样绑定一个click事件:

/* HTML:
 *
 * <a id="test-link" href="#0" rel="external nofollow" >点我试试</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:按一次键后触发。

其他事件

focus:当DOM获得焦点时触发; blur:当DOM失去焦点时触发; change:当<input>、<select><textarea>的内容改变时触发; submit:当<form>提交时触发; ready:当页面被载入并且DOM树完成初始化后触发。
其中,ready仅作用于document对象。由于ready事件在DOM完成初始化后触发,且只触发一次,所以非常适合用来写其他的初始化代码。假设我们想给一个<form>表单绑定submit事件,下面的代码没有预期的效果:

<html>
<head>
 <script>
  // 代码有误:
  $('#testForm).on('submit', function () {
   alert('submit!');
  });
 </script>
</head>
<body>
 <form id="testForm">
  ...
 </form>
</body>

因为JavaScript在此执行的时候,<form>尚未载入浏览器,所以$('#testForm)返回[],并没有绑定事件到任何DOM上。
所以我们自己的初始化代码必须放到document对象的ready事件中,保证DOM已完成初始化:

<html>
<head>
 <script>
  $(document).on('ready', function () {
   $('#testForm).on('submit', function () {
    alert('submit!');
   });
  });
 </script>
</head>
<body>
 <form id="testForm">
  ...
 </form>
</body>

这样写就没有问题了。因为相关代码会在DOM树初始化后再执行。
由于ready事件使用非常普遍,所以可以这样简化:

$(document).ready(function () {
 // on('submit', function)也可以简化:
 $('#testForm).submit(function () {
  alert('submit!');
 });
});

甚至还可以再简化为:

$(function () {
 // init...
});

上面的这种写法最为常见。如果你遇到$(function () {...})的形式,牢记这是document对象的ready事件处理函数。
完全可以反复绑定事件处理函数,它们会依次执行:

$(function () {
 console.log('init A...');
});
$(function () {
 console.log('init B...');
});
$(function () {
 console.log('init C...');
});

事件参数

有些事件,如mousemove和keypress,我们需要获取鼠标位置和按键的值,否则监听这些事件就没什么意义了。所有事件都会传入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);

需要特别注意的是,下面这种写法是无效的:

// 绑定事件:
a.click(function () {
 alert('hello!');
});

// 解除绑定:
a.off('click', function () {
 alert('hello!');
});

这是因为两个匿名函数虽然长得一模一样,但是它们是两个不同的函数对象,off('click', function () {...})无法移除已绑定的第一个匿名函数。

为了实现移除效果,可以使用off('click')一次性移除已绑定的click事件的所有处理函数。

同理,无参数调用off()一次性移除已绑定的所有类型的事件处理函数。

事件触发条件

一个需要注意的问题是,事件的触发总是由用户操作引发的。例如,我们监控文本框的内容改动:

var input = $('#test-input');
input.change(function () {
 console.log('changed...');
});

当用户在文本框中输入时,就会触发change事件。但是,如果用JavaScript代码去改动文本框的值,将不会触发change事件:

var input = $('#test-input');
input.val('change it!'); // 无法触发change事件

有些时候,我们希望用代码触发change事件,可以直接调用无参数的change()方法来触发该事件:

var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件

input.change()相当于input.trigger('change'),它是trigger()方法的简写。

为什么我们希望手动触发一个事件呢?如果不这么做,很多时候,我们就得写两份一模一样的代码。

浏览器安全限制

在浏览器中,有些JavaScript代码只有在用户触发下才能执行,例如,window.open()函数:

// 无法弹出新窗口,将被浏览器屏蔽:
$(function () {
 window.open('/');
});

这些“敏感代码”只能由用户操作来触发:

var button1 = $('#testPopupButton1');
var button2 = $('#testPopupButton2');

function popupTestWindow() {
 window.open('/');
}

button1.click(function () {
 popupTestWindow();
});

button2.click(function () {
 // 不立刻执行popupTestWindow(),100毫秒后执行:
 setTimeout(popupTestWindow, 100);
});

当用户点击button1时,click事件被触发,由于popupTestWindow()click事件处理函数内执行,这是浏览器允许的,而button2click事件并未立刻执行popupTestWindow(),延迟执行的popupTestWindow()将被浏览器拦截。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jquery实现抽奖功能
Oct 22 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 #jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 #jQuery
jquery拖动改变div大小
Jul 04 #jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 #jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 #jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery简介_动力节点Java学院整理
Jul 04 #jQuery
You might like
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
laravel model 两表联查示例
2019/10/24 PHP
PHP 实现重载
2021/03/09 PHP
JavaScript 继承的实现
2009/07/09 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
jQuery设计思想
2017/03/07 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
Python 异常处理实例详解
2014/03/12 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
python定义类self用法实例解析
2020/01/22 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
公司成立感言
2014/01/11 职场文书
2014年电厂工作总结
2014/12/04 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle