js事件event处理

[7986LiChang]

使用js高级技巧，实现元素拖放

拖放的基本概念：创建一个绝对定位的元素，使其可以用鼠标移动。为了元素能被拖放，它必须是绝对定位position:absolute 或相对定位position:relative。但是relative时要注意，通过left/top定位时，是从默认位置移动。使用absolute则是相对设置了relative/absolute值的祖先元素定位。

实现方法：

1.EventUtil 跨浏览器的事件对象

由于在JavaScript中DOM0级、DOM2级与旧版本IE(8-)为对象添加事件的方法不同，为了以跨浏览器的方式处理事件，需要编写的一段”通用代码“，即跨浏览器的事件处理程序。习惯上，将这些方法都构建进一个名为EventUtil的对象中。 编写并使用EventUtil后，可以保证处理事件的代码能在大多数浏览器下运行一致。 在EventUtil下添加以下方法：

• addHandler 添加事件
• DOM2级事件处理程序：element.addEventListaner(type, handler, false); false表示在冒泡阶段调用事件处理函数
• IE事件处理程序： element.attachEvent("on" + type, handler) 为了兼容IE8-，事件类型要加”on“前缀，即”onclick“
• DOM0级事件处理程序：element["on" + type] = handler; 在DOM0级中用方括号语法为属性名指定事件处理程序
• removeHandler 取消事件
• DOM2级事件处理程序：element.removeEventListener(type, handler, false); false表示在冒泡阶段调用事件处理函数
• IE事件处理程序： element.detachEvent("on" + type, handler); 为了兼容IE8-，事件类型要加”on“前缀，即”onclick“
• DOM0级事件处理程序：element["on" + type] = null;
• getEvent 跨浏览器获得event对象 （以下IE浏览器指的是，IE8-）
• 兼容DOM的浏览器： event只是简单传进传出
• IE浏览器 : window.event
• getTarget 获得事件的实际目标
• DOM浏览器： event.target属性
• IE浏览器： event.srcElement属性
• preventDefault 阻止事件的默认行为
• DOM浏览器中：event.preventDefault()方法
• IE浏览器中： event.returnValue = false;取消时间得默认行为
• stopPropagation 停止事件的进一步捕获或冒泡
• DOM浏览器中： event.stopPropagation()方法
• IE浏览器中： event.cancleBubble = true;停止事件冒泡
• getRelatedTarget 获取与mouseover/mouseout事件有关的相关元素
• DOM浏览器：event.relatedTarget属性提供相关元素的信息
• IE浏览器： mouseover事件中event.fromElement保存了相关元素；mouseout事件中event.toElement保存了相关元素 mouseover事件：鼠标指针 从一个元素外部 移入一个元素边界内。因此，事件的主目标是获得光标的元素（即鼠标移入的元素），而相关元素是失去光标的元素 mouseout事件：鼠标指针 从一个元素内部，移除当前元素。因此，事件的主目标是失去光标的元素，而相关元素是获得光标的元素。
• getButton获取mousedown/mouseup按下或释放的是鼠标哪个键
• DOM中，event.button属性中存储3个值：0左键 1中间键 2右键。支持DOM版鼠标事件的浏览器通过hasFeature()方法检测：ducument.implementation.hasFeature("MouseEvents", "2.0") 。其中document.implementation返回处理该文档的DOMImplementation对象
• IE中（表示的是IE8及之前的版本），event.button可以有8个值，需要将其对应转换为三类情况。使用switch语句，（4）按下中间键1，（2、6）按下右键，次按钮2，（其他值）按下左键，主按钮0
• getWheelDelta 获取表示鼠标滚轮滚动方向的数值。 与众不同的是Firefox，而不是旧版本的IE，所有浏览器（包括IE6，除了Firefox）都支持鼠标滚轮事件mousewheel
• 非firefox中：支持event.wheelDelta属性，用户向前滚动鼠标滚轮，wheelDelta是120的倍数，向后滚动，wheelDelta是-120的倍数。同时，如果在Opera9.5之前的版本中，wheelDelta值的正负号是颠倒的。
• firefox中： 支持DOMMouseScroll的事件，event.detail中保存鼠标滚轮的信息，向前滚动是-3的倍数，向后滚动是3的倍数
• getCharCode 跨浏览器取得字符编码，只能在keypress事件中使用
• IE9/Firefox/Chrome/Safari中 event.charCode属性中即存储按下字符代表的ASCⅡ码
• IE8-/Opera在event.keyCode中保存

[7986LiChang]

2. 自定义事件EventTarget，在其中定义添加事件、触发事件、移除事件的函数，从而实现触发自定义事件。

3. 定义了EventUtil、EventTarget后，使用时，只有添加了事件处理函数，（即函数运行了），才会触发事件监听

4. 其中处理元素拖拽时鼠标位置变化的情况

[7986LiChang]

引入css的方式

• 使用link标签引入外部样式表 <link rel="stylesheet" href="css/style.css" type="text/css"/>
• 使用style元素 内部样式表。使用style一定要使用type属性

  <style type="text/css">
  html{
      height: 100%;
  }
  </style>

• 使用@import指令

  <style type="text/css">
  @import url(css/style.css);
  </style>