文档章节

智能社《精通JavaScript开发》视频教程 -- 学习笔记【上】

nancy88hh
 nancy88hh
发布于 2014/11/26 18:56
字数 1174
阅读 59
收藏 0

Class 20-23

教程主题

  • even对象、事件冒泡
  • 鼠标事件
  • 例子一串跟着鼠标的Div
  • 键盘事件
  • 例子:键盘控制移动
  • 默认行为
  • 例子:弹出右键自定义菜单、只能输入数字的输入框
  • 拖拽
  • 事件绑定
  • 复习拖拽原理、限制范围、高级拖拽
  • 自定义滚动条、控制物体大小,透明度等


Class 20
1. 获取事件的详细信息:鼠标位置、键盘按键
   event.clientX,event.clientY
2. FF不支持event,获取event对象(兼容性写法):  var oEvent=ev||event; (也可以用if写法)
document.onclick=function (ev)
{
oEvent=ev||event; 
alert(oEvent.clientX+','+oEvent.clientY);
}

3.取消冒泡:

oEvent.cancelBubble=true;

4. 物体跟着鼠标走:

document.onmousemove=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');

oDiv.style.left=oEvent.clientX+'px';
oDiv.style.top=oEvent.clientY+'px';
}

5. clientX & clientY 是可视区的坐标,如有overflow,需要加scrollTop 或 scrollLeft。

document.onmousemove=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

oDiv.style.left=oEvent.clientX+'px';
oDiv.style.top=oEvent.clientY+scrollTop+'px';
}

经验:凡是用到clientX & clientY,都要加scroll,不然很容易出问题。

6. 封装函数;
function getPos(ev)
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}


document.onmousemove=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
var pos=getPos(oEvent);

oDiv.style.left=pos.x+'px';
oDiv.style.top=pos.y+'px';
};

7.一串跟着鼠标的Div:

document.onmousemove = function (ev) {

                var aDiv = document.getElementsByTagName("div");
                var oEvent = ev || event;
                var pos = getPos(oEvent);


                for (i = aDiv.length - 1; i > 0; i--) {
                    aDiv[i].style.left = aDiv[i - 1].offsetLeft + "px";
                    aDiv[i].style.top = aDiv[i - 1].offsetTop + "px";
                }
                aDiv[0].style.left = pos.x + "px";
                aDiv[i].style.top = pos.y + "px";
            }

8.onkeydown & onkeyup事件。

keyCode: 获取用户按下键盘的哪个按键
document.onkeydown = function (ev) {
                var oEvent = ev || event;
                alert(oEvent.keyCode);
            }

9.键盘控制移动:

document.onkeydown=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');

if(oEvent.keyCode==37)
{
oDiv.style.left=oDiv.offsetLeft-10+'px';
}
else if(oEvent.keyCode==39)
{

oDiv.style.left=oDiv.offsetLeft+10+'px';
}
};

10. 其他属性: ctrlKey、shiftKey、altKey

oTxt1.onkeydown=function (ev)
{
var oEvent=ev||event;
if(oEvent.keyCode==13 && oEvent.ctrlKey)
{
oTxt2.value+=oTxt1.value+'\n';
oTxt1.value='';
}
};


Class 21
1. 阻止默认行为,普通写法:return false
2. 弹出自定义右键菜单
document.oncontextmenu = function (ev) {
               
                var oEvent = ev || event;
                var pos = getPos(oEvent);


                oDiv.style.display = "block";
                oDiv.style.left = pos.x+ "px";
                oDiv.style.top = pos.y + "px";


                return false;


            }


            document.onclick = function () {
                oDiv.style.display = "none";
            }

3.只能输入数字的输入框

oTxt.onkeydown=function (ev)
{
var oEvent=ev||event; 
if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))
{
return false;
}
};

4.拖拽

- FF有bug,拖空的DIV会有重影,DIV里面要有内容,解决方法:阻止默认事件,需加上return false;
- 防止拖出页面,需修正位置
var oDiv=document.getElementById('div1'); 
var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event; 
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}

if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}

oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
}; 
return false;
};


Class 22 & Class 23
1. 事件绑定
- attachEvent(事件名称, 函数),绑定事件处理函数
- addEventListener(事件名称,函数, 捕获)

IE7用attachEvent,FF & Chrome用addEventListener(事件名称"click,不是onclick", 函数, 捕获(写false即可))。IE7的绑定,事件执行顺序会相反,一般不重要。
可写成封装函数:
function myAddEvent(obj, ev, fn)
{
if(obj.attachEvent)
{
obj.attachEvent('on'+ev, fn);
}
else
{
obj.addEventListener(ev, fn, false);
}
}

window.onload=function ()
{
var oBtn=document.getElementById('btn1'); 
myAddEvent(oBtn, 'click', function (){
alert('a');
}); 
myAddEvent(oBtn, 'click', function (){
alert('b');
});
};

2. 解除绑定 

- detachEvent(事件名称, 函数)
- removeEventListener(事件名称, 函数, 捕获)

3. 拖拽 - 磁性吸附 (将距离加大即可,例如+50)
if(l<50)
l=0

4. 事件捕获 - setCapture,只有IE下可用,解决IE下拖动有问题(拖动时选中了文字的问题); FF & Chrome原代码不变。
var oDiv=document.getElementById('div1'); 
var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event; 
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

if(oDiv.setCapture)
{
//IE
oDiv.onmousemove=mouseMove;
oDiv.onmouseup=mouseUp;

oDiv.setCapture();
}
else
{
//Chrome、FF
document.onmousemove=mouseMove;
document.onmouseup=mouseUp;
}

function mouseMove(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}

function mouseUp()
{
this.onmousemove=null;
this.onmouseup=null;

if(oDiv.releaseCapture)
{
oDiv.releaseCapture();
}
} 
return false;	//chrome、ff、IE9
}

5. 带框的拖拽

var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

var oBox=document.createElement('div');

oBox.className='box';
oBox.style.width=oDiv.offsetWidth-2+'px';
oBox.style.height=oDiv.offsetHeight-2+'px';

oBox.style.left=oDiv.offsetLeft+'px';
oBox.style.top=oDiv.offsetTop+'px';

document.body.appendChild(oBox);

document.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

oBox.style.left=l+'px';
oBox.style.top=t+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;

oDiv.style.left=oBox.offsetLeft+'px';
oDiv.style.top=oBox.offsetTop+'px';

document.body.removeChild(oBox);
};

return false;	//chrome、ff、IE9
};

6. 自定义滚动条 -控制物体的大小、物体的透明度

<style>
#parent {width:600px; height:20px; background:#CCC; position:relative; margin:10px auto;}
#div1 {width:20px; height:20px; background:red; position:absolute; left:0; top:0;}
#div2 {width:0px; height:0px; background:green; filter:alpha(opacity:0); opacity:0;}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oParent = document.getElementById('parent');

var disX = 0;

oDiv.onmousedown = function (ev) {
var oEvent = ev || event;

disX = oEvent.clientX - oDiv.offsetLeft;

document.onmousemove = function (ev) {
var oEvent = ev || event;
var l = oEvent.clientX - disX;

if (l < 0) {
l = 0;
}
else if (l > oParent.offsetWidth - oDiv.offsetWidth) {
l = oParent.offsetWidth - oDiv.offsetWidth;
}

oDiv.style.left = l + 'px';

var scale = l / (oParent.offsetWidth - oDiv.offsetWidth);
document.title = scale;

oDiv2.style.filter = 'alpha(opacity:' + scale * 100 + ')';
oDiv2.style.opacity = scale;

oDiv2.style.width = 400 * scale + 'px';
oDiv2.style.height = 400 * scale + 'px';
};

document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};

return false;	//chrome、ff、IE9
};
};
</script>
</head>

<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2"></div>
</body>
</html>




© 著作权归作者所有

nancy88hh
粉丝 0
博文 24
码字总数 12876
作品 0
广州
私信 提问
HTML 5视频教程系列之JavaScript学习篇-何韬-专题视频课程

HTML 5视频教程系列之JavaScript学习篇—52816人已学习 课程介绍 HTML 5视频教程系列中JavaScript开发的基础知识讲解及学习。 课程收益 通过自学视频掌握HTML 5开发手机应用和手机游戏的技能...

pkutao
2015/02/10
0
0
分享51本关于JavaScript方面的学习书籍(免费下载)

分享51本关于JavaScript方面的学习书籍(免费下载) 1、JavaScript面向对象15分钟教程 2、原型、作用域、闭包的完整解释 3、Javascript面向对象特性实现(封装、继承、接口) 4、JavaScript面向...

邓剑彬
2012/12/02
1K
12
整理了一些免费的编程中文书籍

在 github 上整理了一些免费的编程中文书籍 https://github.com/justjavac/free-programming-books-zh_CN 如果谁还有别的书籍,可在此留言。 语言无关类 WEB服务器 Nginx开发从入门到精通 (源...

justjavac
2013/11/04
1K
2
好程序员大数据视频教程从零基础入门到精通

好程序员大数据视频教程从零基础入门到精通,学习大数据技术的必经之路是什么?是Hadoop吗?当然不是!如果想要踏入大数据的门槛,一个必须的条件就是我们的编程基础。熟练掌握一门编程语言是对大...

好程序员IT
04/03
27
0
2014年值得学习的编程语言书

经过数据分析和研究 Jobs Tractor 的 45000 个开发人员招聘职位数据,我们得到了上图的结果: 自上一年,主要的变化如下: PHP和Java换了位置,但是仍旧是高居不下 Java的Android已经取代了S...

modernizr
2014/05/22
15.7K
16

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
8
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部