13518219792
Javascript中事件处理
创新互联-云计算及IDC服务提供商，涵盖公有云、IDC机房租用、达州主机托管、等保安全、私有云建设等企业级互联网基础服务，欢迎来电：18980820575
事件处理分为三个阶段：捕获 - 处理 - 起泡。
以点击按钮为例：
捕获阶段：由外层到内层，首先调用给Window注册的click捕获阶段监听方法，然后document、body、一层层的父节点，一直到按钮本身。
处理阶段：调用按钮本身的click监听方法。
起泡阶段：从按钮开始，从内层到外层，依次调用各级父节点的起泡阶段监听方法，直到Window。
但是，对于IE8及更低版本IE，不支持捕获阶段，因此捕获阶段的事件监听目前尚不通用。
通常的事件处理方法形式为：
[javascript] view plain copy
function eventHandler(e) {
e = e || window.event;
var target = e.target || e.srcElement;
... ...
}
e为事件对象，当事件触发时，作为参数传进来，但对于IE8及更低版本IE不适用，只能通过全局的event变量访问，好在不会出现同时处理两个事件的情况。
如何注册事件监听方法？
（1）直接写在HTML里，DOM元素的属性里。
[javascript] view plain copy
button id="btn" onclick="alert(123)"CLICK/button
button id="btn2" onclick="eventHandler()"CLICK2/button
（2）在Javascript中，赋值给相应的DOM元素。
[javascript] view plain copy
document.getElementById('btn2').onclick = eventHandler;
（3）addEventListener
[javascript] view plain copy
document.getElementById('btn2').addEventListener('click', eventHandler, false);
这里第三个参数是标识何时触发eventHandler，false表示在事件起泡阶段触发，true表示在事件捕获阶段触发。因为在IE8即更低版本不支持事件捕获，因此不经常使用true。
可以给同一个控件调用多次此注册方法，注册多个handler。
removeEventListener与之对应。
在IE8及更低版本IE中，使用attachMent代替。
[javascript] view plain copy
document.getElementById('btn2').attachEvent('onclick', eventHandler);
此时，浏览器仅支持事件起泡，不支持事件捕获，因此无第三个参数。
detachEvent与之对应。
阻止浏览器默认操作
对于通过第一种、第二种方法注册的监听方法，返回值如果为false，就阻止进一步的浏览器默认操作。以超链接为例：
[javascript] view plain copy
a href="" onclick="alert(1);return false"LINK/a
点击了这个LINK后，因为返回值为false，因此不会跳转到百度首页（默认操作）。
对于通过第三种方法注册的监听方法，返回值无效，可以通过event.preventDefault()来阻止浏览器的默认操作。对于IE8即更低版本IE，不支持preventDefault方法，只能通过event.returnValue=false来实现。因此，阻止浏览器默认操作的通用写法为：
[javascript] view plain copy
if(e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false; // IE8-
}
阻止事件起泡
[javascript] view plain copy
if(e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
Javascript事件处理程序的3种方式
产生了事件，我们就要去处理他，据马海祥了解Javascript事件处理程序主要有3种方式：
1、HTML事件处理程序
即我们直接在HTML代码中添加事件处理程序，如下面这段代码：
input id="btn1" value="按钮" type="button" onclick="showmsg();"
script
function showmsg(){
alert("HTML添加事件处理");
}
/script
从上面的代码中我们可以看出，事件处理是直接嵌套在元素里头的，这样有一个毛病：就是html代码和js的耦合性太强，如果哪一天我想要改变js中showmsg，那么我不但要再js中修改，我还需要到html中修改，一两处的修改我们能接受，但是当你的代码达到万行级别的时候，修改起来就需要劳民伤财了，所以，这个方式我们并不推荐使用。
2、DOM0级事件处理程序
即为指定对象添加事件处理，看下面的一段代码
input id="btn2" value="按钮" type="button"
script
var btn2= document.getElementById("btn2");
btn2.onclick=function(){
alert("DOM0级添加事件处理");
}
btn.onclick=null;//如果想要删除btn2的点击事件，将其置为null即可
/script
从上面的代码中，我们能看出，相对于HTML事件处理程序，DOM0级事件，html代码和js代码的耦合性已经大大降低。但是，聪明的程序员还是不太满足，期望寻找更简便的处理方式，下面马海祥就来说说第三种处理方法。
3、DOM2级事件处理程序
DOM2也是对特定的对象添加事件处理程序（具体可查看马海祥博客的《JavaScript对象属性的基础教程指南》相关介绍），但是主要涉及到两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和 removeEventListener()。
它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值（是否在捕获阶段处理事件），看下面的一段代码：
input id="btn3" value="按钮" type="button"
script
var btn3=document.getElementById("btn3");
btn3.addEventListener("click",showmsg,false);//这里我们把最后一个值置为false，即不在捕获阶段处理，一般来说冒泡处理在各浏览器中兼容性较好
function showmsg(){
alert("DOM2级添加事件处理程序");
}
btn3.removeEventListener("click",showmsg,false);//如果想要把这个事件删除，只需要传入同样的参数即可
/script
1.使用window.onerror指定错误处理函数。
当有错误的时候，onerror会被callback。 当某个JavaScript block中有多个script错误时，第一个错误触发后（回调callback），当前Javascript block后面的script会被自动Drop忽略掉，不被执行。
如：
复制代码 代码如下:
html
head
titleTest/title
script type="text/javascript"
window.onerror = function(message, url, line)
{
alert("Error.\nMessage:"+ message +"\nUrl:" + url + "\nLine:" + line)
return true;
}
/script
/head
body
script type="text/javascript"
test();
test();
test();
test();
/script
script type="text/javascript"
test();
test();
test();
test();
/script
/body
/html
在上面的例子中只会有每一个block中的第一个test();产生error。触发window.onerror回调，后面的Javascript会被忽略掉。img
也支持 onerror img src="pic.gif" onerror = "javascript:alert("An
error occurred.");"/。onerror 是浏览器支持的对象。由浏览器决定是否可以使用，不是DOM标准。
2.使用Javascript中的try catch throw处理异常。
Javascript支持了try catch throw，Javascript中定义的异常：
(1)EvalError: An error occurs in the eval() function.
(2)RangeError:
A number value is greater then or less then the number that can be
represented in Javascript(Number.MAX_VALUE and Number.MIN_VAKUE).
(3)ReferenceError: An illegal reference is used.
(4)SyntaxError:
A syntax error occus inside of an eval() function call. All other
syntax error are reorted by the browser and cannot be handled with a
try...catch statement.
(5)TypeError. A variables type is unexpected. 6.URIError. An error ocuurs in the encodeURI() or the decodeURI() function.
如：
复制代码 代码如下:
script type="text/javascript"
function CreateError()
{
throw new Error("Created error by custom.");
}
try
{
//throw a error from a function just want to see the call stack in firefox.
CreateError();
}
catch(error)
{
var errorMsg = ("Message: " + error.message + "\n");
if(typeof(error.stack)!=undefined)
{
//FF
errorMsg += ("Line Number: " + error.lineNumber + "\n");
errorMsg += ("File Name: " + error.fileName + "\n");
errorMsg += ("Stack Trace:\n" + error.stack + "\n");
}
else
{
//IE
errorMsg += ("Description: " + error.description + "\n");
errorMsg += ("Number: " + error.number + "\n");
}
alert(errorMsg);
}
finally
{
//alert("End try catch.message from finally block.");
}
/script
Error.message是IE和FireFox都支持的属性。
IE支持description 和 number属性。
FF支持fileName lineNumber 和 stack 属性。
由于Javascript是弱类型的语言。
所以在catch部分只能catch一次，不能像C#这样的语言可以写多个catch，catch不同类型的exception。
但是可以用 instanceof ErrorType的方式实现类似的功能。
如：
复制代码 代码如下:
script type="text/javascript"
try
{ //Syntax Error
//eval("alert a");
//Custom Error
throw new Error("An error occured.");
}
catch(error)
{
if(error instanceof SyntaxError)
{
alert("Syntax Error");
}
else if(error instanceof EvalError)
{
alert("Eval Error");
}
else if(error instanceof RangeError)
{
alert("Range Error");
}
else if(error instanceof ReferenceError)
{
alert("Reference Error");
}
else if(error instanceof TypeError)
{
alert("Type Error");
}
else if(error instanceof Error)
{
alert("Custon Error");
}
alert(error.message);
}
/script
注：浏览器不会抛出Error类型的exception异常，所以如果捕获到Error类型的异常，可以确定这个异常是用户代码抛出的，不是浏览器抛出的。
Javascript的assert()
复制代码 代码如下:
function assert(bCondition, sErrorMsg) {
if (!bCondition) {
alert(sErrorMsg);
throw new Error(sErrorMsg);
}
}
简单来说，你在浏览一个网页的时候，例如在一个注册页面，你填写了一些注册信息后，点击确定，然后突然弹个框出来，说你的某个信息填写不符合要求，例如用户名不能使用下划线开始，密码不能少于多少个字符等待，都可以用javascript来完成这个验证，然后弹出警告信息。
概括来说，javascript就是用来做网页上在客户端执行的一些操作。
以我的一点点经验，我觉得，学javascript并不需要一开始就很深入的学，大概了解一下javascript的情况，例如常用的函数，方法等就可以了。深入的东西，在项目的过程仲就可以慢慢提高，当做一个网站的时候，需要用到某些功能，实现某些效果的时候，找一下资料，了解一下需要用到哪些东西，参考一下别人写的脚本代码，很快就熟悉了。当然，要精通，还是要花很大功夫的。
可以看一下一些大网站的代码，javascript代码都是可以看得到的。
焦点作为javascript中的一个重要功能，基本上和页面交互都离不开焦点。但却少有人对焦点管理系统地做总结归纳。本文就javascript中的焦点管理作详细介绍
1、焦点元素
默认情况下，只有表单元素可以获得焦点。因为只有表单元素可以交互
input type="text" value="223"
让非表单元素获得焦点也是有办法的，先将tabIndex属性设置为-1，再调用focus()方法
div id="test" style="height:30px;width:100px;background:lightgreen"div/div
button id="btn"div元素获得焦点/button
script
btn.onclick = function(){
test.tabIndex = -1;
test.focus();
}
test.onfocus = function(){
this.style.background = 'pink';
}
/script
2、activeElement
document.activeElement属性用于管理DOM焦点，保存着当前获得焦点的元素
注：该属性IE浏览器不支持
div id="test" style="height:30px;width:100px;background:lightgreen"div/div
button id="btn"div元素获得焦点/button
script
console.log(document.activeElement);//body
btn.onclick = function(){
console.log(document.activeElement);//button
test.tabIndex = -1;
test.focus();
console.log(document.activeElement);//div
}
/script
3、获得焦点
元素获得焦点的方式有4种，包括页面加载、用户输入(按tab键)、focus()方法和autofocus属性
【1】页面加载
默认情况下，文档刚刚加载完成时，document.activeElement中保存的是body元素的引用。文档加载期间，document.activeElement的值为null
【2】用户输入(按tab键)
用户通常可以使用tab键移动焦点，使用空格键激活焦点。比如，如果焦点在一个链接上，此时按一下空格键，就会跳转到该链接
说到tab键，就不能不提到tabindex属性。tabindex属性用来指定当前HTML元素节点是否被tab键遍历，以及遍历的优先级
1、如果tabindex=-1，tab键跳过当前元素
2、如果tabindex=0，表示tab键将遍历当前元素。如果一个元素没有设置tabindex，默认值就是0
3、如果tabindex大于0，表示tab键优先遍历。值越大，就表示优先级越小
【3】focus()
focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件
注：前面介绍过，若非表单元素，设置为tabIndex为-1，也可以获取焦点
【4】autofocus
HTML5表单字段新增了autofocus属性，只要设置这个属性，不用javascript就能自动把焦点移动到相应字段
[注意]该属性只能用于表单元素，普通元素即使设置tabIndex="-1"也不生效
【5】hasFocus()
document.hasFocus()方法返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。通过检测文档是否获得了焦点，可以知道是不是正在与页面交互
4、失去焦点
如果使用javascript使元素失去焦点，那么就要使用blur()方法
blur()方法的作用是从元素中移走焦点。在调用blur()方法时，并不会把焦点转移到某个特定的元素上；仅仅是将焦点从调用这个方法的元素上面移走而已
5、焦点事件
焦点事件会在页面获得或失去焦点时触发。利用这些事件并与document.hasFocus()方法及 document.activeElement属性配合，可以知晓用户在页面上的行踪
【1】焦点事件共包括下面4个
blur
blur事件在元素失去焦点时触发。这个事件不会冒泡
focus
focus事件在元素获得焦点时触发。这个事件不会冒泡
focusin
focusin事件在元素获得焦点时触发。这个事件与focus事件等价，但它冒泡
focusout
focusour事件在元素失去焦点时触发。这个事件与blur事件等价，但它冒泡
[注意] 关于focusin和focusout事件，除了IE浏览器支持DOM0级事件处理程序，其他浏览器都只支持DOM2级事件处理程序
事件处理程序的方式了：
1. 设置HTML标签属性为事件处理程序
文档元素的事件处理程序属性，其名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。当然了，这种形式只能为DOM元素注册事件处理程序。实例：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
/style
/head
body
div id="div1" onClick="console.log('div1');"div1
div id="div2" oNClick="console.log('div2');"div2
div id="div3" onclick="console.log('div3');" onclick="console.log('div3333');"div3
/div
/div
/div
script type="text/javascript"
/script
/body
/html
结果（鼠标点击div3区域后）：
从结果中可以看出：
①因为HTML里面不区分大小写，所以这里事件处理程序属性名大写、小写、大小混写均可，属性值就是相应事件处理程序的JavaScript代码；
②若给同一元素写多个onclick事件处理属性，浏览器只执行第一个onclick里面的代码，后面的会被忽略；
③这种形式是在事件冒泡过程中注册事件处理程序的；
2.设置JavaScript对象属性为事件处理程序
可以通过设置某一事件目标的事件处理程序属性来为其注册相应的事件处理程序。事件处理程序属性名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。实例：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
/style
/head
body
div id="div1"div1
div id="div2"div2
div id="div3"div3
/div
/div
/div
script type="text/javascript"
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
div1.onclick = function(){
console.log('div1');
};
div2.onclick = function(){
console.log('div2');
};
div3.onclick = function(){
console.log('div3');
};
div1.onclick = function(){
console.log('div11111');
};
div1.onClick = function(){
console.log('DIV11111');
};
/script
/body
/html
结果（鼠标点击div3区域后）：
从结果中可以看出：
①因为JavaScript是严格区分大小写的，所以，这种形式下属性名只能按规定小写；
②若给同一元素对象写多个onclick事件处理属性，后面写的会覆盖前面的（ps：这就是在修改一个对象属性的值，属性的值是唯一确定的）；
③这种形式也是在事件冒泡过程中注册事件处理程序的；
3.addEventListener()
前两种方式出现在Web初期，众多浏览器都有实现。而addEventListener()方法是标准事件模型中定义的。任何能成为事件目标的对象——这些对象包括Window对象、Document对象和所有文档元素等——都定义了一个名叫addEventListener()的方法，使用这个方法可以为事件目标注册事件处理程序。addEventListener()接受三个参数：第一个参数是要注册处理程序的事件类型，其值是字符串，但并不包括前缀“on”；第二个参数是指当指定类型的事件发生时应该调用的函数；第三个参数是布尔值，其可以忽略（某些旧的浏览器上不能忽略这个参数），默认值为false。这种情况是在事件冒泡过程中注册事件处理程序。当其为true时，就是在事件捕获过程中注册事件处理程序。实例：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
/style
/head
body
div id="div1"div1
div id="div2"div2
div id="div3"div3
/div
/div
/div
script type="text/javascript"
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
div1.addEventListener('click', function(){ console.log('div1-bubble'); }, false);
div2.addEventListener('click', function(){ console.log('div2-bubble'); }, false);
div3.addEventListener('click', function(){ console.log('div3-bubble'); }, false);
div3.addEventListener('click', function(){ console.log('div3-bubble222'); }, false);
div1.addEventListener('click', function(){ console.log('div1-capturing'); }, true);
div2.addEventListener('click', function(){ console.log('div2-capturing'); }, true);
div3.addEventListener('click', function(){ console.log('div3-capturing'); }, true);
/script
/body
/html
结果（鼠标点击div3区域后）：
从结果中可以看出：
①addEventListener()第三个参数的作用正如上面所说；
②通过addEventListener()方法给同一对象注册多个同类型的事件，并不会发生忽略或覆盖，而是会按顺序依次执行；
相对addEventListener()的是removeEventListener()方法，它同样有三个参数，前两个参数自然跟addEventListener()的意义一样，而第三个参数也只需跟相应的addEventListener()的第三个参数保持一致即可，同样可以省略，默认值为false。它表示从对象中删除某个事件处理函数。实例：
div1.addEventListener('click', div1BubbleFun, false);
div1.removeEventListener('click', div1BubbleFun, false);
function div1BubbleFun(){
console.log('div1-bubble');
}
4.attachEvent()
但是，IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。相应的，IE定义了类似的方法attachEvent()和detachEvent()。因为IE8以及其之前版本浏览器也不支持事件捕获，所以attachEvent()并不能注册捕获过程中的事件处理函数，因此attachEvent()和detachEvent()要求只有两个参数：事件类型和事件处理函数。而且，它们的第一个参数使用了带“on”前缀的事件处理程序属性名。实例：
var div1 = document.getElementById('div1');
div1.attachEvent('onclick', div1BubbleFun);
function div1BubbleFun(){
console.log('div1-bubble');
}
相应的，从对象上删除事件处理程序函数使用detachEvent()。例如：
div1.detachEvent('onclick', div1BubbleFun);
到此为止，我们已经说了浏览器中事件传播机制以及各种注册事件处理程序的方法。下面我们就再说说事件处理程序调用时的一些问题吧！
二.事件处理程序的调用
1.事件处理程序的参数：正如前面所说，通常事件对象作为参数传递给事件处理函数，但IE8以及其之前版本的浏览器中全局变量event才是事件对象。所以，我们在写相关代码时应该注意兼容性问题。实例（给页面上id为div1的元素添加点击事件，当点击该元素时在控制台输出事件类型和被点击元素本身）：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
/style
/head
body
div id="div1"div1/div
script type="text/javascript"
var div1 = document.getElementById('div1');
if(div1.addEventListener){
div1.addEventListener('click', div1Fun, false);
}else if(div1.attachEvent){
div1.attachEvent('onclick', div1Fun);
}
function div1Fun(event){
event = event || window.event;
var target = event.target || event.srcElement;
console.log(event.type);
console.log(target);
}
/script
/body
/html
2.事件处理程序的运行环境：关于事件处理程序的运行环境，也就是在事件处理程序中调用上下文（this值）的指向问题，可以看下面四个实例。
实例一：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
/style
/head
body
div id="div1" onclick="console.log('html:'); console.log(this);"div1/div
script type="text/javascript"
/script
/body
/html
结果一：
从结果可以看出：
①第一种方法事件处理程序中this指向这个元素本身；
实例二：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
/style
/head
body
div id="div1" onclick="console.log('html:'); console.log(this);"div1/div
script type="text/javascript"
var div1 = document.getElementById('div1');
div1.onclick = function(){
console.log('div1.onclick:');
console.log(this);
};
/script
/body
/html
结果二：
从结果可以看出：
①第二种方法事件处理程序中this也指向这个元素本身；
②存在第二种方法时，它会覆盖第一种方法注册的事件处理程序；
实例三：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
/style
/head
body
div id="div1" onclick="console.log('html:'); console.log(this);"div1/div
script type="text/javascript"
var div1 = document.getElementById('div1');
div1.onclick = function(){
console.log('div1.onclick:');
console.log(this);
};
div1.addEventListener('click', function(){
console.log('div1.addEventListener:');
console.log(this);
}, false);
/script
/body
/html
结果三：
从结果可以看出：
①第三种方法事件处理程序中this也指向这个元素本身；
②第三种方法并不会覆盖第一种或第二种方法注册的事件处理程序；
实例四：
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletest/title
style type="text/css"
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
/style
/head
body
div id="div1" onclick="console.log('html:'); console.log(this);"div1/div
script type="text/javascript"
var div1 = document.getElementById('div1');
div1.onclick = function(){
console.log('div1.onclick:');
console.log(this);
};
div1.attachEvent('onclick', function(){
console.log('div1.attachEvent:');
console.log(this === window);
});
/script
/body
/html
结果四：
从结果可以看出：
①第四种方法事件处理程序中this指向全局对象Window；
②第四种方法也不会覆盖第一种或第二种方法注册的事件处理程序；
3.事件处理程序的调用顺序：多个事件处理程序调用规则如下：
①通过HTML属性注册的处理程序和通过设置对象属性的处理程序一直优先调用；
②使用addEventListener()注册的处理程序按照它们的注册顺序依次调用；
③使用attachEvent()注册的处理程序可能按照任何顺序调用，所以代码不应该依赖于调用顺序；
