jQuery事件操作
bind绑定事件
bind(type,data,fn)
【参数描述】
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数
// bind 参数都是选传的,接收参数e.data
$('button').bind('click',{'a':'b'},fn)
function fn(e) {
console.log(e.data)
console.log(e.data.a)
} $('button').bind('click',fn)
function fn(e) {
console.log('wahaha')
}
// 简写的事件名称当做方法名
$('button').click({'a':'b'},fn)
function fn(e) {
console.log(e.data)
console.log(e.data.a)
} $('button').click(fn)
function fn(e) {
console.log('wahaha')
}
解绑事件
$(选择器).unbind(type,fn);
【参数说明】
type (String) : (可选) 事件类型
fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
【描述】
1. bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
2. 如果没有参数，则删除所有绑定的事件。
3. 如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
常见事件
click(function(){...}) // 单机事件
blur(function(){...}) // 失去焦点
focus(function(){...}) // 获得焦点
change(function(){...}) // input框鼠标离开时内容改变触发
keyup(function(){...}) // 按下的键盘触发事件 27对应的是esc键 获取键盘编号 e.keyCode
mouseover/mouseout // 如果给父元素绑定了over事件,那么这个父元素如果有子元素,每一次进入子元素也 触发父元素的over事件
mouseenter/mouseleave = hover(function(){...}) //鼠标的悬浮
事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
<style>
.outer{
width: 300px;
height: 300px;
background-color: red;
}
.inner{
width: 100px;
height: 100px;
background-color: forestgreen;
}
</style>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
<script>
$('.outer').click(
function () {
alert('outer')
})
$('.inner').click(
function (e) {
alert('inner')
// e.stopPropagation() //阻止事件冒泡方法1
return false //阻止事件冒泡方法2
})
</script>
常用的组织事件冒泡的方式
【方式一】通过返回false来取消默认的行为并阻止事件起泡。
举例：
$("form").bind("submit", function() { return false; })
【方式二】通过event.preventDefault() 方法阻止事件起泡
举例：
$("form").bind("submit", function(event){
event.stopPropagation();
});
事件委托
原理：利用冒泡的原理，把事件加到父级上，触发执行效果。
作用：
1.性能要好 2.针对新创建的元素，直接可以拥有事件
事件源 :
跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的
使用情景：
为DOM中的很多元素绑定相同事件；
为DOM中尚不存在的元素绑定事件；
语法：
on(events,selector,data,fn);
events( String) : 一个或多个空格分隔的事件类型
selector( String) : 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素
data: 当一个事件被触发时，要传递给事件处理函数的event.data。
fn:回调函数
******这里一定要注意的是，selector，这里是放选择器，不是放jQuery对象******
【举例】
$('div').on('click','button',{'a':'b'},function (event) {
console.log(event.data)
alert('不许点')
})
相当于把button元素的点击事件委托给了父元素div
后添加进来的button也能拥有click事件
页面加载
document.onload = function(){
//js 代码
}
window.onload = function () {
$('button').click(function () {
alert('不许点')
})
}
onload要等到所有的文档 音视频都加在完毕才触发
onload只能绑定一次
//jquery的方式,只等待文档加载完毕之后就可以执行,在同一个html页面上可以多次使用
$(document).ready(
function () {
//文档加在完毕之后能做的事情
})
//jquery的方式(简写)*****
$(function () {
//文档加在完毕之后能做的事情
})
//示例
$(function () {
$('button').click(function () {
alert('不许点')
})
})
//jquery中等待所有的资源包括视频 音频都加载完才执行function中的代码,可以使用多次
$(window).ready(
function () {
alert('123')
})
each
each() 方法规定为每个匹配元素规定运行的函数。
jQuery提供的each方法是对参数中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用。
语法结构
$(selector).each(function(index,element))
【举例】
<body>
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</body>
<script>
$('li').each(
function (ind,dom) { //主动传ind是每项的索引,dom是每一项的标签对象
console.log(ind,dom)
}
)
</script>
jQuery事件操作的更多相关文章
- jQuery 事件操作
入口函数 使用$(document).ready(()=>{})作为jQuery入口函数,与window.onload(()=>{})类似,但它不会等待图片等外部资源的加载完毕,而是在HT ...
- jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架
jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...
- jQuery——事件操作
事件绑定 1.简单事件绑定 $("button").click(function () {})//可重复绑定,不会被层叠 2.bind():不推荐使用 $("button ...
- jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
- Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
- [jQuery学习系列四 ]4-Jquery学习四-事件操作
前言:今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席 云集 听道 推酷 青年中国说 SELF格致论道 参考:http://www.365 ...
- Jquery基础之事件操作
事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事 ...
- 事件冒泡及事件委托的理解（JQuery Dom操作）
jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...
- JQuery操作样式以及JQuery事件机制
1.操作样式 1.1 css的操作 功能:设置或者修改样式,操作的是style属性 操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...
随机推荐
- idea操作mysql数据库添加汉字时出现乱码解决方案
首先 然后 最后 在连接数据库后面加一个指定编码格式 编码格式: characterEncoding=UTF-8
- 多规格商品SKU 组件封装
前言 做电商项目呢,离不开多规格商品,SKU 也是弄了许久才搞出来,主要是多层级的联动关系,用ID和库存来判断是否是按钮禁止状态 下面就放下代码: 以封装的小程序为例: WXML: <view ...
- 【JZOJ5603】【NOI2018模拟3.27】Xjz
题目描述 给定字符串 S 和 T. 串A和串B匹配的定义改为:存在一个字符的映射,使得A应用这个映射之后等于B,且这个映射必须为一个排列. A=121, B=313,当映射为{1->3, 2-& ...
- CodeForces 792C - Divide by Three [ 分类讨论 ]
删除最少的数位和前缀0,使得剩下的数能被3整除 等价于各数位数字之和能被3整除. 当前数位和可能是 0, 1, 2(mod 3) 0: 直接处理 1: 删除一个a[i]%3 == 1 或者 两个a[i ...
- .Net面向对象（OOP）
序言 virtual虚方法 virtual 关键字用于在基类中修饰方法.virtual的使用会有两种情况: 情况1:在基类中定义了virtual方法,但在派生类中没有重写该虚方法.那么在对派生类实例的 ...
- cookbook 6.2 定义常量
任务: 需要定义一些模块级别的变量(比如命名的常量),而且客户代码无法将其重新绑定: 解决方案: #coding = utf-8 class _const(object): class ConstEr ...
- 欧拉函数（线性筛）（超好Dong）
欧拉函数:对于一个正整数n,小于n且和n互质的正整数(包括1)的个数,记作φ(n) . #include <bits/stdc++.h> using namespace std; cons ...
- 21.Python算术运算符及用法详解
算术运算符是处理四则运算的符号,在数字的处理中应用得最多.Python 支持所有的基本算术运算符,如表 1 所示. 表 1 Python常用算术运算符 运算符 说明 实例 结果 + 加 12.45 + ...
- VMware中出现物理内存不足，无法使用配置的设置开启虚拟机解决方案
前几天给大家分享了如何在VMware中安装CentOS系统,后来有小伙伴在群里咨询,当新建虚拟机之后,打开虚拟机会弹出“物理内存不足,无法使用配置的设置开启虚拟机”的问题,如下图所示.这里会给出提示, ...
- spark-sql cli 参数 及使用
很难找到spark-sql cli使用的教程,总结下一.启动方法/data/spark-1.4.0-bin-cdh4/bin/spark-sql --master spark://master:707 ...