锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件：
1.加载DOM：注意window.onload和$(document).ready()的不同
2.事件绑定
3.合成事件
--2和3的详细信息见代码-
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body> <div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div> </body> <script type="text/javascript"> /**
* 4.1 加载DOM
* 主要是注意window.onload和$(document).ready()的区别
* */ /**
* 4.2 事件绑定
* 在文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配的元素进行特定事件的绑定，
* bind()方法的调用格式为“
* bind( type [, data, fn]);
* 第1个参数是事件类型，类型包括：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypass、keyup和error等，当然也可以自定义名称。
* 第2个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象
* 第3个参数是用来绑定的处理函数
* */
//基本效果
// $(function () {
// $("#panel h5.head").bind("click", function() {
// $(this).next().show();
// });
// })
//加强效果
// $(function () {
// $("#panel h5.head").bind("click", function() {
// if($(this).next().is(":visible")) {
// $(this).next().hide();
// } else {
// $(this).next().show();
// }
// });
// })
//引入局部变量
// $(function () {
// $("#panel h5.head").bind("click", function() {
// var $content = $(this).next();
// if($content.is(":visible")) {
// $content.hide();
// } else {
// $content.show();
// }
// });
// })
//改变绑定事件的类型
// $(function() {
// $("#panel h5.head").bind("mouseover", function () {
// $(this).next().show();
// }).bind("mouseout", function() {
// $(this).next().hide();
// })
// })
//简写绑定事件
// $(function() {
// $("#panel h5.head").mouseover(function() {
// $(this).next().show();
// }).mouseout(function() {
// $(this).next().hide();
// })
// }) /**
* 4.3 合成事件
* jQuery有两个合成事件---hover()方法和toggle()方法
* */ /**
* 4.3.1 hover()方法
* hover()方法的语法结构为：hover(enter, leave);
* hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数(enter);当光标移出这个元素时，会触发指定的第2个函数(leave)。
* */
// $(function () {
// $("#panel h5.head").hover(function() {
// $(this).next().show();
// }, function() {
// $(this).next().hide();
// })
// }) /**
* 4.3.2 toggle()方法
* toggle()方法的语法结构为：toggle(fn1, fn2, ...fnN);
* toggle()方法用于模拟鼠标连续单击事件。第1次单击元素，触发指定的第1个函数(fn1);当再次点击同一元素时，则触发指定的第2个函数(fn2);
* 如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。
*
* 该方法在1.9被移除
* 解决方法是使用jQuery迁移插件，项目地址为: https://github.com/jquery/jquery-migrate/
* */
$(function() {
$("#panel h5.head").toggle(function() {
$(this).next().show();
},function() {
$(this).next().hide();
})
}) </script> </html>
4.事件冒泡
5.事件对象属性
6.移除事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px; }
#content { width: 220px; border: 1px solid #0050D0;background: #96E555 }
span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;}
p {width:200px;background:#888;color:white;height:16px;}
</style>
</head> <body> <div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div> <!--阻止默认行为 -->
<form action="demo1.html">
用户名: <input type="text" id="userName" />
<input type="submit" value="提交" id="sub" />
</form> <div id="msg"></div> <br/><br/>
<a>test</a> <br/><br/>
<button id="btn">点击我</button>
<br/> <button id="delAll">删除所有事件</button>
<button id="delTwo">删除第二个事件</button>
<div id="test"></div>
</body> <script type="text/javascript"> /**
* 4.4 事件冒泡
* */ /**
* 单击span元素时，会造成事件冒泡。
* */
// $(function () {
// //为span元素绑定click事件
// $("span").bind("click", function() {
// var txt = $("#msg").html() + "<p>内层span元素被单击</p>";
// $("#msg").html(txt);
// });
// //为div元素绑定click事件
// $("#content").bind("click", function() {
// var txt = $("#msg").html() + "<p>外层div元素被单击</p>";
// $("#msg").html(txt);
// })
// //为body元素绑定click事件
// $("body").bind("click", function() {
// var txt = $("#msg").html() + "<p>body元素被单击</p>";
// $("#msg").html(txt);
// })
// })
/**
* 停止事件冒泡
* */
// $(function () {
// //为span元素绑定click事件
// $("span").bind("click", function(event) {
// var txt = $("#msg").html() + "<p>内层span元素被单击</p>";
// $("#msg").html(txt);
// event.stopPropagation();//阻止冒泡
// //or
// return false;//阻止冒泡
// });
// //为div元素绑定click事件
// $("#content").bind("click", function(event) {
// var txt = $("#msg").html() + "<p>外层div元素被单击</p>";
// $("#msg").html(txt);
// event.stopPropagation();//阻止冒泡
// //or
// return false;//阻止默认行为
// })
// //为body元素绑定click事件
// $("body").bind("click", function() {
// var txt = $("#msg").html() + "<p>body元素被单击</p>";
// $("#msg").html(txt);
// })
// }) /**
* 阻止默认行为
* */
// $(function () {
// $("#sub").bind("click", function(event) {
// var username = $("#userName").val();
// if(username == "") {
// $("#msg").html("<p>文本框的值不能为空</p>");
// //event.preventDefault();//阻止默认行为
// //or
// return false;//阻止默认行为
// }
// })
// }) /**
* 4.5 事件对象的属性
* */ /**
* 4.5.1 event.type
* 该方法是获取到事件的类型
* */
// $("a").click(function (event) {
// alert(event.type);//获取事件类型---输出为click
// return false;//阻止链接跳转
// }) /**
* 4.5.2 event.preventDefault()方法
* 阻止默认的行为
* */ /**
* 4.5.3 event.preventPropagation()方法
* 阻止事件的冒泡
* */ /**
* 4.5.4 event.target
* 获取触发事件的元素
* */
// $("a[href='http://www.baidu.com']").click(function (event) {
// var tg = event.target();//获取事件对象
// alert(tg.href);
// return false;//阻止跳转
// }) /**
* 4.5.5 event.relatedTarget
* 在标准的DOM中，mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素是通过event.relatedTarget来访问的。
* event.relatedTarget在mouseover中相当于IE浏览器的event.fromElement,在mouseout中相当于IE浏览器的event.toElement,
* jQuery对其进行了封装，使之能兼容各种浏览器
* */ /**
* 4.5.6 event.pageX和event.pageY
* 该方法的作用是获取到光标相对于页面的x坐标和y坐标。
* */
// $("a").click(function (event) {
// //获取鼠标当前相对于页面的坐标
// alert("Current mouse position: " + event.pageX + ", " + event.pageY);
// return false;
// }) /**
* 4.5.7 event.which
* 该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键
* */
// $("a").mousedown(function (event) {
// alert(event.which);// 1 = 鼠标左键 2 = 鼠标中键 3 = 鼠标右键
// })
//获取键盘按键
// $("#userName").keyup(function (event) {
// alert(event.which);
// }) /**
* 4.6 移除事件--unbind方法
* 语法结构：unbind([type], [data])
* 说明：
* 1.如果没有参数，则删除所有的事件
* 2.如果提供了事件类型作为参数，则只删除该类型的绑定事件
* 3.如果把绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数或被删除。
* */
// //为同一个元素绑定多个相同的事件
// $(function () {
// $("#btn").bind("click", function () {
// $("#test").append("<p>我的绑定函数1</p>");
// }).bind("click", function () {
// $("#test").append("<p>我的绑定函数2</p>");
// }).bind("click", function () {
// $("#test").append("<p>我的绑定函数3</p>");
// })
// });
//
// //移除按钮元素上以前注册的事件
// $("#delAll").click(function () {
// $("btn").unbind("click");//因为绑定的都是click事件，所以不写参数也可以达到同样的目的。-$("btn").unbind();
// }); // //移除button元素的其中一个事件。首先需要为匿名的绑定函数指定一个变量
// $(function () {
// $("#btn").bind("click", myFun1 = function () {
// $("#test").append("<p>我的绑定函数1</p>");
// }).bind("click",myFun2 = function () {
// $("#test").append("<p>我的绑定函数2</p>");
// }).bind("click",myFun3 = function () {
// $("#test").append("<p>我的绑定函数3</p>");
// })
// });
//
// $("#delTwo").click(function () {
// $("btn").unbind("click", myFun2);
// }); // //one()方法
// $(function () {
// $("#btn").one("click", function () {
// $("#test").append("<p>我的绑定函数1</p>");
// }).one("click", function () {
// $("#test").append("<p>我的绑定函数2</p>");
// }).one("click", function () {
// $("#test").append("<p>我的绑定函数3</p>");
// })
// });
/**
* 4.7 模拟操作
* 在jQuery中，可以使用trigger()方法来完成模拟操作。
* */ // //触发id为btn的按钮的chick事件
// $(function () {
// $("#btn").bind("click", function () {
// $("#test").append("<p>我的绑定函数1</p>");
// }).bind("click", function () {
// $("#test").append("<p>我的绑定函数2</p>");
// }).bind("click", function () {
// $("#test").append("<p>我的绑定函数3</p>");
// });
// $("#btn").trigger("click");
// //or
// $("#btn").click();
// }) // //触发自定义事件
// $(function () {
// $("#btn").bind("myClick", function () {
// $("#test").append("<p>我的自定义事件</p>");
// });
// $("#btn").trigger("myClick");
// }) // //传递数据
// $(function () {
// $("#btn").bind("myClick", function (event, message1, message2) {
// $("#test").append("<p>" + message1 + message2 + "</p>");
// });
// $("#btn").trigger("myClick", ["我的自定义 ", "事件"]);
// }) // //执行默认操作.trigger()方法触发事件后，会执行浏览器默认操作
// $("input").trigger("focus");
// //上述代码不仅会触发为<input>绑定的focus事件，也会使<input>元素本身得到焦点(这是浏览器的默认操作)
// //如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法---triggerHandler()
// $("input").triggerHandler("focus");
// //该方法只会触发<input>元素上绑定的focus事件，同时取消浏览器对此事件的默认操作，即文本框只触发绑定的focus事件，不会得到焦点。 /**
* 4.8 其他用法
* */ /**
* 4.8.1 绑定多个事件类型
* */
$(function () {
$("div").bind("mouseover mouseout", function () {
$(this).toggleClass("over");
})
}) /**
* 4.8.2 添加命名空间，便于管理
*
* 在绑定的事件类型后面添加命名空间，这样在删除事件时只需要指定命名空间即可。
* */
$(function () {
$("div").bind("click.plugin", function () {
$("body").append("<p>click事件</p>");
});
$("div").bind("mouseover.plugin", function () {
$("body").append("<p>mouseover事件</p>");
});
$("div").bind("dblclick.plugin", function () {
$("body").append("<p>dblclick事件</p>");
}); $("button").click(function () {
$("div").unbind(".plugin");
});
}) /**
* 4.8.3 相同事件名称，不同命名空间执行方法
* 可以为元素绑定相同的事件类型，然后以命名空间的不同按需调用
* */
$(function () {
$("div").bind("click", function () {
$("body").append("<p>click事件</p>");
});
$("div").bind("click.plugin", function () {
$("body").append("<p>click.plugin事件</p>");
}); $("button").click(function () {
$("div").trigger("click!");//注意click后面的感叹号，匹配所有不包含在命名空间中的click方法
});
}) /**
* 单击div时，会同时触发click事件和click.plugin事件。
* 如果只是单击button只触发click事件。如果想两者都触发，则去掉感叹号即可.
* */
</script> </html>
锋利的jQuery读书笔记---jQuery中的事件的更多相关文章
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 锋利的jQuery读书笔记---jQuery中动画
jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> < ...
- 锋利的jQuery读书笔记---jQuery中操作DOM
一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
- Javascript & JQuery读书笔记
Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...
- jquery学习笔记---jquery插件开发
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...
- 《编写可维护的javascript》读书笔记（中）——编程实践
上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...
- 《Android源代码设计模式解析》读书笔记——Android中你应该知道的设计模式
断断续续的,<Android源代码设计模式解析>也看了一遍.书中提到了非常多的设计模式.可是有部分在开发中见到的几率非常小,所以掌握不了也没有太大影响. 我认为这本书的最大价值有两点,一个 ...
随机推荐
- 对于python的内存管理的好文章
http://www.cnblogs.com/vamei/p/3232088.html 包含了一个绘制关系图的包
- gulp-css-spriter 雪碧图合成
一.配置 gulp的雪碧图功能没有grunt那么强大,但是类似功能也支持,功能稍微弱一些,但是也很棒 npm地址:https://www.npmjs.com/package/gulp-css-spri ...
- java基础知识回顾之---java String final类普通方法的应用之“两个字符串中最大相同的子串”
/* * 3,两个字符串中最大相同的子串. * "qwerabcdtyuiop" * "xcabcdvbn" * * 思路: * 1,既然取得是最大子串,先看 ...
- Android 使用MediaRecorder录音
package com.example.HyyRecord; import android.app.Activity; import android.content.Intent; import an ...
- 手把手VirtualBox虚拟机下安装rhel6.4 linux 64位系统详细文档
下面演示安装的是在VirtualBox里安装rhel 6.4 linux 64位系统. 一.VirtualBOX 版本. 二.虚拟机的配置. 1.现在开始演示安装,一起从零开始.点击“新建”,创建新的 ...
- cojs 疯狂的魔法树 疯狂的颜色序列 题解报告
疯狂的魔法树 一个各种操作大杂烩的鬼畜数据结构题目 首先我们注意到树的形态是半随机的 我们可以树分块,对树分成若干个块 对于每个块我们维护一个add标记表示增量 维护一个vis标记表示覆盖量 注意标记 ...
- 大陆 Google play 开发者注册（2016）
1:准备一个VPN, 如: https://vpnso.com 收费的,使用一两年了,还不错,很稳定2:准备一张普通的银行卡或者信用卡就可以了,能正常绑定支付宝就行3:在全球付上面申请一个 虚拟 ...
- SaaS系列介绍之十一: SaaS商业模式分析
1 配置模式 中国企业很多是人治,管理弹性非常大,公司的政策经常变化,管理流程.业务变化也非常大,发展也非常快;一个公司今年是10个人,明年是100个人,后年可能是1000人.管理机制.方法处于经常变 ...
- *[codility]MissingInteger
今天开始刷刷codility上respectable的题目,难度适中. https://codility.com/demo/take-sample-test/missing_integer 本题是找出 ...
- compiler 学习
一款强大的编译器LLVM:http://llvm.org/docs/GettingStarted.html#layout http://llvm.org/docs/LangRef.html http: ...