您的位置：首页 > Web前端 > JavaScript

javascript学习-事件处理

2012-06-25 15:35 288 查看

一、事件和事件类型

在0级DOM事件模型中，浏览器把事件分派给发生事件的文档元素。如果那个对象具有适合的事件句柄，就运行这个句柄。

常用 JavaScript 事件列表:

一般事件:

事件属性	触发该事件的条件
onclick 事件	鼠标点击某个对象
ondblclick 事件	鼠标双击某个对象
onmousedown 事件	按下鼠标键
onmouseup 事件	鼠标键按下后松开
onmouseover 事件	鼠标移动到某对象范围的上方
onmouseout 事件	鼠标离开某对象范围
onkeydown 事件	键盘上某个按键被按下
onkeypress 事件	键盘上某个键被按下或按住
onkeyup 事件	键盘上某个键（按下后）被松开

表单相关事件:

事件属性	触发该事件的条件
onblur 事件	元素失去焦点
onfocus 事件	元素获得焦点
onchange 事件	用户改变表单域的内容
onsubmit 事件	表单提交按钮被点击
onreset 事件	表单重置按钮被点击

页面相关事件:

事件属性	触发该事件的条件
onload 事件	页面或图像（被浏览器）加载完成
onunload 事件	用户退出页面（或页面改变为其他页面）
onerror 事件	当加载文档或图像时发生某个错误
onresize 事件	窗口或框架被调整尺寸
onmove 事件	窗口或框架被移动
onscroll 事件	浏览器的滚动条位置发生变化
onstop 事件	浏览器的停止按钮被按下或者正在下载的文件被中断

编辑事件:

事件属性	触发该事件的条件
onselect 事件	当文本内容被选择
onbeforecopy 事件	当页面被选择内容将要复制到系统剪贴板前
oncopy 事件	当前被选择的内容被复制后
oncut 事件	当前被选择的内容被剪切
onpaste 事件	当内容被粘贴时

不支持通用的鼠标事件句柄属性的标记：<applet>、<bdo>、<br>、<font>、<frame>、<frameset>、<head>、<html>、<iframe>、<isindex>、<meta>、<style>

在HTML中定义一个事件句柄，把JavaScript自身赋给事件句柄属性，而不是把调用函数的结果赋给事件句柄属性。

function plead(){alert('Thanks!');}

<button id="do_click" value="click" onclick="plead()"></button>

二、事件传播

在2级DOM事件模型中，当事件发生在document元素上，目标的时间句柄就会被触发，目标的每个祖先元素也可能被触发。

1. 捕获－事件从DOM对象沿文档树向下传播给目标节点（如果目标的任意祖先元素专门注册了捕捉事件句柄，那么在事件传播中，也会运行这些句柄）

2. 冒泡－事件从目标元素向上传播回document对象的文档层次。发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行。

选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件使用addEventListener函数。它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。如：

element1.addEventListener('click',doSomething2,true)

element2.addEventListener('click',doSomething,false)

IE浏览器只支持事件冒泡，不支持事件捕获，提供另一个函数attachEvent使用事件冒泡。

element1.attachEvent("onclick", doSomething);

禁止冒泡事件举例：

//阻止事件冒泡的通用函数

function stopBubble(e){

// 如果传入了事件对象，那么就是非ie浏览器

if(e&&e.stopPropagation){e.stopPropagation();｝

//W3C和Jquery阻止冒泡事件方法stopPropagation()

else{window.event.cancelBubble = true;｝｝

//IE阻止冒泡事件方法window.event.cancelBubble=true

冒泡－捕获－取消冒泡举例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>冒泡和捕获练习</title>
</head>
<body>
<div id="content">
<div id="obj10">
<h2>一级元素a</h2>
<div id="ob11">
<h2>二级元素b</h2>
<div id="obj12">
<h2>三级元素c</h2>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var divs = document.getElementById("content").getElementsByTagName("div");
var count = 1;
for(var i=0;i<divs.length;i++){
bindEvent(divs[i],"click",function(e){
var obj = document.createTextNode("->"+count++);
this.getElementsByTagName("h2")[0].insertBefore(obj,null);
//stopBubble(e); //取消事件冒泡
});
}
//取消事件冒泡
function stopBubble(e){
e=e||window.event;
if(e&&e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
//绑定事件
function bindEvent(elem,type,fn){
if(elem.attachEvent){
elem.atachEvent(type,fn);
}else{
elem.addEventListener(type,fn,false);//冒泡事件
//elem.addEventListener(type,fn,true);//捕获事件
}
}
</script>
</body>
</html>

冒泡事件举例示意图：

捕获事件举例示意图：

取消冒泡事件

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航