首页 > 代码库 > 锋利的jQuery读书笔记---jQuery中的事件
锋利的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.mamicode.com/‘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>");// })// });</script></html>
//未完待续
锋利的jQuery读书笔记---jQuery中的事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。