jQuery笔记——事件
常用的事件有:click、dblclick、 mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、 keypress、keyup、blur、focus、load、resize、scroll、error等等
jQuery 通过.bind()方法来为元素绑定这些事件。可以传递三个参数:bind(type, [data], fn), type 表示一个或多个类型的事件名字符串;[data]是可选的,作为 event.data 属性值传递一个 额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;fn 表示绑定到指定元素的处理函数
//使用点击事件
$('input').bind('click', function () { //点击按钮后执行匿名函数
alert('点击!');
});
还可以绑定多个事件
//可以同时绑定多个事件
$('input').bind('mouseout mouseover', function () { //移入和移出分别执行一次
$('div').html(function (index, value) {
return value + '1';
});
});
使用 unbind 删除绑定的事件
//使用 unbind 删除绑定的事件
$('input').unbind(); //删除所有当前元素的事件
//使用 unbind 参数删除指定类型事件
$('input').unbind('click'); //删除当前元素的 click 事件
简写事件
jQuery 封装了常用的事件以便节约更多的代码
部分事件简写:
方法名 | 触发条件 | 事件 |
click(fn) | 鼠标 | 触发每一个匹配元素的 click(单击)事件 |
dblclick(fn) | 鼠标 | 触发每一个匹配元素的 dblclick(双击)事件 |
mousedown(fn) | 鼠标 | 触发每一个匹配元素的 mousedown(点击后)事件 |
mouseup(fn) | 鼠标 | 触发每一个匹配元素的 mouseup(点击弹起)事件 |
mouseover(fn) | 鼠标 | 鼠标触发每一个匹配元素的 mouseover(鼠标移入)事件 |
mouseout(fn) | 鼠标 | 触发每一个匹配元素的 mouseout(鼠标移出)事件 |
mousemove(fn) | 鼠标 | 触发每一个匹配元素的 mousemove(鼠标移动)事件 |
mouseenter(fn) | 鼠标 | 触发每一个匹配元素的 mouseenter(鼠标穿过)事件 |
mouseleave(fn) | 鼠标 | 触发每一个匹配元素的 mouseleave(鼠标穿出)事件 |
keydown(fn) | 键盘 | 触发每一个匹配元素的 keydown(键盘按下)事件 |
keyup(fn) | 键盘 | 触发每一个匹配元素的 keyup(键盘按下弹起)事件 |
keypress(fn) | 键盘 | 触发每一个匹配元素的 keypress(键盘按下)事件 |
scroll(fn) | 文档 | 触发每一个匹配元素的 scroll(滚动条拖动)事件 |
focus(fn) | 表单 | 触发每一个匹配元素的 focus(焦点激活)事件 |
blur(fn) | 表单 | 触发每一个匹配元素的 blur(焦点丢失)事件 |
select(fn) | 表单 | 触发每一个匹配元素的 select(文本选定)事件 |
change(fn) | 表单 | 触发每一个匹配元素的 change(值改变)事件 |
submit(fn) | 表单 | 触发每一个匹配元素的 submit(表单提交)事件 |
mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么 jQuery 还封装了另外 一组:.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有 什么区别呢?.mouseenter()和.mouseleave()这组穿过子元素不会触发, 而.mouseover()和.mouseout()则会触发
HTML 页面设置:
//HTML 页面设置
<div style="width:200px;height:200px;background:green;">
<p style="width:100px;height:100px;background:red;"></p>
</div>
<strong></strong>
jQuery文件进行比较:
//mouseover 移入
$('div').mouseover(function () { //移入 div 会触发,移入 p 再触发
$('strong').html(function (index, value) {
return value+'1';
});
}); //mouseenter 穿过
$('div').mouseenter(function () { //穿过 div 或者 p
$('strong').html(function (index, value) { //在这个区域只触发一次
return value+'1';
});
}); //mouseout 移出
$('div').mouseout(function () { //移出 p 会触发,移出 div 再触发
$('strong').html(function (index, value) {
return value+'1';
});
}); //mouseleave 穿出
$('div').mouseleave(function () { //移出整个 div 区域触发一次
$('strong').html(function (index, value) {
return value+'1';
});
});
.keydown()、.keyup()返回的是键码,而.keypress()返回的是字符编码
$('input').keydown(function (e) {
alert(e.keyCode); //按下 a 返回 65
});
$('input').keypress(function (e) {
alert(e.charCode); //按下 a 返回 97
});
事件对象
事件对象就是 event 对象,通过处理函数默认传递接受。之前处理函数的 e 就是 event 事件对象
event 对象的属性 :
//通过 event.type 属性获取触发事件名
$('input').click(function (e) {
alert(e.type);
});
//通过 event.target 获取绑定的 DOM 元素
$('input').click(function (e) {
alert(e.target);
});
//通过 event.data 获取额外数据,可以是数字、字符串、数组、对象
$('input').bind('click', 123, function () { //传递 data 数据
alert(e.data); //获取数字数据
});
冒泡和默认行为
冒泡:
如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题
HTML 页面 :
//HTML 页面
<div style="width:200px;height:200px;background:red;">
<input type="button" value="按钮" />
</div>
jQuery文件:
//三个不同元素触发事件
$('input').click(function () {
alert('按钮被触发了!');
});
$('div').click(function () {
alert('div 层被触发了!');
});
$(document).click(function () {
alert('文档页面被触发了!');
});
注意:当我们点击文档的时候,只触发文档事件;当我们点击 div 层时,触发了 div 和 文档两个;当我们点击按钮时,触发了按钮、div 和文档。触发的顺序是从小范围到大范围。 这就是所谓的冒泡现象
jQuery 提供了一个事件对象的方法:event.stopPropagation();这个方法设置到需要触发 的事件上时,所有上层的冒泡行为都将被取消
$('input').click(function (e) {
alert('按钮被触发了!');
e.stopPropagation();
});
默认行为:
网页中的元素,在操作的时候会有自己的默认行为。比如:右击文本框输入区域,会弹 出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据,jQuery 提供了一个事件对象的方法:event.preventDefault();这个方法可以阻止默认行为
$('a').click(function (e) {
e.preventDefault();
});
//禁止提交表单跳转
$('form').submit(function (e) {
e.preventDefault();
});
注意:如果想让上面的超链接同时阻止默认行为且禁止冒泡行为,可以把两个方法同时 写上:event.stopPropagation()和 event.preventDefault()。这两个方法如果需要同时启用的时候, 还有一种简写方案代替,就是直接 return false
$('a').click(function (e) {
return false;
});
事件委托
在 jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素) 上,然后再进行相关处理即可.法在 jQuery1.7 版本之后 ,使用.on()方法
on、off 和 one
jQuery1.7 以后推出了.on()和.off()方法来前绑定事件(或者是事件委托)和解绑的方法
使用.on来替代.bind()方式 :
//替代.bind()方式
$('.button').on('click', function () {
alert('替代.bind()');
});
//替代.bind()方式,并使用额外数据和事件对象
$('.button').on('click', {user : 'Lee'}, function (e) {
alert('替代.bind()' + e.data.user);
});
//替代.bind()方式,并绑定多个事件
$('.button').on('mouseover mouseout', function () {
alert('替代.bind()移入移出!');
});
//替代.bind()方式,以对象模式绑定多个事件
$('.button').on({
mouseover : function () {
alert('替代.bind()移入!');
},
mouseout : function () {
alert('替代.bind()移出!');
}
});
//替代.bind()方式,阻止默认行为并取消冒泡
$('form').on('submit', function () {
return false;
});
或
$('form').on('submit', false);
//替代.bind()方式,阻止默认行为
$('form').on('submit', function (e) {
e.preventDefault();
});
//替代.bind()方式,取消冒泡
$('form').on('submit', function (e) {
e.stopPropagation();
});
使用.off替代.unbind()方式,移除事件:
//替代.unbind()方式,移除事件
$('.button').off('click');
$('.button').off('click', fn);
$('.button').off('click.abc');
//替代.live()和.delegate(),事件委托
$('#box').on('click', '.button', function () {
$(this).clone().appendTo('#box');
});
//替代.die()和.undelegate(),取消事件委托
$('#box').off('click', '.button');
不管是.bind()还是.on(),绑定事件后都不是自动移除事件的,需要通过.unbind()和.off() 来手工移除。jQuery 提供了.one()方法,绑定元素执行完毕后自动移除事件,可以方法仅触发一次的事件
//类似于.bind()只触发一次
$('.button').one('click', function () {
alert('one 仅触发一次!');
});
jQuery笔记——事件的更多相关文章
- jQuery 自定义事件的学习笔记
jquery中提供了两种方法可以绑定自定义事件: bind()和one()而绑定的自定义事件的触发,必须得用jquery中的trigger()方法才能触发. 我们先来看on事件 代码如下 复制代码 ...
- jQuery基础笔记 事件(6)
day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-6 事件 ***** 1. 目前为止学过的绑定 ...
- jQuery的事件绑定与触发 - 学习笔记
jQuery的事件绑定与触发 事件绑定 自动触发事件 常用的鼠标事件 事件冒泡和默认行为 事件冒泡 默认行为 获得当前鼠标的位置和按键 jQuery的事件绑定与触发 事件绑定 基本绑定 $(eleme ...
- JQuery笔记汇总
jQuery相关资料 官网: jQuery官网 在线API: jQuery在线API W3School:W3School-jQuery教程(中文版哦) 下载jQuery:jQuery各版本下载 jQu ...
- Jquery笔记和ajax笔记
Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...
- 前端:jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...
- jQuery笔记之 Ajax回调地狱
本次演示回调地狱: 模拟电影网站,判断用户是否为该网址的vip用户(最高权限为vip) 如果vpi就展示出vip电影,点击相应的电影显示出该电影的详细介绍 ---------------------- ...
- Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
随机推荐
- angular-schema-form 自动表单生成
基本用法 通过bower安装之后,将schemaForm模块载入到模块定义中,fuse中安装第三方包需要在app/core/core.module.js中声明. 然后在controller里面,将sc ...
- 分享知识-快乐自己:Ajax 跨域请求处理
<%-- Created by IntelliJ IDEA. User: asus Date: 2019/1/24 Time: 15:57 To change this template use ...
- 【转】Java设计模式-单例模式详解
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6510196.html 所谓单例,指的就是单实例,有且仅有一个类实例,这个单例不应该由人来控 ...
- 解析session与cookie
Session和Cookie相关概念 Session和Cookie都是有服务器生成的. Session和Cookie都是键值对形式保存,主要用于存储特定的一些状态值. Session保存在服务器,Co ...
- 【Demo】CSS图像拼合技术
图像拼合 图像拼合 - 简单实例 <style> img.home { width: 46px; height: 44px; background: url(/images/img_nav ...
- bootstrap 操作提示placeholder
Javascript 部分 function checkForDefaultAlertPlaceholder() { if ($("#alertPlaceholder").leng ...
- UI- UIView控件知识点回顾
// 通过一个frame来初始化一个UI控件 - (id)initWithFrame:(CGRect)frame; // YES:能够跟用户进行交互 @property(nonatomic,gett ...
- 【MFC】VC界面绘制双缓存
VC界面绘制双缓存 转载请注明原文网址: http://www.cnblogs.com/xianyunhe/archive/2011/11/20/2255811.html 1.闪屏的问题在GDI的绘图 ...
- Weex入门篇——Mac 安装Weex
相关文档:http://blog.csdn.net/jasonblog/article/details/51863173 前言 相比较于React Native的“Learn once, write ...
- vue指令总结
new Vue({ el: "#box", // element(元素) 当前作用域 data:{ msg:" ...