作者TonyQ (沉默是金)
看板Ajax
标题[心得]从 js 到 jQuery 之三：可怕的事件丛林
时间Sat Aug 9 03:02:07 2008
※ [本文转录自 Web_Design 看板]
作者: TonyQ (沉默是金) 看板: Web_Design
标题: [心得]从 js 到 jQuery 之三：可怕的事件丛林
时间: Sat Aug 9 02:57:09 2008
感谢前两篇各位版友的不吝支持 , 接下来要推出第三篇 ,
还请各位版友多多指教、讨论。︿︿
希望看完这篇 , 你们能了解网页上得事件有哪些 ,
以及为什麽事件在跨平台这件事情上是件很棘手的事情.
────────────────────────────────
继「无所遁形的selector」一文体验到的强大 jquery selector ,
暂且让我们放下 jquery 物件的各种attr css 的属性不谈 ,
先来谈谈我们之前所讲过 , javascript最重要的触发点：事件.
────────────────────────────────
＠事件，网页乐团中的鼓手。
事件掌握着网页上得所有节奏 , 就算你完全不使用任何javascript ,
当你浏览网页 , 就起码有读取(onload)跟离开（onunload）正在默默进行 ,
当然要奏出美妙乐曲 , 还得要整个乐团的配合 , javascript 就是这整个
事件中的指挥家 , 指挥着各项元素各司其职, 演出一场美妙的狂想曲.
事实上 , 当我看到这个网页时 , 才深深地体会js 的可能性.
http://www.nihilogic.dk/labs/mario/mario_small_music.htm
＠事件听起来是个通用名词，那我们有哪些事件呢？
事件一定绑定（binding）着一个 dom物件, 这是先介绍selector的理由。
基本上大部分事件是所有元素通用的 , 比方说onmouseover , onclick等 ,
也有些事件只有某些物件会使用 , 像是 onchange , onsubmit 等 .
底下简单列表 , 将我们今天的各大主角简单列出来
on click 物件被按下
on change 物件内容改变（select,input text等form类型元件专用)
on mouseover 滑鼠进入dom元件四周的那一刹那触发
on mouseout 滑鼠离开元件四周时触发
on mousemove 介於over跟out之间的所有移动行为（会频繁触发）
on focus 当元件被点选 或者透过tab键取得焦点时触发
on load 在网页最一开始读取完成时执行 , 常用於body或iframe.
on keydown 按下键盘按键时 ,主要用於body跟input text.
on keyup 放开键盘按键时
还有更多其他种类 可见此网页详细介绍 ,
http://stuck.myweb.hinet.net/c/js/js_events.htm
＠这麽多种？ 我统统都会用到吗？
我自己常用的是前面七个 , 其中又以 click mouseover mouseout load居多,
各种事件常见的应用情境跟组合虽然非常有趣 , 但还是先留待以後再做介绍,
我们这篇接下来要告诉大家的是 , 「什麽是事件」.
＠什麽？ 前面的介绍还不够详细吗？
乍看之下你似乎知道所有事情 , 但继续耐心看下去 ,
你会了解前面介绍的只是事件的一半左右而已 ,
接下来我们要教你的仍然是书上所不常提到 , 但是非常有趣的事情.
＠不是就像click一样 , 按下去就一个事件吗？
没错 , 在某些状况下是这样 , 你不需要了解任何事件的细节 ,
就只是在对应的触发时间点执行js 不需要任何其他资讯 .
但是当你想在网页上追踪你的滑鼠游标时 , 当你想知道你按下的键盘按键
究竟是哪一颗按键时 ,或者看完mario之後 ,
你可能会有雄心壮志想做个网页版的格斗天王之类的 ,
那你就需要一些关於事件的资讯.
＠事件纪录者的欢喜与忧愁
值得高兴的事情是 , 浏览器早就帮你想到了这件事情 ,
於是每个事件必定会伴随着一个纪录事件资讯的物件.（底下以event代称）
event物件会纪录是谁触发了这个事件（srcElement）,
滑鼠游标移到哪，或者keydown按下的按键是哪一个(keycode)之类的。
许多特效诸如tooltip , dragand drop 都是根据这些资讯做出来的 ,
既然如此 , 那为什麽要说忧愁呢？
身为一个有志气的网页设计师, 你应该会想要至少支援Firefox跟ie双平台 ,
或者甚至於像笔者我所在的公司有两位同事是mac爱好者 , safari 也是我们
需要考虑的对象.
＠能跨浏览器当然好呀 , why not?
问题在於这些浏览器对於事件参数的支援都各有一些不同的解读 ,
就以取得 event物件来讲好了 , ie 提供 window.event 可取得,
firefox则需要透过function传递参数.
而且事件提供的内容来讲 , 更是各家都有所不同 ,
像是要透过事件取得被绑定的对象是谁 , ie下是event.target,
firefox下是 event.srcElement, 诸如此类的 .
在你撰写程式码时需要时时注意,是否需要写一些 if-else ,
以达到不同浏览器一样的效果.
＠看起来跨浏览器很麻烦...
没错！所以有些人选择只支援 ie体系 , ie only的是非不是我们所关心的 ,
我们有更好的选择！就是选用 jQuery当我们的平台媒介！
在jQuery底下 , 常见浏览器有支援的事件元素 , 全部被整合为同样的介面,
而我们所关心的事件物件如何取得 , 则是透过function传入param的方式.
有兴趣的朋友们可以分别用fx跟ie开这个sample页 ,
透过mousemove一窥事件的全貌.
http://tonyq.org/test/testMousemove.html
左右皆是将事件内容印出来的结果.
左边是jquery element的内容物 , 右边是当前browser的内容物.
可以发现fx跟ie底下右边的资料会有所不同 , 左边则是一致的.
在大部分的状况下 , jQuery 都将 跨平台的问题谨记在心,
除了部份严重issue （ex. ie6 bgirame) 等需特别处理外 ,
jQuery通常能达到足以令人满意的跨平台效果.
（之後应会有机会继续介绍其他跨平台特性的部份。）
＠一个元素只能绑定一种事件吗？
答案当然是否定的 , 比方说我可能会希望 mouseover移动过inputtext,
时该text自动取得焦点（focus） , text改变时自动做一些检查(change).
很多时候我们会用事件去呼叫别的元素执行事件 , 达到连环事件的效果.
＠可以在javascript中绑定事件吗？
你可以把 onclick 等参数视为 dom成员中的一种 ,
赋予其对应的事件成员一个 function 物件.
比方说 inputNode.onclick=function(){ alert("hi");};
就是针对inputNode绑定onclick事件.
但是透过 = 指定的话 , 之前绑订的事件会被覆盖 ,
如果你希望是附加而非覆盖的话 , 应该要透过 attachEvent的方式进行.
这里又有浏览器相容性的问题 attachEvent是ie only ,
addEventListener 则是 firefox有支援的 .
＠天啊怎麽又来了！！难道就没有跨浏览器的好解法？
现在你知道为什麽我们要特地强调跨浏览器平台了吧（耸肩）
别担心 , 要绑定几次都没问题 , jQuery会帮我们处理好一切的.
$("#ele").click(function(e){alert("hi");})
.click(function(e){alert("hi");})
.click(function(e){alert("hi");})
.click(function(e){alert("hi");});
你看 我们这不就绑定了四个事件给ele了吗?
(
http://tonyq.org/test/testEventBinding.html )
＠咦？ $("#ele").click(event).click(event) ...?
这是jquery的有趣特性之一 , 他几乎所有成员都会回传jquery物件本身,
所以我们可以达成这种称之为「method chaining」的效果.
当然你想中规中矩的写成
$("#ele").click(function(e){alert("hi");});
$("#ele").click(function(e){alert("hi");});
也无妨 , 一切取决於你的习惯.
当物件被click时 , 会按照绑定的顺序依序触发.
（当你不想要时 , 可透过 $("#ele").unbind("click") 来解除所有事件.))
＠事件真是复杂 , 还有我应该知道的吗？
关於事件其实我们聚焦在基础资料的介绍 , 因为我们认为
你早晚会知道 hover事件 = mouseover + mouseout ,
以及原来想要到处都摆个click+ajax的慾望是如此让人兴奋（害怕）.
但是还有一件事情我们还没有告诉你 , 那就是事件的相依性.
在能见到的区域中 , body是所有元素的根源 , 相信你不会否认这句话 ,
当你在页面上绑定一个元素, （以下例中的 input button)
<body >
<div>
<input type="button" value="button" />
</div>
</body>
则当button被click时 , div跟body的onclick也会被触发.
因为button实际上也是div的成员 , div也会把它视为一体的触发
同样的理由 , 所以对body也触发 ,
有些时候我们会需要用这个trick 实做一些事情.
＠那能不能让他不要触发上级的元素呢？
可以 ,对事件方法 return false ; 告诉他我执行到这里就结束.
ex. $("[type=button]").click(function(e){return false;});
相依性最常见的用途在於检查表单资料是否正确填写 ,
我们可以透过
$("form").submit(
function(e){
if($("
#inputdata").val()=="") //如果某个input text是空白
return false; //我就不submit了
}
);
＠体验时间
我们今天介绍的是 jquery corner这只plug-in ,
可以帮你把区块式的元件很轻松的加上圆角的效果 .
http://tonyq.org/jqtalk/jq3_jqCorner.html
---
刚刚历经pcman当掉跟差点睡着 的危机, 总算还是顺利写完了 ,
祝各位版友周末愉快..需要加班的也能早点休息 :)
最後再补一些注意事项 ,
例子大多是针对CLICK写 , 不过其他的事件其实大同小异,
另外 js 使用过度有害网页健康 , 请不要真的作成到处都click +ajax,
以及各种酷炫特效不断充斥 , 大多数状况下这样会导致网页执行起来有笨重的感觉.
--
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
※ 编辑: TonyQ 来自: 220.132.59.247 (08/09 03:01)
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 220.132.59.247
2F：→ awpadam:请问我可以用jquery侦测滑鼠中键滚轮事件吗 08/09 10:30
4F：→ awpadam:上方可以用滚轮卷动的效果 08/09 10:31
5F：→ kosgroup:推 05/04 02:43
6F：推 etman395:推 08/16 02:36
※ 编辑: TonyQ 来自: 61.224.239.208 (12/15 23:58)
7F：推 Ting1024:XDDD 04/07 03:00