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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
php生成mysql的数据字典
2016/07/07 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python发送邮件脚本
2018/05/22 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
计划生育证明书写要求
2014/09/17 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
学生个人总结范文
2015/02/15 职场文书
免职通知
2015/04/23 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS