：Adobe Dreamweaver JavaScript

[weixin_47313197]

A、JavaScript事件简介
事件
- 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间
- JavaScript 与 HTML 之间的交互是通过事件实现的。
- 对于 Web 应用来说，有下面这些代表性的事件：单击事件、鼠标移入移出事件、键盘按下/弹起事件等等
-事件就是用户与浏览器的交互行为
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onblur 元素失去焦点
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击
onunload 用户退出页面
-给button按钮绑定事件
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("O(∩_∩)O哈哈~ 第二个按钮");
}
B、JavaScript文档的加载
1.浏览器在加载一个页面时，是按照自上而下的顺序加载的。读取到一行的时候就运行一行，如果将script标签写在上面，在执行代码时，页面还没有加载
2. onload事件会在整个页面加载完成之后触发，为window绑定一个onload事件
3. window.onload 在页面上只能出现一次，后面的代码会覆盖前面的代码
4. 将js代码写在页面的下面，就是为了保证执行代码的时候页面已经加载完毕
C、JavaScript事件对象(Event)
1.
鼠标 键盘属性
属性 描述
altKey 返回当事件被触发时，"ALT" 是否被按下。
button 返回当事件被触发时，哪个鼠标按钮被点击。
clientX 返回当事件被触发时，鼠标指针的水平坐标。
clientY 返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
metaKey 返回当事件被触发时，"meta" 键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。
2.onmousemove
- 该事件将会在鼠标在元素中移动时被触发
- 事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递传递进响应函数,在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘那个按键被按下，鼠标滚轮滚动的方向
-在IE8中，响应函数被触发时，浏览器不会传递事件对象，
-在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
-clientX 可以获取鼠标指针的水平坐标
-clientY 可以获取鼠标指针的垂直坐标
var X=event.clientX;
var Y=event.clientY;
txt.innerHTML="X="+X+" Y="+Y;
D、JavaScript事件对象案例_移动的爱心
1.处理兼容性问题：
event=event||window.event;
2. 获取到鼠标的坐标
clientX和clientY：用于获取鼠标当前的可见窗口的坐标。div的偏移量是相对于整个网页的
var left=event.clientX;
var top=event.clientY;
3. pageX和pageY：用于获取鼠标相对于当前页面的坐标。但是这个属性在IE8中不兼容，所以如果需要兼容IE8,则不要使用
var left=event.pageX;
var top=event.pageY;
4. 获取滚动条滚动的距离：
-Chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
-火狐等浏览器认为浏览器的滚动条是HTML的
-最新的Chrome浏览器中可以使用document.documentElement.scrollTop获取值
E、JavaScript事件冒泡（Bubble）
1. - 所谓冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
- 在开发中大部分情况冒泡都是有用的，如果不希望冒泡发生可以通过事件对象取消冒泡 event.cancelBubble=true
事件对象：event=event||window.event;
取消冒泡：event.cancelBubble=true;
F、JavaScript事件的委派
1. 为每一个a标签绑定一个单击响应事件，这种操作比较麻烦，而且这种操作只能为已有的a标签绑定单击事件，新添加的超链接需要重新绑定
2. 我们希望只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素
3.事件的委派：
- 指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
- 事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
//事件对象的属性target：返回触发此事件的元素(事件的目标节点)
list.onclick=function(event){
event=event||window.event;
if(event.target.nodeName=="A"){
alert("a标签被点击了");
}
alert("a标签被点击了");
}
G、JavaScript事件的绑定（拓展）
1. 使用 对象.事件=函数形式绑定事件
-它只能同时为同一个元素绑定同一事件一次，不能绑定多次，如果绑定多次，后面的会覆盖掉前面的
2. addEventListener()
- 通过这个方法也可以为元素绑定响应函数
- 参数：
1.事件的字符串，不加on
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
这个方法不支持IE8及以下的浏览器
3. addEventListener()中的this，是绑定事件的对象
attachEvent()中的this，是window，需要统一两个方法的this
4. 参数：
-obj 要绑定事件的对象
-eventStr 事件的字符串(不要on)
-callback 回调函数
-大部分浏览器中给元素绑定事件
obj.addEventListener(evenStr,callback,false);
-ie8 及一下浏览器
this的值由调用对象决定
obj.attachEvent("on"+evenStr,function(){
callback.call(obj);
});
H、77_JavaScript事件的传播(拓展)
1. 事件的传播
- 关于事件的传播网景公司和微软公司有不同的理解
- 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发 当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应 该在冒泡阶段执行。
- 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素

- W3C综合了两个公司的方案，将事件传播分成了三个阶段
1.捕获阶段
- 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
- 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
- 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

- 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
- IE8及以下的浏览器中没有捕获阶段
*/
/*W3C:万维网联盟，是Web技术领域最具权威和影响力的国际中立性技术标准机构*/
}
参数：
obj 要绑定事件的对象
eventStr 事件的字符串(不要on)
callback 回调函数
例如：
function bind(obj,evenStr,callback){
if(obj.addEventListener){
//大部分浏览器中给元素绑定事件
obj.addEventListener(evenStr,callback,false);
}else{
//ie8 及一下浏览器
//this的值由调用对象决定
obj.attachEvent("on"+evenStr,function(){
callback.call(obj);
});
}
}
I、JavaScript事件案例_拖拽
1.拖拽的流程
1.当鼠标被拖拽元素按下时，开始拖拽 onmousedown
2.当鼠标移动时被拖拽的元素跟着鼠标移动 onmousemove
3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
2. 当鼠标被拖拽元素按下时，开始拖拽 onmousedown
box.onmousedown=function(event){
//事件对象的兼容问题
event=event||window.event;
var ol=event.clientX-box.offsetLeft;
var ot=event.clientY-box.offsetTop;
3. 当鼠标移动时被拖拽的元素跟着鼠标移动 onmousemove
document.onmousemove=function(event){
//事件对象的兼容问题
event=event||window.event;
var left=event.clientX;
var top=event.clientY;

box.style.left=left-ol+"px";
box.style.top=top-ot+"px";
}
4. 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
J、JavaScript事件案例_拖拽(函数封装)
1. 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
//取消捕获
if(obj.releaseCapture){
obj.releaseCapture();
}
}
2. 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能异常，这是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false 来取消默认行为
但是这个对IE8一下不起作用
K、JavaScript事件捕获(setCaptuer)
设置btn1对鼠标按下相关的事件进行捕获
当调用一个元素的setCapture()方法以后，
这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
setCapture()
- 只有IE支持，但是在火狐中调用时不会报错，
-而如果使用chrome调用，则会报错
L、JavaScript键盘事件
1.键盘事件：
onkeydown: 键盘被按下事件
- 如果一直按着某个键不松开，则会一直触发该事件
- 当onkeydown事件连续触发时，第一次和第二次之间的间隔时间稍微长一点，其他则会非常快。这是为了防止误操作的发生
onkeyup: 键盘被松开的事件
键盘事件一般都会绑定给一些可以获取焦点的对象或则是document
2. 可以通过keyCode来获取按键的编码，通过它可以判断哪个键被按下，除了keyCode，事件对象中还提供了几个属性
-altKey
-ctrlKey
-shiftKey
- 这三个属性分别是用来判断alt cltrl shift是否被按下的。如果被按下了则返回true，否则返回false
3. if(event.keyCode>=48&&event.keyCode<=57){
//在文本框中输入内容，属于onkeydown的默认行为，
//如果onkeydown中取消默认行为，则输入的内容，不会出现在本文本框中
return false;
}
M、JavaScript键盘事件_键盘移动div
1.事件对象
event=event||window.event;
event.keyCode 37 箭头向左
event.keyCode 38 箭头向上
event.keyCode 39 箭头向右
event.keyCode 40 箭头向下

[hookee]