Javascript从零开始学习第四天(1)

Javascript从零开始学习第一天 

Javascript从零开始学习第二天(1) 

Javascript从零开始学习第二天(2) 

Javascript从零开始学习第三天(1) 

Javascript从零开始学习第三天(2) 

Javascript从零开始学习第四天(1) 

Javascript从零开始学习第四天(2) 

一、事件基础

1、事件对象

event 事件对象，用来获取事件的详细信息：鼠标位置 键盘按键

点击事件 整个页面绑定点击事件 整个页面的事件应该加给document

例子：获得鼠标位置：clientX clientY 

这里使用来得到可视区域的鼠标位置

IE和chrome没问题 FF不支持event

使用兼容方式

var oEvent=ev||event;

这样所有浏览器都可以使用事件对象了。

2、事件流

事件流动的过程。

事件冒泡，从最底层点击触发对象开始，一层一层晚上事件冒泡。

点击最里层的红色div 触发了红色事件，然后会一级一级的传给绿色、会的div

最后传给body和document

仿select下拉框原理：

点击按钮，显示隐藏的菜单区域，点击空白处隐藏。

这里给document加点击事件后，点击按钮也会触发，所以需要阻止事件的冒泡。

使用event.cancelBubble=true;将冒泡禁止。

3、鼠标坐标位置 鼠标事件

单纯使用clientX和ClientY是可视化区域的位置，一旦页面出现滚动条

滚动位置就会影响这个程序。

解决方案：

使用clentY+scrollTop可以得到整个页面鼠标的实际位置。

4、键盘事件

使用keyCode检测按键

按下：onkeydown 弹起：onkeyup

print screen没有keyCode

例子：鼠标控制div移动

原理：判断keycode后执行移动（div的位置变化）

二、事件中级

1、默认行为 比如右键出菜单 这是浏览器默认行为

如何屏蔽浏览器默认行为？

document.oncontextmenu=function(){

    return false;//只要return false;就能屏蔽默认菜单事件

};

效果

2、拖拽事件

拖拽原理：鼠标与div左上角距离不变 

需要绑定三个事件

mousedown mousemove mouseup

使用return false阻止默认事件可以阻止火狐浏览器的bug 拖拽空div 可以拖出两个。！！

上面的程序还有bug 没有限制边缘范围 防止拖拽出浏览器回不来。

只需要判断现在的位置和浏览器边缘判断就行了。

清除事件，不留垃圾。

三、事件高级

1、事件绑定

浏览器兼容性处理

可以简单封装简化一下使用方式，处理兼容性。

2、高级拖拽

1、限制不能拖出窗口

主要是判断边缘处理，如果越界自动回到边界处。

2、限制不能拖出父级组件

上面程序的bug是在IE7、8上存在选择文字时bug

使用只有IE支持的 事件捕获功能

obj.setCapture(); 作用在于把网页中所有的事件都

集中在一个地方应用。

这样写可以分别判断ie和其他浏览器，分别处理

3、磁性吸附

4、带框的拖拽

动态创建一个框（div 虚线）；

大小为要拖动的div的大小 

线框跟着鼠标运动

鼠标up的时候 目标div移动到虚框位置

删除虚框

虚线会占用一个像素 所以宽度应该减去2