jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力

一. jQuery的事件

1. $(document).ready(function(){})加载方式

再次回到window.onload和$(document).ready(function(){})的比较中,后者是jQuery最重要的事件函数。

(1)执行时机

$(document).ready(function(){})是待DOM就绪时马上可以执行。不一位置这些元素已经完全下载完成。一个简单的例子就是:图片可能没下载完毕,但是jq就可以调用了。
另外,诸如图片未加载完毕,导致涉及图片宽高的属性无法被jq调用,可以使用load()方法。
1
$(window).load(function(){})
以上在用法和执行时机方面等价于window.onload。

(2)多次使用

window.onload在一个js文件中只能用一次,后面的会覆盖掉前面的。
但是$(document).ready(function(){})可以多次调用,按照顺序执行。

(3)简写

$(document).ready(function(){})的简写就是$(function(){})。

2. 事件的绑定——bind方法。

某个元素需要绑定一个事件时,需要bind方法。

1
bind(type,[.data],fn);

bind方法三个参数:

第一个是事件类型(包括blur、focus、load、resize.....)——JavaScript的事件把on去掉就是jQuery的事件

第二个参数可选作为event.data。
第三个是处理函数

(1)效果

【例4.1】在一个FAQ中单击标题显示内容。

 
1
2
3
4
5
6
7
8
<div id="panel">
    <h5 class="head">bind(type,[data],fn)意味着什么?</h5>
    <div class="content">
        <p><strong>type:</strong> 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。</p>
        <p><strong>data:</strong>作为event.data属性值传递给事件对象的额外数据对象</p>
        <p><strong>fn:</strong>绑定到每个匹配元素的事件上面的处理函数</p>
    </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
*{
    margin:0; padding:0;
}
#panel{
    width: 600px;
    border:1px solid #ccc;
    margin: 50px auto;
}
h5{
    line-height: 40px;
    font-size: 20px;
    background: rgb(123,192,244);
    padding-left: 10px;
}
.content{
    display: none;
    padding: 10px;
}

jq

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
    var bShow=false;
    $('#panel h5.head').bind('click',function(){
        if(bShow==false){
            $('.content').show();
        }else{
            $('.content').hide();
        }
        bShow=!bShow;
    })
})

(2)加强效果

上一段jq代码用了一个布尔值来实现点击显示隐藏。在jq中有自己的办法is(':visible')。同时让内容换成next()函数。

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
    $('#panel h5.head').bind('click',function(){
        if($(this).next().is(':visible')){
            $(this).next().hide();
        }else{
            $(this).next().show();
        }
    })
})

(3)改变绑定事件的类型。

例4.1中,运用的是click点击事件,同样可以换成其它。比如mouseover/mouseout。

(4)简写

前面前面章节的案例中已经用过简写,诸如xxx.bind(事件,function(){})都可以简写为

1
2
3
xxx.事件(function(){
    do sth
})

唯一的区别就是代码量。

3.合成事件

hover和toggle——后者在1.8+版本不再支持。

(1)hover()方法

hover(fn1,fn2)

hover用于模拟鼠标悬停/离开的过程,悬停时触发fn1,离开时触发fn2。如果我想把例4.1的代码改写成悬停离开的形式,可以使用hover

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
    $('#panel h5.head').hover(
        function(){
            $(this).next().show();
        },function(){
            $(this).next().hide();
        }
    )
})

hover的目标不是替代mouseover和mouseout。hover是指分别当鼠标指针进入和离开元素时被执行的事件相当于mouseenter+mouseleave。而mouseover鼠标进入某个元素或其子元素时触发。

(2)toggle()方法(已废弃,稍微了解下)

toggle(fn1,fn2,fn3....)

第一次单击触发fn1,第二次触发fn2...

4. 事件对象的属性

jq引入也event参数————它其实是一个只有事件处理函数才能访问的事件对象。函数执行完毕后,event将被销毁。

(1)event.type——可以获取事件的类型

(2)event.preventDefault()方法—阻止默认行为

jq提供了preventDefaut方法。

表单是阻止默认行为最多的地方之一。

1
2
3
4
<form id="form1" action="http://djtao.top/wordpress" method="get">
用户名:<input type="text" name="user"/>
密码:<input type="password" name="pass"/>
<input type="submit" value="提交" />

这里的代码中,点击提交按钮,就会跳转到form预定的网址。我们需要在用户名和密码为空的时候,阻止跳转。

1
2
3
4
5
6
7
8
$(function(){
    $(':submit').click(function(event){
        if($('#form1 :text').val()==''||$('#form1 :password').val()==''){
            alert('用户名或密码不得为空!');
            event.preventDefault();
        }
    })
})

这二者如果要同时进行,或者不影响彼此的话,可以return false。

(3)event.stopPropagation()方法———阻止事件冒泡

理解事件冒泡

简单地说就是多个有直系从属关系的对象响应同一个事件。子集发生事件后不断往父级传递。最具体的对象首先被响应。事件冒泡给实际应用带来麻烦。

阻止事件冒泡在js中运用的是cancelBubble方法。通过引入event——

1
2
var oEvent=ev||event;
oEvent.cancelBubble=true;

在jQuery中,提供了stopPropagation。

1
event.sotpPropagation();

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

比如一个超链接中href指向一个网址。以此对象采用$('a').target得到的是这个网址。

(5)event.relatedTarget

在事件中涉及的其它任何DOM元素。
对于 mouseout 事件,它指向被进入的元素;对于 mousein 事件,它指向被离开的元素。

(6)event.pageX和event.pageY

获取鼠标相对于页面的x和y坐标。在js中通常是event.clientX和event.clientY。注意:如果有滚动条,还需要加上滚动条的高度。这里的event可以理解为就是光标。

(7)event.which

有三个值1,2,3,分别代表获取鼠标点击的左中右键。

(8)event.metaKey

获取键盘事件中的ctrl键。

5. 如何移除事件——unbind()方法

1
unbind(type,[data|fn]])

第一个参数type表示事件类型,第二个表示要移除的函数。

如果什么参数都不写,直接移除所有的绑定事件。假设绑定的点击事件有fn1和fn2两个函数,如下:

1
$('#btn').unbind('click',fn1);

按钮btn在被点击时,不再执行名字为fn1的函数。fn2依然在点击时继续执行。

对于仅仅执行一次的函数,可以不用bind方法来绑定。而用one()方法。

1
$('#btn').one('click',fn1);

btn在被点一次之后,再怎么点都不会执行fn1了。

6.模拟操作————trigger()方法

(1)trigger()方法介绍

常见的比如当用户鼠标划过某处就加载页面时弹出第二个页面,或者按下enter执行发送信息。就调用了模拟click的方法。

1
$('#btn').trigger('click');

按钮btn在没被点击时(也许页面加载同时),就发生了click事件——很讨厌对吧。

(2)自定义事件

trigger()方法相当有意思。你可以自行DIY一个事件,然后用trigger()执行。

1
2
$('#btn').bind('haha',function(){...});
$('#btn').trigger('haha');

(3)参数的传递

1
<input id="btn" type="button" value="haha" />
1
2
3
4
5
6
$(function(){
    $('#btn').bind('haha',function(event,a,b){
        $('html').append('<p>两者之和是:'+(a+b)+'</p>')
    });
    $('#btn').trigger('haha',[1,1]);
})

显示结果:

这跟调用函数又好像没什么区别了。

(4)默认行为

trigger可以模拟操作。得到不一样的体验。设想一个场景,当你在web聊天室发送消息,可以通过ctrl+enter模拟点击发送按钮。

但是有个问题,比如说使用focus事件,会导致焦点移动到事件对象处——这时需要阻止。应采用

triggerHandler()方法,用法和trigger一样。

7.bind的其它用法

(1)多个事件类型绑定:

1
2
3
4
5
$(function(){
    $('#btn').bind('mouseover mouseout',function(event,a,b){
        $(this).toggleClass('hover')
    });
})

也就是说,相同的函数,不同的事件,可以写在一起。

(2)命名空间

也就是前面说的DIY一个事件,其实可以作为命名空间。

1
2
3
4
5
6
7
8
$(function(){
    $('#btn1').bind('click.haha dbclick',function(){
        do something
    });
    $('#btn2').click(function(){
               $('#btn1').unbind('.haha')
    });
})

以上代码只取消了click事件(通过命名空间)但不取消dbclick事件。

(3)相同事件,不同命名空间

把上面的代码改一改;

1
2
3
4
5
6
7
$(function(){
    $('#btn1').bind('click.haha',fn1)
            .bind('click',fn2);
    $('#btn2').click(function(){
        $('#btn1').trigger('click!');
    });
})

如果单击btn1,click和click.haha两个函数都发生。单击btn2,只发生没有命名空间的click事件。因此fn1不会发生。

第4章 jQuery的事件和动画(1)——事件篇的更多相关文章

  1. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  2. 第三章 jQuery事件和动画

    1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...

  3. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  4. 第4章 jQuery中的事件和动画

    4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...

  5. 第3章 jquery中的事件和动画

    一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...

  6. 第七章 jQuery中的事件与动画

    事件的分类 基础事件: 鼠标事件 键盘事件 window事件 表单事件 复合事件: 鼠标光标悬停 鼠标连续点击 基础事件: 实例: mouseenter()和mouseover()用法的区别: mou ...

  7. jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

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

  8. jQuery_第五章_事件和动画

    Jquery中的事件与动画 一.window.onload和$(document).read()的细微差别 (1)执行时机 window.onload:所有元素(包括元素的所有关联文件)完全加载到浏览 ...

  9. jQuery系列 第五章 jQuery框架动画特效

    第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...

随机推荐

  1. you-get中文说明

    来源于:https://github.com/soimort/you-get/wiki/%E4%B8%AD%E6%96%87%E8%AF%B4%E6%98%8E You-Get 乃一小小哒命令行程序, ...

  2. 【BZOJ 2190】【SDOI 2008】仪仗队 欧拉筛

    欧拉筛模板题 #include<cstdio> using namespace std; const int N=40003; int num=0,prime[N],phi[N]; boo ...

  3. 【ACdream 1187】Rational Number Tree(树,递归)

    有理数的树,根节点是1/1,左儿子是1/2,右儿子是2/1....求给定的分数是第几个,或者给定n求第n个分数.递归.给定的分数,每次递归,如果分子比较小,就用分母减去分子,并且这是左儿子.反之是右儿 ...

  4. 虚拟机NAT模式无法上网问题的解决办法

    在使用CentOS虚拟机时,出现了无法上网的情况,使用主机ping虚机地址可以ping通,而虚机ping不通主机,同时虚机也无法ping通其他的网址或ip,显示内容为Network is unreac ...

  5. subroutines of perl

    #!/usr/bin/perl -w @students = qw/Doreen Oskar Elin Sangeet Malin/; &next_student; &next_stu ...

  6. spring-HelloWorld

    准备工作,安装SpringIDE,找到SpringSource-tool-suit,然后按照, 关键的一部在与找到之后该安转那些呢,答案是只安转带有SpringIDE的, 有四个,且不要点击联网进行更 ...

  7. poj2187 旋转卡(qia)壳(ke)

    题意:求凸包的直径 关于对踵点对.旋转卡壳算法的介绍可以参考这里: http://www.cnblogs.com/Booble/archive/2011/04/03/2004865.html http ...

  8. PHP漏洞全解

    针对PHP的网站主要存在下面几种攻击方式: 1.命令注入(Command Injection) 2.eval注入(Eval Injection) 3.客户端脚本攻击(Script Insertion) ...

  9. BackGroundWorker控件的使用注意

    该控件有三个事件: DoWork .ProgressChanged 和 RunWorkerCompleted 在程序中调用RunWorkerAsync方法则会启动DoWork事件的事件处理,当在事件处 ...

  10. C#实现 Eval

    主要是使用 CSharpCodeProvider,动态调用来进行返回. 首先会拼接成一个类的一个方法,然后返回这个方法的值.不过,因为还是使用反射,所以效率不高. public static clas ...