1.加载DOM
在常规的JavaScript中，使用window.onload方法；而在jQuery中，使用$(document).ready(function(){ })方法。
window.onload与$(document).ready()的不同：
● 执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
● 编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 。它会默认用后面的函数覆盖前面的函数。
$(document).ready()可以同时编写多个，并且都可以得到执行

● 简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

2.事件绑定
在文档加载完成后，如果打算为元素绑定事件来完成某些操作，可以使用bind()方法对匹配元素进行特定事件的绑定。

bind()的调用格式：

bind(type [,data] ,fn);

type：代表事件类型，类型包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseinter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。

data：可选参数，作为event.data属性值传递给事件对象的额外数据对象

fn：有来绑定处理的函数

<body>

<!-- 第1种效果-->

<div id="panel">

    <h5 class="head">什么是jQuery？</h5>

    <div class="content" style="display: none">

        jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写的更少,做的更多)。

    jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript

    高手加入，现在由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，

    在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

    </div>

</div>

<hr />

<!-- 第2种效果-->

<div id="panel_2">

    <h5 class="head">什么是jQuery？</h5>

    <div class="content" style="display: none">

        jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写的更少,做的更多)。

    jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript

    高手加入，现在由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，

    在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

    </div>

</div>

<script type="text/javascript">

    //光标滑过时显示，离开隐藏

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

        $(this).next("div.content").show();

    });

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

        $(this).next("div.content").hide();

    });

    //单击以改变是否显示

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

        if($(this).next("div.content").is(":visible")){//如果显示

            $(this).next("div.content").hide();

        }else{

            $(this).next("div.content").show();

        }

    });

</script>

</body>

3.合成事件

● hover()方法

　　hover()方法的语法结构：hover(enter, leave);

　　hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发enter函数；当光标移出这个元素时，会触发leave函数。

● toggle()方法

　　toggle()方法的语法结构：toggle(fn1, fn2,...,fnN);

　　toggle()方法用于模拟鼠标连续单击事件。第一次单击元素时，触发fn1函数，当再次单元素时，触发fn2函数；如果有更多函数，则依次触发，直到最后一个。

4.事件冒泡

事件冒泡现象重现：

<body>

<div id="content">

    外层div元素

    <span>内层span元素</span>

    外层div元素

</div>

<div id="msg"></div>

<script type="text/javascript">

    //为span元素绑定事件

    $("#content span").bind("click", function(){

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

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

    });

    //为span元素绑定事件

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

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

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

    });

    //为span元素绑定事件

    $("body").bind("click", function(){

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

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

    });

</script>

</body>

停止事件冒泡：

<script type="text/javascript">

    //为span元素绑定事件

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

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

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

        event.stopPropagation();

    });

    //为span元素绑定事件

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

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

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

        event.stopPropagation();

    });

    //为span元素绑定事件

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

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

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

        event.stopPropagation();

    });

</script>

当单击元素时，事件对象event就被创建了。这个事件对象只有在事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被毁弃。

5.事件对象的属性

1)event.type:该方法的作用是可以获取到事件的类型

$("a").bind("click",function(){

    console.log(event.type);   //输出为click

    return false;

});

2)event.preventDefault()   阻止默认的事件行为  （JavaScript中符合w3c规范中的preventDefault()方法在IE中无效）

3)event.stopPropagation()  阻止时间的额冒泡 （JavaScript中符合w3c规范中的stopPropagation()方法在IE中无效）

4)event.target  获取到触发事件的元素

5)event.relatedTarget  如在mouseover事件触发时,相关的元素,如另外一个mouseout元素

6)event.pageX和event.pageY   获取到光标相对于页面的x坐标和y坐标

7)event.which()  在鼠标单击事件中获取到鼠标的左中右键

8)event.metaKey  判断事件是否包含ctrl按键

9)event.originalEvent()  指向原始的事件对象

6.移除事件：unbind()
7.模拟操作：使用trigger()方法模拟事件
● 常用模拟
　　模拟单击事件：$("#btn").trigger("click");（简化：$("#btn").click();）
● 触发自定义事件:

HTML：

<script type="text/javascript">

    //为Button绑定单击事件

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

        $("#test").append("<p>我自定义的事件<p>");

    });

    //触发自定义事件

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

</script>

● 传递数据

<script type="text/javascript">

    //为Button绑定单击事件

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

        $("#test").append("<p>"+message1+message2+<p>");

    });

    //触发自定义事件

    #("#btn").trigger("myClick" ,["我自定义的", "事件"]);//传递两个参数

</script>

8.添加事件命名空间，便于管理

<script type="text/javascript">

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

        $("#test").append("<p>"+message1+message2+<p>");

    });

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

        $("#test").append("<p>"+message1+message2+<p>");

    });

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

        $("#test").append("<p>"+message1+message2+<p>");

    };

    #("#btn").unbind(".plugin");//移除plugin命名空间下的事件

</script>

（八）jQuery中的事件的更多相关文章

  1. Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

  2. jQuery中的事件监听方式及异同点

    jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...

  3. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  4. jQuery：详解jQuery中的事件（二）

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  5. jQuery：详解jQuery中的事件（一）

    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

  6. jQuery学习笔记（三）jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  7. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  8. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  9. jQuery中的事件机制深入浅出

    昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...

  10. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

随机推荐

  1. [usaco dec 15] 卡牌游戏 cardgame [贪心]

    题面: 传送门 思路: 这道题官方标准解法是线段树维护一堆奇奇怪怪的东西......我用的是贪心 方法很简单,处理出pre和suf数组,分别代表前i张.后i张牌在最优方案下打出时可以得到的分数,然后两 ...

  2. react输入框输入中文bug

    一般来说,react上我们都会用change事件去处理input的输入,但这样就导致一个问题,在输入中文的时候,我们还没输入完成就会触发change事件,这样显然不是理想状况. 那么,怎么解决这个问题 ...

  3. js确保正确this的几种写法

    1.直接用bind调用 this.method.bind(this) 2.构造函数中用bind定义 class Foo{ constructor(){ this.method = this.metho ...

  4. ssh（安全协议外壳）

    以下来源于百度百科 https://baike.baidu.com/item/ssh/10407?fr=aladdin SSH 为 Secure Shell 的缩写,由 IETF 的网络小组(Netw ...

  5. POJ3104 Drying

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 13703   Accepted: 3527 Description It i ...

  6. 洛谷 P1653 == COGS 2043 猴子

    P2107 可爱的猴子 时间限制:1000MS  空间限制:65535KB 问题描述: 树上有n只猴子.它们编号为 1 到n.1 号猴子用它的尾巴勾着树枝.剩下的猴子都被其他的猴子用手抓着.每只猴子的 ...

  7. win10易升卸载

  8. activeMQ队列模式和主题模式的Java实现

    一.队列模式 生产者 import javax.jms.Connection; import javax.jms.ConnectionFactory; import javax.jms.Destina ...

  9. nodejs Centos环境搭建

    使用二进制文件安装: node 环境下载 https://nodejs.org/en/download/ 下载里面的windows 安装包 和 linux 安装包 1)windows安装 window ...

  10. 腾讯云使用liveRoom开启直播时，报“房间已存在”错误？

    利用腾讯云roomService服务,移动直播,创建房间api,CreateRoom时有时报“房间已存在”错误. 分析流程发现,CreateRoom会传入roomId到roomService后台,后台 ...