网页制作前台之Javascript鼠标事件

2008-02-23 08:06:30来源：互联网阅读 ()

如果你完全不懂，那么期望1-2周看完一遍拉倒....不用看的太仔细，后面再看到不懂的时候回头去看这些东西好了。

1. 前言和准备工作

这里不会介绍什么软件的用法一类的东西。如果觉得手写代码是在装的人可以出去了，谢谢。

首先你要有台电脑。然后它应该装着windows 和 IE。下面所谈到的代码都仅在IE6.0下调试通过，但是我会尽量用标准的写法。这里先不仔细介绍兼容性问题了，那是另一个教程的事情。我习惯用记事本或者UltraEdit来编辑，实际上任何文本编辑器都可以，只要你喜欢。具体怎么用这些工具就不说了，俺们加快速度。

2. 第一个例子

做什么好呢？俺们从最简单的开始吧....给自己一个作个特效玩玩？...让俺想想....做一个可以扔的方块怎么样？开始做了...

2.1 方块

运行代码框

不要说俺在敷衍啊，万事都有个非常简单的开始，就像俺被俺前mm踹掉一样...
ps：细心的朋友也许会发现俺的 cursor 用的是 pointer 而不是 hand，这是因为hand 属性不符合标准。虽然俺只为IE写代码，但是保持好的习惯是必要的。以后此类问题一律用 “(兼)”标记。

2.2 可以拖动的方块

2.21 绑定鼠标事件：按下，拖动，释放；获取事件信息：位置，发生的元素

运行代码框

<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="divBlock" onmousedown="divBlock_event_mousedown();">I am a div.</div> <script> function divBlock_event_mousedown(){ document.onmousemove=document_event_mousemove; var I_do_not_care=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,""); } function document_event_mousemove(e){ var e, obj; obj=document.getElementById("divBlock"); e=window.event?window.event:e; obj.firstChild.nodeValue=e.clientX ":" e.clientY; } function document_event_mouseup(e){ document.onmousemove=""; var I_do_not_care=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,""); } </script>

对于菜鸟来说，这段代码其实包含了很多的内容。

2.210 变量的命名
这是个非常重要的东西，我不得不把这段话编号为 2.210 就是为了提醒刚入门的菜鸟－用一个自己能明白的名字去命名你的变量。如果你要以此为生，最好也要让你的变量名能被别人看懂。

2.211 绑定事件－回字的四种写法
a) 直接在HTML元素标记中写入： onmousedown="divBlock_event_mousedown();"
b) 将事件函数的句柄赋值给相应的事件：document.onmousemove=document_event_mousemove; （注意赋值的函数名后面并没有括号）
c) 使用 attachEvent 方法（对于FF类的浏览器来说是 addEventListener）
ps：解除事件的绑定也有相应方式，就不罗嗦了

2.212 不要被那个 I_do_not_care=... 什么的迷惑，那个是三元表达式，如果你有认真学习 JS语法的话。那样写的目的是兼容。

2.213 在函数体的最前面就声明需要用到的变量是个好习惯，它可以避免你犯很多莫名其妙的错误－比如递归的死循环之类的。当然，如果你压根不喜欢这个变量（就像俺那个 I_do_not_care 一样），那么就随它去吧。

2.214 e=window.event?window.event:e; 也是为了兼容。其实这句只是获得 event 对象而已。用 e.clientX 而不用 e.x 也是兼容问题。obj.firstChild.nodeValue 而不是 obj.innerText 同理。<div>I am a div.</div>而不是 <div></div>也是同理。－兼容真是个tnnd 问题。

2.215 如果你发现自己还是有些糊涂，回去复习 0.1 和 0.2 节中提到的事件部分

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有