您的位置：首页 > 编程语言 > Java开发

DOM 事件

2016-04-16 15:07 633 查看
事件流
事件冒泡

事件捕获

事件处理程序

事件对象
DOM 中的事件对象

IE 中的事件对象

编程练习

鼠标事件

键盘事件

事件流

事件流描述的是从页面中接受事件的顺序。

IE 的事件流是事件冒泡流，而 Netscape 的事件流是事件捕获流。

事件冒泡

事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。

事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

事件处理程序

1、HTML 事件处理程序

Html 事件处理程序使得 Html 和 JS 的耦合性过高，进行修改时需要多处修改，被绝大多数程序员摒弃。

2、DOM0 级事件处理程序

DOM0 级事件处理程序 （用得比较多）：先把元素取出来，然后为其属性添加一个事件的方法叫 DOM0 级处理程序。

它是一种较传统的方式：把一个函数赋值给一个事件处理程序的属性。

优点：简单，跨浏览器的优势。

btn.onclick = null; //删除 onclick 属性

3、DOM2 级事件处理程序

DOM2 级事件定义了两个方法：

用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener()。

它们都接收三个参数：要处理的事件名(不加 on)、作为事件处理程序的函数和一个布尔值指定事件是否在捕获或冒泡阶段执行。

true - 事件句柄在捕获阶段执行。

false- 默认。事件句柄在冒泡阶段执行。

注意：IE 不支持 DOM2 级事件处理，通过 addEventListener 添加的事件只能通过 removeEventListener 来删除，传入的参数要和 add 时传入的一样。

4、IE 事件处理程序

attachEvent() 添加事件。

detachEvent() 删除事件。

这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数

注意：element.onclick 完全等价于 element[‘onclick’]。

5、跨浏览器的事件处理程序

var eventUtil={
// 添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
// 删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
}
}


事件对象

事件对象 event

DOM 中的事件对象

(1)、type : 获取事件类型

(2)、target ：事件目标

(3)、stopPropagation() : 阻止事件冒泡

(4)、preventDefault() : 阻止事件的默认行为

IE 中的事件对象

(1)、type : 获取事件类型

(2)、srcElement ：事件目标

(3)、cancelBubble = true : 阻止事件冒泡

(4)、returnValue = false : 阻止事件的默认行为

var eventUtil={
// 添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
// 删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
},
getEvent:function(event){
return event?event:window.event;
},
getType:function(event){
return event.type;
},
getElement:function(event){
return event.target || event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}


编程练习

实现点击页面中的登录按钮，显示登录层(使用 DOM2 级监听事件！）

任务

一、获取登录按钮及整个登录面板，给登录按钮添加事件，点击时让登录层示，点击登录面板的关闭按钮，关闭整个登录层

提示:

1. 注意IE浏览器与非IE浏览器之间的兼容问题

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.head{font-size:12px;padding:6px 0 0 10px;}
#login_box{width:300px;height:150px;background:#eee;
border:1px solid #ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;display:none;}
#login_box p{height:20px;border-bottom:1px solid #ccc;font-size:12px;padding:6px 0 0 5px;font-weight:bold;}
#close{width:14px;height:14px;background:url(close.png) no-repeat;position:absolute;right:4px;top:6px;}
</style>
<script>
window.onload=function(){
var login_btn=document.getElementById('login'),
login_box=document.getElementById('login_box'),
close=document.getElementById('close');
// 封装添加事件监听程序
function addEvent(ele,type,hander){
// 执行代码
if(ele.addEventListener){
ele.addEventListener(type,hander,false);
} else if(ele.attachEvent){
ele.attachEvent('on'+type,hander);
} else {
ele['on'+type]=hander;
}
}
// 显示登录层函数
function showLogin(){
// 执行代码
login_box.style.display='block'
}
// 隐藏登录层函数
function hideLogin(){
// 执行代码
login_box.style.display='none'
}
//点击登录按钮显示登录层
// 执行代码
addEvent(login_btn,'click',showLogin);
//点击关闭按钮隐藏登录层
// 执行代码
addEvent(close,'click',hideLogin);}

</script>
</head>
<body>
<div class="head">亲，您好！<input type="button" value="登 录" id="login"></div>
<div id="login_box">
<p>用户登录</p><span id="close">X</span>
</div>
</body>
</html>


鼠标事件

鼠标事件都是在浏览器窗口中的特定位置上发生的。

这个位置信息保存在事件的 clientY 和 clientX 属性中。所有的浏览器都支持者两个属性。

它们的值表示事件发生时鼠标指针在视图中的水平和垂直坐标，不包括页面滚动的距离。

function getByClass(clsName,parent){
var oParent=parent?document.getElementById(parent):document,
eles=[],
elements=oParent.getElementsByTagName('*');

for(var i=0,l=elements.length;i<l;i++){
if(elements[i].className==clsName){
eles.push(elements[i]);
}
}
return eles;
}


键盘事件

onkeydown : 事件会在用户按下一个键盘按键时发生。

onkeypress : 事件会在键盘按键被按下并释放一个键时发生。

onkeyup : 事件会在键盘按键被松开时发生。

keyCode：event.keyCode , 获得当前按下键盘上按键的键码 , 回车键为13;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  dom 对象 dom-事件 JS javascript
相关文章推荐
新的分享
章节导航