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

JavaScript事件

2016-06-01 00:00 316 查看

摘要: 事件句柄事件冒泡

1事件句柄：

属性	当以下情况发生时，出现此事件	FF	N	IE
onabort	图像加载被中断	1	3	4
onblur	元素失去焦点	1	2	3
onchange	用户改变域的内容	1	2	3
onclick	鼠标点击某个对象	1	2	3
ondblclick	鼠标双击某个对象	1	4	4
onerror	当加载文档或图像时发生某个错误	1	3	4
onfocus	元素获得焦点	1	2	3
onkeydown	某个键盘的键被按下	1	4	3
onkeypress	某个键盘的键被按下或按住	1	4	3
onkeyup	某个键盘的键被松开	1	4	3
onload	某个页面或图像被完成加载	1	2	3
onmousedown	某个鼠标按键被按下	1	4	4
onmousemove	鼠标被移动	1	6	3
onmouseout	鼠标从某元素移开	1	4	4
onmouseover	鼠标被移到某元素之上	1	2	3
onmouseup	某个鼠标按键被松开	1	4	4
onreset	重置按钮被点击	1	3	4
onresize	窗口或框架被调整尺寸	1	4	4
onselect	文本被选定	1	2	3
onsubmit	提交按钮被点击	1	2	3
onunload	用户退出页面

//标签中定义该事件触发后执行函数
<body onload="hello()">
</body>

//srcipt 标签中使用

window.onload=hello; //<body onload="hello()"></body>
function hello(){
var msg="hello world!";
document.open();
document.write(msg);
document.close();
}

2.事件冒泡

//html中定义 内嵌就是捕获
<img src="./img/123.jpg" onerror="f2()" />
//js文件
function f2(){
alert("buhao");
}

这个问题其实是一个很经典的问题，在使用<div>标签布局时，对外层事件和内层事件都绑定相同事件句柄时，会有一个事件冒泡的过程。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/event.js">
</script>
</head>
<body>
<div id="first" style="paddig: 20px; background-color:#ff0; width: 150px;" >
<div id="second" style="background-color: #f00; width: 100px; height: 100px; border: 1px dashed #000;">
</div>
</div>
</body>
</html>
window.onload=setEvents;
function setEvents(){
document.getElementById("first").onmousedown=function(){
alert("first");
}
document.getElementById("second").onmousedown=function(){
alert("second");
}
document.oncontextmenu=function(){
alert("document"+this);
}
}

这个时候你点击最里层的second，这个时候你会发现，会提示出三个警告框。其实很多时候我们并不会想要出现这样的情况，这个时候就必须借助event的stopPropagation属性

window.onload=setEvents;
function setEvents(){
document.getElementById("first").onmousedown=function(){
alert("first");
stopEvent(window.event);
}
document.getElementById("second").onmousedown=function(){
alert("second");
stopEvent(window.event);
}
document.oncontextmenu=function(){
alert("document"+this);
return false;
}
}

function stopEvent(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}

有些时候对窗口事件例如是点击鼠标右键该event.stopPropagation会失效，这个时候就需要return false出场。代码中已经有体现。

DOM Level 2 事件模型

主要就是三个关键方法：addEventListener，removeEventListener()，dispatchEvent()

addEventListener（‘event’，eventFunction,boolean）三个参数。

当boolean 为false时是冒泡阶段，当为true 时为捕获阶段。

function cascadeDown(event){
alert("capturing "+this);
}

function bubbleUp(event){
alert("bubbing "+this);
}

window.onload=setup;
function setup(event){
//扑捉阶段
document.addEventListener('click',cascadeDown,true);
document.forms[0].addEventListener('click',cascadeDown,true);
document.forms[0].elements[0].addEventListener('click',cascadeDown,true);

//冒泡阶段
document.addEventListener('click',bubbleUp,false);
document.forms[0].addEventListener('click',cascadeDown,false);
document.forms[0].elements[0].addEventListener('click',cascadeDown,false);

}

当需要阻止冒泡阶段时:

function bubbleUp(event){
alert("bubbing "+this);
event.stopPropagation();
}

专门的博客讲的比较好：http://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/
http://biancheng.dnbcw.info/javascript/223788.html

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

标签：

相关文章推荐

新的分享

章节导航