文档章节

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

山东-小木
 山东-小木
发布于 2014/12/27 19:54
字数 882
阅读 151
收藏 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


山东-小木

山东-小木

粉丝 254
博文 58
码字总数 36785
作品 2
东营
CEO
私信 提问
加载中
请先登录后再评论。
我的架构演化笔记 功能1: 基本的用户注册

“咚咚”,一阵急促的敲门声, 我从睡梦中惊醒,我靠,这才几点,谁这么早, 开门一看,原来我的小表弟放暑假了,来南京玩,顺便说跟我后面学习一个网站是怎么做出来的。 于是有了下面的一段...

强子哥哥
2014/05/31
976
3
Nutch学习笔记4-Nutch 1.7 的 索引篇 ElasticSearch

上一篇讲解了爬取和分析的流程,很重要的收获就是: 解析过程中,会根据页面的ContentType获得一系列的注册解析器, 依次调用每个解析器,当其中一个解析成功后就返回,否则继续执行下一个解...

强子哥哥
2014/06/26
712
0
mvc框架--Razor

Razor 是一个轻巧而优雅的servlet mvc框架 # 又一个轮子? no,写就她是为了证实我个人的某些想法,并在这个过程中练练手,这两种冲动碰撞在一起,自然而然地产生了Razor # Razor的现在和未来...

dtubest
2013/01/25
3.1K
0
Javascript图元绘制库--ternlight

基于HTML CANVAS API的Javascript库,提供在HTML页面上绘制图元——如流程图的能力。 目前已支持简单的矩形图元和图元间的连线(直线、直角连线两种),拖拽图元等能力。 该javascript librar...

fancimage1
2013/02/07
6.3K
1
JavaScript 服务器页--JSSP

JSSP (JavaScript Server Pages) 可以让你在 Java 的应用服务器上使用 JavaScript 生成网页。支持已有的 Java 包和嵌入式 SQL 命令。包含 Dervish 这个 JavaScript 交互操作包用于简化 Ajax...

匿名
2013/02/11
3.8K
0

没有更多内容

加载失败,请刷新页面

加载更多

Trends期刊8月中国论文合辑

作为Cell Press细胞出版社旗下的权威综述月刊,Trends系列旨在为科学家们提供具有权威性且易于理解的科研趋势。其16本Trends期刊涵盖生命科学和化学的不同领域。 为了让大家对于Trends期刊有...

科研菌
昨天
0
0
C语言哈希表uthash的使用方法详解(附下载链接)

工科生一枚,热衷于底层技术开发,有强烈的好奇心,感兴趣内容包括单片机,嵌入式Linux,Uboot等,欢迎学习交流! 爱好跑步,打篮球,睡觉。 欢迎加我QQ1500836631(备注CSDN),一起学习交流...

osc_h7zc4umy
1分钟前
0
0
CGB2004-京淘项目Day08

1.实现图片回显 1.1准备虚拟路径 1.1.1 编辑image.properties 说明:在jt-manager中创建image.properties文件,在其中编辑关于图片配置的所有信息. 1.1.2 编辑FileServiceImpl 说明:实现虚拟路...

osc_gp8avabl
3分钟前
0
0
C++核心准则​E.28:避免基于全局状态的错误处理(例如errno)

蜀葵 E.28: Avoid error handling based on global state (e.g. errno) E.28:避免基于全局状态的错误处理(例如errno) Reason(原因) Global state is hard to manage and it is easy to for......

面向对象思考
今天
0
0
网易2020校招笔试- 大数据开发工程师(正式批)

目录 一、翻倍 方法一:暴力 方法二:递归 二、跳柱子 方法一:暴力,寻找能到达的最高柱子,方便我下次跳 方法二:动态规划dp 三、人数统计 方法:哈希表 四、积木 方法 如果你从本文中学习...

osc_8kei32r9
4分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部