4.1 《锋利的jQuery》jQuery中的事件

$(document).ready()方法和window.onload方法的区别
事件绑定
合成事件
事件冒泡
事件对象的属性

tip1:停止事件冒泡和阻止默认行为都可以用return false替代。只有当你同时需要preventDefault和stopPropagation，并且你的代码可以接受直到你的回调执行完成才停止执行浏览器的默认行为，那你就可以使用”return false“。

tip2:jquery不支持事件捕获。

tip3:hover()方法准确说是替代jquery中的bind("mouseenter")和bind("mouseleave")，而不是替代bind("mouseover")和bind("mouseout")，所以，当要触发hover方法的第二个函数时需要用trigger("mouseleave");

tip4:jquery1.7版本新增了on(),off(),delegate()和undelegate()事件绑定

1、$(document).ready()方法和window.onload方法的区别

    $(document).ready(function(){

        //代码

    })

//    简写

//    $(function () {

//        //代码

//    });

    window.onload=function(){

        //代码

    }

//    等价于

//    $(window).load(function(){

//        //代码

//    })

①执行时机：前者在DOM完全就绪时就可以被调用，后者是在网页中所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即javascript此时才可以访问网页中的任何元素。（注意：前者当与图片有关的HTML已经解析为DOM树了，但有可能图片未加载完毕，图片的高度和宽度此时不一定有效，这时候使用load()方法，相当于js的onload()）

②多次使用：后者javascript的onload事件一次只能保存对一个函数的引用。前者可以按顺序依次执行。

2、事件绑定

（1）改变绑定事件类型

（2）简写绑定事件

3、合成事件

（1）hover()

（2）toggle()

  $(function(){

//         事件绑定

//       $("#panel h5.head").bind("click",function(){

//           var $content=$(this).next();  //当发现相同的选择器在代码里出现多次时，用变量把它缓存起来。

//           if($content.is(":visible")){

//               $content.hide();

//           }else{

//               $content.show();

//           }

//       })

//      改变绑定事件

//        $("#panel h5.head").bind("mouseover",function(){

//            $(this).next().show();

//        }).bind("mouseout",function(){

//            $(this).next().hide();

//        });

//       简写绑定事件

//       $("#panel h5.head").mouseover(function(){

//           $(this).next().show();

//       }).mouseout(function(){

//           $(this).next().hide();

//       })

//       合成事件hover()

//       $("#panel h5.head").hover(function(){

//           $(this).next().show();

//       },function(){

//           $(this).next().hide();

//       })

//       toggle()

//       $("#panel h5.head").toggle(function(){   //jquery从1.9版本以上就不支持toggle()方法

//           $(this).next().show()

//       },function(){

//           $(this).next().hide();

//       })

//        toggle()还有另一个作用：切换元素的可见状态

       $("#panel h5.head").click(function(){

           $(this).next().toggle();

       })

   });

4、事件冒泡

当<span>、<div>、<body>同时绑定了click事件，在单击<span>元素的同时，<div>和<body>的click事件也同时触发了。

解决办法：

$("span").bind("click",function(event){

           var txt=$("#msg").html()+"<p>内层span元素被单击</p>";

           $("#msg").html(txt);

           event.stopPropagation(); //停止事件冒泡

       });

阻止默认行为：例如，单击超链接后会跳转，单击“提交”type=submit表单会提交：

   $(function(){

        $("#sub").bind("click",function(event){

            var username=$("#username").val();

            if(username==""){

                $("#msg").html("<p>文本框的值不能为空。</p>")

                event.preventDefault(); //阻止表单提交

            }

        })

   });

5、事件对象的属性

event.type

event.preventDefault

event.stopPropagation

event.target

event.relatedTarget

event.pageX和event.pageY

event.which

event.metaKey

..........

6、移除事件

    $(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");  //$("#btn").unbind("");

//        });

//        删除其中一个事件

        $("#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>");

        }).one("click",function(){       //one()方法只触发一次，随后立即解除绑定

            $("#test").append("<p>我的绑定行数4</p>");

        });

        $("#delTwo").click(function(){

            $("#btn").unbind("click",myFun2);

        });

    });

7、模拟操作

//******************************************常用模拟

        $("#btn").bind("click", function () {

            $("#test").append("<p>我的绑定行数1</p>");

        });

//******************************************自定义事件

        $("#btn").bind("myClick",function(){

            $("#test").append("<p>我的绑定行数myClick</p>");

        })

//******************************************传递数据

        $("#btn").bind("myClick1",function(event,message1,message2){

            $("#test").append("<p>我的传参:"+message1+message2+"</p>");

        })

//        页面一加载就触发click事件

        $("#btn").trigger("click"); // 等价于

//        $("#btn").click();

//        页面一加载触发自定义myClick事件

        $("#btn").trigger("myClick");

//        触发传参事件

        $("#btn").trigger("myClick1",["我的自定义","事件"]);

    });

初始化效果：

执行默认操作

trigger()方法触发事件后，会执行浏览器默认操作。例如：$("input").trigger("focus");不仅会触发为<input>元素绑定的focus事件,也会使<input>元素本身得到焦点（这是浏览器的默认操作），如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用

$("input").triggerHandler("focus");

8、其他用法（添加事件命名空间）

    $(function () {

//    绑定多个事件类型

//        $("#div").bind("mouseover mouseout",function(){

//            $(this).toggleClass("red");

//        })

//        等价于

//        $("#div").bind("mouseover",function(){

//            $(this).toggleClass("red");

//        }).bind("mouseout",function(){

//            $(this).toggleClass("red");

//        })

//        添加事件命名空间

//        $("#div").bind("click.plugin",function(){

//            $("body").append("<p>click事件</p>");

//        });

//        $("#div").bind("mouseover.plugin",function(){

//            $("body").append("<p>mouseover事件</p>");

//        });

//        $("#div").bind("dblclick",function(){

//            $("body").append("<p>dbclick事件</p>");

//        });

//        $("#btn").click(function(){

//            $("#div").unbind(".plugin");

//        });

//        相同事件名称，不同命名空间执行方法

        $("#div").bind("click",function(){

            $("body").append("<p>click事件</p>");

        });

        $("#div").bind("click.plugin",function(){

            $("body").append("<p>click.plugin事件</p>");

        });

        $("#btn").click(function(){

//            $("#div").trigger("click!");  //匹配所有不包含在命名空间中的click方法

            $("#div").trigger("click");  //两者都被触发

        })

    });

4.1 《锋利的jQuery》jQuery中的事件的更多相关文章

jquery ajax 中各个事件执行顺序
jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事 ...
jquery ajax中各个事件执行顺序如下
$(function(){ setTimeout(function(){ $.ajax({ url:'/php/selectStudent.php', }); },0); $(document).aj ...
【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行
最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例 ...
原生js实现jquery库中部分事件的功能（jquery库封装二）
继续昨天的封装,今天的部分继昨天选择器之后实现了css样式的获取和添加,attr的获取和添加和一部分事件的封装:只是我自己的理解,不妥之处欢迎大家在评论中提出,相互学习,共同提高 /** * Crea ...
jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...
jQuery中的事件——《锋利的JQuery》
虽然利用原生的JavaScript事件能完成一些交互,但jQuery增加并扩展了基本的事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力. 1.加载DOM 在Ja ...
锋利的jQuery ——jQuery中的事件和动画（四）
一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){} 方法内注册的事件, ...
锋利的jQuery ——jQuery中的DOM操作（三）
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点利用jQuery ...
锋利的JQuery学习之JQuery中的事件
一.加载DOM 在页面加载完毕之后,浏览器会通过javascript为dom元素添加事件,在常规的javascript中使用window.onload方法,而在jQuery中使用的是$(documen ...

随机推荐

dedecms调用文章发布日期
<span>[field:pubdate function="MyDate('m-d',@me)"/]</span>
【唯星宠物】——BootStrap/Mysql/PHP/Ajax爬坑之正则验证登录注册子页
前言:唯星宠物产品官网的登录注册,单独一个子页,页面使用BootStrap实现响应式,PHP提供服务端,利用Ajax技术,从Mysql中获取JSON数据,并对表单信息进行正则验证.项目github地址 ...
Java enum枚举的使用方法
一. 出现背景: 在JDK1.5之前,我们定义常量是这种:public static final String RED = "RED"; 在JDK1.5中增加了枚举类型,我们能够把 ...
通用礼品卡接口文档（KFC、必胜客、GAP等）
通用礼品卡接口文档,集于各商家(KFC.必胜客.GAP等)实体卡和会员卡的API虚拟卡,可用于线上/下消费.移动支付. 1.API 1.1商品列表接口地址:http://v.juhe.cn/gift ...
C/C++中作用域详解（转）
作用域规则告诉我们一个变量的有效范围,它在哪儿创建,在哪儿销毁(也就是说超出了作用域).变量的有效作用域从它的定义点开始,到和定义变量之前最邻近的开括号配对的第一个闭括号.也就是说,作用域由变量所在的 ...
使用Hadoop自己的类操作HDFS
package hdfs; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.I ...
【Android实战】Gallary+ImageSwicther图片查看器
仿照如今各大新闻站点图片新闻的浏览模式,上面展示详细图片(ImageSwitch),以下是能够滑动的小图片(Gallery). 当中须要注意的是ImageSwitch须要定义一个工厂返回的组件,而且能 ...
PM2.5
http://baike.baidu.com/view/1423678.htm PM2.5是指大气中直径小于或等于2.5微米的颗粒物,也称为可入肺颗粒物.虽然PM2.5只是地球大气成分中含量很少的组分 ...
centos6.6安装mysql5.5
在mysql官网下载mysql-5.5.54-linux2.6-x86_64.tar.gz解压:tar -zxvf mysql-5.5.54-linux2.6-x86_64.tar.gz修改名字mv ...
中兴应用之星携手天翼开放平台：让APP开发更简单
日前,业内率先的APP开发平台运营商中兴应用之星与中国电信天翼开放平台达成战略合作.即广大用户通过天翼开放平台,可直接享受到应用之星提供的"APP开发服务". 应用之星.中兴通 ...

4.1 《锋利的jQuery》jQuery中的事件

4.1 《锋利的jQuery》jQuery中的事件的更多相关文章

随机推荐

热门专题