jQuery——事件操作
事件绑定
1、简单事件绑定
$("button").click(function () {})//可重复绑定,不会被层叠
2、bind():不推荐使用
$("button").bind("click mouseenter",function () {})//可通过绑定多个事件,但是事件源必须存在文档中
3、delegate()
$(".parentBox").delegate("p", "click", function(){}) //父元素下绑定子元素事件
$("button").delegate("click",function () {})//支持动态创建元素
4、on()
$(.parentBox).on( "click",“span”, function() {}) //父元素下绑定子元素事件
$(selector).on(events,[selector],[data],handler) //data是传递给函数的数据,event.data可调用
$("button").on("click",function () {})//支持动态创建元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$("div").on("click", "button:eq(0)", function () {
alert("11");
});
$("button:eq(1)").on("click", function () {
alert(22);
});
});
</script>
</head>
<body>
<div>
<button>点击1</button>
<button>点击2</button>
</div>
</body>
</html>
事件解绑
1、unbind()
$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件
2、undelegate()
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
3、off()
$(selector).off();// 解绑匹配元素的所有事件
$(selector).off(“click”);// 解绑匹配元素的所有click事件
$(selector).off( “click”, “**” ); // 解绑所有代理的click事件,元素本身的事件不会被解绑
事件触发
1、简单事件触发
$(selector).click(); //触发 click事件
2、trigger():触发浏览器行为
$(selector).trigger(“click”);
3、triggerHandler():不触发浏览器行为
$(selector).triggerHandler(“focus”);//不会触发默认行为,只会执行函数体的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.1.js"></script>
<script>
//input注册的focus事件虽然被处罚,但是光标并没有进入标签内
$(function () {
$("input").focus(function () {
alert("input注册的focus被触发")
});
$("button").click(function () {
$("input").triggerHandler("focus");
});
});
</script>
</head>
<body>
<button>手动触发事件</button>
<input type="text">
</body>
</html>
事件对象
event.data //传递给事件处理程序的额外数据
event.currentTarget //等同于this,当前DOM对象
event.pageX //鼠标相对于文档左部边缘的位置
event.target //触发事件源,不一定===this
event.stopPropagation(); //阻止事件冒泡
event.preventDefault(); //阻止默认行为
event.type //事件类型:click,dbclick…
event.which //鼠标的按键类型:左1 中2 右3
event.keyCode //键盘按键代码
jQuery——事件操作的更多相关文章
- jQuery 事件操作
入口函数 使用$(document).ready(()=>{})作为jQuery入口函数,与window.onload(()=>{})类似,但它不会等待图片等外部资源的加载完毕,而是在HT ...
- jQuery操作标签,jQuery事件操作,jQuery动画效果,前端框架
jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...
- jQuery事件操作
bind绑定事件 bind(type,data,fn) [参数描述] type (String) : 事件类型 data (Object) : (可选) 作为event.data属性值传递给事件对象的 ...
- 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 ...
随机推荐
- 转载 - Struts2拦截器配置
出处:http://blog.csdn.net/axin66ok/article/details/7321430 目录(?)[-] 理解拦截器 1 什么是拦截器 2 拦截器的实现原理 拦截器的配置 使 ...
- 关于static静态块的使用和static list的使用
public class CorsConfiguration { /** * Wildcard representing <em>all</em> origins, metho ...
- 每日五题(jsp)
1.forward 和 redirect 的差别 答: 1.从地址栏显示来说 forward是server请求资源,server直接訪问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容 ...
- MVC路由中特殊URL匹配规则
*匹配*用来匹配URL剩余部分 贪婪匹配规则贪婪匹配会找到最后一个符合条件的“字面量”为止
- POJ 3683 Priest John's Busiest Day (2-SAT+输出可行解)
题目地址:POJ 3683 第一次做须要输出可行解的题目. . .大体思路是先用强连通来推断是否有可行解,然后用逆序建图.用拓扑排序来进行染色.然后输出可行解. 详细思路见传送门 由于推断的时候少写了 ...
- 尊重百度的api语音合成规则
屏幕显示字幕内容与形式 和 字幕的播放时长分离 : 去除标点符号的影响 # 设置分句的标志符号:可以根据实际需要进行修改 # cutlist = ".!?".decode('ut ...
- 20170623_oracle备份和恢复_常见问题
1 为什么需要备份?备份分类? 1)故障.迁移.误操作 2)备份分类: 物理与逻辑角度:物理备份.逻辑备份 备份策略角度:完全备份.增量备份.差异备份 2 使用导入导出进行备份和恢复及其四种模式:其他 ...
- 数据库操作语句大全(sql)
一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...
- bzoj 1822 冷冻波
题目大意: 在游戏中,巫妖是一种强大的英雄,它的技能Frozen Nova每次可以杀死一个小精灵 我们认为,巫妖和小精灵都可以看成是平面上的点. 当巫妖和小精灵之间的直线距离不超过R,且巫妖和小精灵的 ...
- bzoj 1935 Tree 园丁的烦恼
题目大意: 一些点,每次查询一个矩形内有多少个点 思路: 因为空间太大 所以不能用什么二维树状数组 需要把这些点和所有查询的矩阵的左下和右上离线下来 先离散化 然后每个子矩阵像二维前缀和那样查询 按照 ...