`

jQuery 理解

jQuery浏览器CSSJavaScriptIE 
阅读更多

jquery  this的含义 在触发事件的时候，是指向原生态的DOM对象。当触发任何事件处理程序时，关键字this引用的都是携带相应行为的DOM元素。通过在事件处理程序中使用$(this)，可以为相应的元素创建一个jQuery对象，然后就如同使用CSS选择符找到该元素一样对它进行操作。

这段话很明确的说出了this与$(this)的区别，即前者为DOM元素，后者为jQuery对象

 

jquery 也可用click(function(){

 

  }) 代替 bind('click',function(){

 

})

 

toggle 的用法

$('#switcher h3').toggle(function(){
   $('#switcher .button').addClass('hidden');
    }, function(){
     $('#switcher .button').removeClass('hidden');
    })

 

=====

 jQuery中的事件
$("#testDiv4").bind("click", showMsg);
我们为id是testDiv4的元素, 添加列click事件的事件处理函数showMsg.

使用jQuery事件处理函数的好处:

1. 添加的是多播事件委托.  也就是为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数.

            $("#testDiv4").bind("click", function(event) { alert("one"); });
            $("#testDiv4").bind("click", function(event) { alert("two"); });
单击testDiv4对象时, 依次提示"one"和"two".

2. 统一了事件名称. 
添加多播事件委托时, ie中是事件名称前面有"on". 但是使用bind()函数我们不用区分ie和dom ,  因为内部jQuery已经帮我们统一了事件的名称.

3. 可以将对象行为全部用脚本控制.
让HTML代码部分只注意"显示"逻辑. 现在的趋势是将HTML的行为, 内容与样式切分干净. 其中用脚本控制元素行为, 用HTML标签控制元素内容, 用CSS控制元素样式. 使用jQuery事件处理函数可以避免在HTML标签上直接添加事件.

下面是基础的jQuery事件处理函数:

事件处理  Event Handling:

名称 说明 举例
bind( type, [data], fn )
 为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。 当每个段落被点击的时候，弹出其文本:

$("p").bind("click", function(){
  alert( $(this).text() );
});
 
one( type, [data], fn ) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。 当所有段落被第一次点击的时候，显示所有其文本:

$("p").one("click", function(){
  alert( $(this).text() );
});
 
trigger( event, [data] ) 在每一个匹配的元素上触发某类事件。

这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。

你也可以触发由bind()注册的自定义事件
 给一个事件传递参数:


$("p").click( function (event, a, b) {
  // 一个普通的点击事件时，a和b是undefined类型
  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);
 
triggerHandler( event, [data] ) 这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作. 如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作:


$("#old").click(function(){
  $("input").trigger("focus");
});
$("#new").click(function(){
  $("input").triggerHandler("focus");
});
$("input").focus(function(){   $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });
 
unbind( type, fn ) bind()的反向操作，从每一个匹配的元素中删除绑定的事件。


如果没有参数，则删除所有绑定的事件。

你可以将你用bind()注册的自定义事件取消绑定。

如果提供了事件类型作为参数，则只删除该类型的绑定事件。

如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
 把所有段落的所有事件取消绑定:
$("p").unbind()

将段落的click事件取消绑定:
$("p").unbind( "click" )

删除特定函数的绑定，将函数作为第二个参数传入:

var foo = function () {
  // 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
$("p").unbind("click", foo); // ... 再也不会被触发 foo
 

 


五.常用事件函数举例
1.bind( type, [data], fn ) 函数举例
bind()是最常使用的函数,  注意方法签名上data参数, 可以在事件处理之前传递一些附加的数据:

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
注意event参数的使用. jQuery中统一了事件对象, 将事件对象作为事件处理函数的唯一参数传递.

data参数我们也要通过event.data 进行访问.  为何要提供data参数呢?

因为我们经常碰到这样的问题: 希望在事件处理中根据事件源的某些数据进行特殊处理.

目前网上有两种存在争议的解决方法:

(1) 使用自定义元素属性存储数据.

比如:

<div id="testDiv5" customer="customer data 1">获取自定义数据-1</div>

在事件处理函数中获取数据:

$("#testDiv5").bind("click", function(event) { alert($(event.target).attr("customer")); });
attr函数是上一讲中的知识, 用于获取元素的"元素属性", 而且可以获取自定义的元素属性. 单击div后将显示:

 

 

(2) 使用脚本将数据传递给事件处理函数:

<div id="testDiv6">获取自定义数据-2</div>
元素没有任何的自定义属性, 添加事件处理函数时将额外的数据传递:
$("#testDiv6").bind("click", { customer: "customer data 2" }, function(event) { alert(event.data.customer) });
点击div后的结果和方法1相同:

 

方法1便于存储和查找数据. 但是自定义属性通过不W3C验证.

方法2必须要自己想办法存储数据, 并且要制定规则查找指定元素的数据.

从"开发人员"的角度方法1要更加简单直观. 但是缺点比较严重. 所以如何取舍请大家自己决定.

one( type, [data], fn ) 函数和bind一样, 但是只执行一次.

2. trigger( event, [data] ) 和 triggerHandler( event, [data] )
虽然为元素绑定了某些事件, 比如click, 但是有时希望在程序中触发这些事件,  这两个函数可以实现此功能.

主要区别是trigger会出发浏览器默认的动作, 而triggerHandler不会出发.

通过下面的实例可以明确的区分这两个函数:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery事件处理:trigger和triggerHandler示例</title>

    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>

    <script type="text/javascript">
        $(function()
        {
            $("#old").click(function()
            {
                $("#divResult").html("");
                $("input").trigger("focus");
            });
            $("#new").click(function()
            {
                $("#divResult").html("");
                $("input").triggerHandler("focus");
            });
            $("input").focus(function() { $("<span>Focused!</span>").appendTo("#divResult"); });
        })
       
    </script>

</head>
<body>
    <button id="old">
        .trigger("focus")</button>
    <button id="new">
        .triggerHandler("focus")</button><br />
    <br />
    <input type="text" value="To Be Focused" />
    <div id="divResult"></div>
</body>
</html>

当单击".trigger"按钮时, 会调用两次Focesed, 并且input元素获得了焦点:

 

单击".triggerHandler"按钮时, 只调用一次,并且input元素没有获得焦点:

 

也就是说, trigger函数出发了浏览器默认的获取焦点的行为,让input元素获得了焦点, 所以再次调用了focus事件处理函数.

triggerHandler只调用为focus事件绑定的事件处理函数, 而不引发浏览器行为, 所以最后input元素没有获得焦点.


 
六.快捷事件 Event Helpers

BUG提示:jquery-1.3.2-vsdoc2.js 这个最新的官方带智能提示的类库, 无法使用快捷事件, 比如click(), focus(). 使用其他版本的类库则没有问题.

虽然我们可以使用事件处理函数完成对象事件的几乎所有操作, 但是jQuery提供了对常用事件的封装. 比如单击事件对应的两个方法click()和click(fn)分别用来触发单击事件和设置单击事件.

设置单击事件:

$("#testDiv").click(function(event) { alert("test div clicked ! "); });
等效于:

$("#testDiv").bind("click", function(event) { alert("test div clicked ! "); });
触发单击事件:

$("#testDiv").click();
等效于

$("#testDiv").trigger("click");

注意这里等效的是trigger而不是triggerHandler.

此类方法在jQuery中英文叫做Event Helpers, 我找不到很好的翻译方式, 所以按照功能称其为"快捷方法",  征集好的翻译名称!

下面是jQuery的快捷方法列表:

由于都是都是对应的事件, 所以不再写说明和举例了.

名称 说明 举例
blur( )    
blur( fn )    
change( )    
change( fn )    
click( )    
click( fn )    
dblclick( )    
dblclick( fn )    
error( )    
error( fn )    
focus( )    
focus( fn )    
keydown( )    
keydown( fn )    
keypress( )    
keypress( fn )    
keyup( )    
keyup( fn )    
load( fn )    
mousedown( fn )    
mouseenter( fn )    
mouseleave( fn )    
mousemove( fn )    
mouseout( fn )    
mouseover( fn )    
mouseup( fn )    
resize( fn )    
scroll( fn )    
select( )    
select( fn )    
submit( )    
submit( fn )    
unload( fn )    

 

七. 交互帮助方法
除了基本的实践, jQuery提供了两个和事件相关的帮助方法: hover( over, out ) 和 toggle( fn, fn2, fn3,fn4,... )

1. hover( over, out )
hover函数主要解决在原始javascript中mouseover和mouseout函数存在的问题, 看下面这个示例:

 

有两个div(红色区域), 里面分别嵌套了一个div(黄色区域). HTML代码如下:

    <div class="outer" id="outer1">
      Outer 1
      <div class="inner" id="inner1">Inner 1</div>
    </div>
    <div class="outer" id="outer2">
      Outer 2
      <div class="inner" id="inner2">Inner 2</div>
    </div>
    <div id="console"></div>

绑定如下事件:

    <script type="text/javascript">
      function report(event) {
        $('#console').append('<div>'+event.type+'</div>');
      }

      $(function(){
        $('#outer1')
         .bind('mouseover',report)
         .bind('mouseout',report);
        $('#outer2').hover(report,report);
      });
    </script>
Outer1我们使用了mouseover和mouseout事件,  当鼠标从Outer1的红色区域移动到黄色区域时, 会发现虽然都是在outer1的内部移动, 但是却触发了mouseout事件:

 

很多时候我们不希望出现上图的结果,  而是希望只有鼠标在Outer1内部移动时不触发事件, Outer2使用Hover()函数实现了这个效果:

 

注意这里的事件名称进入叫做"mouseenter", 离开叫做"mouseleave", 而不再使用"mouseover"和"mouseleave"事件.

有经验的开发人员会立刻想到在制作弹出菜单时, 经常遇到这个问题: 为弹出菜单设置了mouseout事件自动关闭, 但是鼠标在弹出菜单内移动时常常莫名其妙触发mouseout事件让菜单关闭. hover()函数帮助我们很好的解决了这个问题.

2. toggle( fn, fn2, fn3,fn4,... )
toggle函数可以为对象添加click事件绑定函数,  但是设置每次点击后依次的调用函数。

如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。

可以使用unbind("click")来删除。

下面的示例演示如何使用toggle函数:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>toggle example</title>
    <link rel="stylesheet" type="text/css" href="css/hover.css">

    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>

    <script type="text/javascript">
        $(function()
        {
            $("li").toggle(
              function()
              {
                  $(this).css({ "list-style-type": "disc", "color": "blue" });
              },
              function()
              {
                  $(this).css({ "list-style-type": "square", "color": "red" });
              },
              function()
              {
                  $(this).css({ "list-style-type": "none", "color": "" });
              }
            );
        })
    </script>

</head>
<body>
    <ul>
        <li style="cursor:pointer">click me</li>
    </ul>
</body>
</html>
结果是每点击一次"click me"变换一次列表符号和文字颜色.

 


八.使用jQuery事件对象
使用事件自然少不了事件对象.  因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象.

jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入:

$("#testDiv").bind("click", function(event) {  });
关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events/jQuery.Event

jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target 属性来获取事件的触发者(在IE中使用原生的事件对象, 需要访问event.srcElement).

下面是jQuery事件对象可以在扩浏览器支持的属性:

属性名称 描述 举例
type  事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click. $("a").click(function(event) {
  alert(event.type);
});
target  获取事件触发者DOM对象 $("a[href=http://google.com]").click(function(event) {
  alert(event.target.href);
});
data  事件调用时传入额外参数. $("a").each(function(i) {
  $(this).bind('click', {index:i}, function(e){
     alert('my index is ' + e.data.index);
  });
});
relatedTarget 对于鼠标事件, 标示触发事件时离开或者进入的DOM元素 $("a").mouseout(function(event) {
  alert(event.relatedTarget);
});
currentTarget 冒泡前的当前触发事件的DOM对象, 等同于this. $("p").click(function(event) {
  alert( event.currentTarget.nodeName );
});
结果:P
pageX/Y  鼠标事件中, 事件相对于页面原点的水平/垂直坐标. $("a").click(function(event) {
  alert("Current mouse position: " + event.pageX + ", " + event.pageY );
});
result 上一个事件处理函数返回的值 $("p").click(function(event) {
  return "hey"
});
$("p").click(function(event) {
  alert( event.result );
});
结果:"hey"
timeStamp 事件发生时的时间戳. var last;
$("p").click(function(event) {
   if( last )
      alert( "time since last event " + event.timeStamp - last );
   last = event.timeStamp;
});

上面是jQuery官方文档中提供的event对象的属性. 在"jQuery实战"一书中还提供了下面的多浏览器支持的属性, 时间关系我没有尝试每一个属性, 大家可以帮忙验证是否在所有浏览器下可用:

属性名称 描述 举例
altKey Alt键是否被按下. 按下返回true  
ctrlKey ctrl键是否被按下, 按下返回true  
metaKey Meta键是否被按下, 按下返回true.
meta键就是PC机器的Ctrl键,或者Mac机器上面的Command键  
shiftKey Shift键是否被按下, 按下返回true  
keyCode 对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.

对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠.  
which 对于键盘事件, 返回触发事件的键的数字编码. 对于鼠标事件, 返回鼠标按键号(1左,2中,3右).  
screenX/Y 对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标  

 

事件对象除了拥有属性, 还拥有事件. 有一些是一定会用到的事件比如取消冒泡 stopPropagation() 等.下面是jQuery事件对象的函数列表:

名称 说明 举例
preventDefault()  取消可能引起任何语意操作的事件. 比如<a>元素的href链接加载, 表单提交以及click引起复选框的状态切换. $("a").click(function(event){
  event.preventDefault();
  // do something
});
isDefaultPrevented()  是否调用过
preventDefault()
方法 $("a").click(function(event){
  alert( event.isDefaultPrevented() );
  event.preventDefault();
  alert( event.isDefaultPrevented() );
});
stopPropagation()  取消事件冒泡 $("p").click(function(event){
  event.stopPropagation();
  // do something
});
isPropagationStopped()  是否调用过
stopPropagation()
方法 $("p").click(function(event){
  alert( event.isPropagationStopped() );
  event.stopPropagation();
  alert( event.isPropagationStopped() );
});
stopImmediatePropagation()  取消执行其他的事件处理函数并取消事件冒泡.

如果同一个事件绑定了多个事件处理函数, 在其中一个事件处理函数中调用此方法后将不会继续调用其他的事件处理函数. $("p").click(function(event){
  event.stopImmediatePropagation();
});
$("p").click(function(event){
  // This function won't be executed
});
isImmediatePropagationStopped()  是否调用过
stopImmediatePropagation()
方法 $("p").click(function(event){
  alert( event.isImmediatePropagationStopped() );
  event.stopImmediatePropagation();
  alert( event.isImmediatePropagationStopped() );
});


这些函数中  stopPropagation()  是我们最长用的也是一定会用到的函数. 相当于操作原始event对象的event.cancelBubble=true来取消冒泡.

 

九. 总结

 

 

 

事件是javascript的灵魂, 我花了很久写这篇文章,翻译jQuery官方的API文档. 列表中的很多例子直接从官网上摘抄的,  有些列表中的方法我也没有用过, 所以如果大家发现问题请及时通知我修改.

接下来的文章将分别讲解Ajax和动画效果.  最后通过讲解两个我修改的jQuery插件来学习jQuery的插件开发.
标签：jQuery事件
文章来自学IT网：http://www.xueit.com/html/2009-05/33_2020_00.html


 $('#switcher h3').click(function(){
   $('#switcher .button').toggleClass('hidden');
 })

分享到：
| jquery理解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    深入理解jquery和javascript系列

    深入理解JavaScript和jQuery是Web开发中的重要课题，这两者都是前端开发者不可或缺的工具。JavaScript作为浏览器端的主要脚本语言，负责动态交互，而jQuery则是一个轻量级的库，极大地简化了JavaScript的DOM操作，...

    jquery学习

    在"jquery学习小例子"这个压缩包中，可能包含了各种实际应用场景下的jQuery代码片段，比如动态加载内容、响应式导航菜单、图片轮播等，这些都是通过实践来深化对jQuery理解的好素材。通过分析和运行这些例子，你可以...

    LearningjQuery3FifthEdition

    它不仅适合于那些希望通过jQuery构建交互式网站的初学者，同时也适合于那些希望加深对jQuery理解的有经验的前端开发人员。通过阅读这本书，读者能够获得从基础到高级的各种技巧和知识，从而更高效地使用jQuery来创造...

    Jquery演示 jquerydemo jquery常用

    **jQuery 演示：深入理解与应用** jQuery 是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本篇文章将围绕"jQuery演示"这一主题，深入探讨jQuery的...

    jQuery1.12.4+jQuery中文手册.rar

    - 开发时，可利用未压缩的`jquery-1.12.4.js`进行调试，配合浏览器的开发者工具查看和理解代码执行过程。 - 生产环境中，推荐使用`jquery-1.12.4.min.js`以提高页面加载速度。 - 遇到具体问题时，查阅CHM文件中的API...

    Jquery下載，Jquery-3.5.1

    尽管现代前端开发有其他选择，但理解并掌握 jQuery 对于任何 Web 开发者来说仍然是有价值的，特别是在维护旧项目或处理兼容性问题时。通过下载并学习 jQuery-3.5.1，你可以提升自己的前端开发技能，并更好地理解和...

    jquery例子大全 jquery demo

    在“jQuery例子大全 jQuery demo”这个压缩包中，包含了一系列的示例，旨在帮助用户快速理解和掌握jQuery的核心概念及常用方法。** ### 一、jQuery 基本使用 jQuery 的核心在于它的选择器，它允许我们方便地选取...

    最新版JQuery-jquery-3.2.1.min.js

    在压缩包中的"jQuery API 中文文档3.2.1"，为开发者提供了详细的API文档，帮助理解每个方法的用途、参数和返回值，是学习和使用jQuery的宝贵资源。确保查阅这些文档，以便更好地理解和应用jQuery 3.2.1的新特性。 ...

    jquery-migrate: 迁移旧的jQuery代码至jQuery1.9以上的版本

    通过观察和分析这个示例，你可以更深入地理解`jQuery Migrate`如何工作，并学习如何在自己的项目中应用。 **5. 逐步更新和最佳实践** 虽然`jQuery Migrate`可以帮助你过渡到新版本，但长期依赖它是不可取的。最好...

    jquery各版本，jquery1.3-1.7,jquery文件

    jQuery是一款广泛应用于Web开发的JavaScript库，它极大地简化了...通过学习和比较这些版本，开发者不仅可以了解jQuery的历史，也能深入理解JavaScript库的设计思想和最佳实践，从而更好地利用jQuery进行Web开发。

    jquery-3.5.1.min.js_jquery-3.5.1.min.js_jquery_

    在学习和使用jQuery 3.5.1时，建议从基础入手，理解其核心概念和常用API，然后逐步探索高级特性和插件。同时，结合实际项目进行实践，将理论知识转化为实际技能。通过不断练习，你将会发现jQuery能够让你的...

    从零开始学jquery

    【从零开始学jQuery】这个教程旨在帮助初学者全面理解并掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互，是Web开发中的常用工具。 ### (一) 开天辟地入门篇 在入门...

    Jquery 3.2.1.zip

    在这个"Jquery 3.2.1.zip"压缩包中，包含的是jQuery的最新版本3.2.1的相关资料，对于想要深入理解和运用jQuery的开发者来说，是一份非常宝贵的资源。 首先，让我们了解一下jQuery的核心特性。jQuery简化了DOM操作，...

    jQuery在线试卷答题代码.zip

    《jQuery在线试卷答题代码》是基于JavaScript库jQuery实现的一款多功能的在线考试系统。...通过研究和分析这个项目，开发者可以深入理解如何利用jQuery创建动态、交互的网页应用，尤其是教育和评估类的场景。

    jquery-2.1.4.zip

    这个文件对于初学者来说尤其有用，因为可以清晰地看到每段代码的结构和功能，便于学习和理解jQuery的工作原理。 而"jquery.min.js"则是经过压缩和优化的版本，它去除了所有不必要的空格、换行和注释，使得文件体积...

    jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】

    《jQuery 1.9.1：深入理解与应用》 jQuery，这个JavaScript库，自2006年发布以来，以其简洁的API和强大的功能，迅速成为开发者们首选的前端工具之一。本篇文章将深入探讨jQuery 1.9.1版本，包括其核心特性、性能...

    关于dom和jquery对象理解

    ### 关于DOM与jQuery对象的理解 #### DOM简介 在探讨DOM与jQuery之间的关系之前，我们首先需要明确什么是DOM（Document Object Model）。DOM是一种用于表示HTML或XML文档的标准接口，它提供了一种方式来读取、操作...

    经典jquery案例 经典jquery

    "经典jquery案例 经典jquery"这个主题涵盖了几个实用且常见的jQuery应用，通过这些案例，我们可以深入理解jQuery的强大功能和便捷性。 首先，"可编辑表格"是网页交互中常见的一种功能，jQuery可以轻松实现这一需求...

    jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】

    《jQuery 3.0.0：深入理解与应用》 jQuery，这个JavaScript库，自2006年发布以来，已经成为了Web开发中不可或缺的一部分。它以其简洁的API和强大的功能，极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。在...

Magicbox
Global site tag (gtag.js) - Google Analytics