※ [本文转录自 Web_Design 看板] 作者: TonyQ (沉默是金) 看板: Web_Design 标题: [心得]从 js 到 jQuery 之三 补充资料 时间: Sat Aug 9 23:10:52 2008 由於本系列文章主题是「从js到jquery」 , 所以主要内容在於对比 js 到 jquery之间 , 究竟改善了什麽 , jQuery究竟可以对我们有什麽助益 , 顺便介绍jQuery的一些常用的plug-in. 目前是预定一天一篇主题 , 主题目前规划约十篇左右 , 主题从简介js , 基本dom操作 , 到进阶的元素浏览（Traversing） , 再到 effects 跟一些页面操作 （manipulation）, 我想 , 我的目标是希望让它变得很有趣 . :) ──────────────────────────────── 碍於篇幅 , 个人经验是bbs 适合阅读的字数约800~1000字 , 约4-5页 , 内容没有办法专注於 jQuery的介绍 , 而仅摘出笔者认为适合的内容, 於是在有必要与讨论互动的状况下 , 另开补充资料来弥补介绍文章不足. 本文开始. ──────────────────────────────── 本篇为列出jQuery各项常用事件的写法 , 所作的简单 jQuery Event 操作说明(usage) . 文件参考 http://docs.jquery.com/Events 文件中提到共39个function , 其中约有一半是trigger , 另一半则是 binder , 其中我仅列出一些基本的binder 跟 trigger 的用法 , 因为大部分的用法都大同小异 , 有需要时再依照本篇所介绍的规则去查询吧！ ──────────────────────────────── click应该看腻了 , 我们用change来当例子 change( ) Returns: jQuery Triggers the change event of each matched element. change( fn ) Returns: jQuery Binds a function to the change event of each matched element. jQuery事件里面通常 , 有给他fn的就是 binder , 把事件绑定上去的, 而通常没有事件的就是trigger , 只呼叫某个元件的某个事件. 比方说以下的范例 ------------------------------------------------- $("input[type=text]").change( function(e){ alert(" you modify the text"); } ); ------------------------------------------------- 来分析一下 $("input[type=text]") 是要被绑定的jQuery对象 , 指网页上的所有文字输入框. function(e){ alert("..."); } 要绑定给 jQuery对像的事件 , 且绑定在 click事件上. ------------------------------------------------- ＠关於事件... 从这里我们就可以有个基本问题 , 一定要这样宣告事件不可吗? 不能重复利用事件吗？ 我们其实也可以这样做 ------------------------------------------------- /*注意,这是个global function.*/ function doSomething(e){ alert(" you modify the text"); } ------------------------------------------------- $("input[type=text]").change(doSomethining); ------------------------------------------------- ＠还有别的写法吗？ 听说javascript宣告方式很多元？ 没错 , 所以当然这样做也是没问题的. ------------------------------------------------- var doSomething=function(){alert(" you modify the text");}; $("input[type=text]").change(doSomethining); ──────────────────────────────── ＠用这些方法有什麽差异吗？ 上面这些写法是各种function的写法 , 原则上没什麽差异 , 除了最一开始的那种是没有名字的函数物件以外 . 另外就是要考虑到如果是全域function , 要注意到取名时别和别的事件同名. 而想触发元件的change 事件的方法就是 , $("input[type=text]").change(); 给他空的参数内容就会自动看成trigger ,去触发事件了, 通常trigger会比较常用在submit跟focus , 当然也有其他的需要 , 比方说我们想模拟按钮被按下的行为时. ＠还有什麽要注意的吗？ 当然有一个特殊的事件不适用这个模式 , hover( over, out ) 这个事件可以说是由 mouseover 跟 mouseout组合而成 , 他接收两个事件变数 , over时执行第一个 , out时执行第二个 . 另外就是 resize( fn ) 跟 scroll( fn ) 他不支援你直接去触发这个事件 , 因为这是一种特别的行为 , 当然你还是可以用别的方式来triger他. 比方说对它设定 css 宽高可以触发resize之类的. ＠如果我想创造自己的事件...? 其实 jQuery 支援自订event , 所以有时我们也会用到底下这四个方法 . bind( type, data（可省略）, fn ) one( type, data（可省略）, fn ) trigger( type, data ) unbind( type, data ) 以前面的例子来说 , 也可以写成以下的形式. $("input[type=text]").bind("change",function(e){alert("modified");}); 至於data , 如果你给bind三个参数 （注1）, 他会被当成参数传递 , 可以在 e.data 取得这个资料. ＠one看起来跟 bind好像？ 他们一样吗？ 没错 , 很好的观察力 , one 几乎跟 bind 一模一样 , 只是他只会被执行一次就会自动unbind . 而trigger则是对应的触发者 , 所以你也可以binding一个非预设的event type, 然後透过trigger去触发该event , 虽然说实务设计上我自己很少运用这点. 大概只会拿来对table做 "addRow" , "deleteRow" 之类的自订事件吧 unbind则是移除所有该类型的事件 ＠我binding了三次 , 但我只想移除其中一个 , 可以吗？ 答案是可以 , 但是你必需要采用 bind 方法绑定这个 function , 并且给他一个我们称之为namespace的东西 , 再透过namespace unbind. 这个困扰其实比较常发生在 plug-in的撰写上 , 当你同时使用多个plug-in时 , 搞不好大家都要unbind某个元素的事件 为了不互相影响 , 就得透过这样的机制 . for example $("input[type=text]") .bind("change.first",function(e){alert("alert first");}) .bind("change.second",function(e){alert("alert second");}) .bind("change.three",function(e){alert("alert three");}); $("input[type=text]").unbind("change.second"); 这样就会只消掉 second , 而first跟three都留着了. 这部份主要是参考 http://blog.ericsk.org/archives/836 ericsk前辈 的介绍 , 有兴趣的读者可以前往阅读. ──────────────────────────────── 注1. 在这里我们可以理解到 虽然javascript不支援多型(overloading) , 但是jQuery在设计上其实运用了不少多型技巧, 他靠得是内容,型别跟参数 数量判定他属於哪一种对象 , $ 这个init function更是运用的鬼斧神工. --- 这篇是补充资料 , 就不放体验时间了. XD 没想到又写到一半睡着 , 放假果然是睡觉的好日子 , 来接着写今天的主题好了. -- What do you want to have ? / What do you have? 从书本中，你可以发现我的各种兴趣。 从ＣＤ中，你可以了解我所喜欢的偶像明星。 或许从文字你很难以了解一个人，但从物品可以。 My PPolis , My past. http://ppolis.tw/user/Tony --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 220.132.59.247 --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 220.132.59.247