小毛驴的博客通过本文主要向大家介绍了事件,javascript等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
JavaScript事件是由访问Web页面的用户引起的一系列操作，例如：用户点击。当用户执行某些操作的时候，再去执行一系列代码。 事件一般是用于浏览器和用户操作进行交互。最早是IE和Netscape Navigator中出现，作为分担服务器端运算负载的一种手段。直到几乎所有的浏览器都支持事件处理。而DOM2级规范开始尝试以一种复合逻辑的方式标准化DOM事件。IE9、Firefox、Opera、Safari和Chrome全都已经实现了“DOM2级事件”模块的核心部分。IE8之前浏览器仍然使用其专有事件模型。
一.事件流：
描述的是从页面中接收事件的顺序。
IE事件：事件冒泡
Netscape事件：事件捕获
1.事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="myDiv">click Me</div>
</body>
</html>
如果你单击页面中的div,click事件顺序：
div
body
html
document
点击div，事件会顺着DOM树向上传播
2.事件捕获
最具体的节点在最后接收事件。
以上面的例子为例，点击div触发事件顺序为：
document
html
body
div
document对象首先接收click事件，然后事件顺着DOM树依次向下。
3.DOM事件流
“DOM2级事件流”规定事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。
即使“DOM2级事件”明文规定，事件捕获不会涉及事件目标。但是浏览器都涉及了，这就是说有2次机会触发事件对象上的事件。
(IE8及之前不支持DOM事件流)
二.事件处理程序
click等叫做事件的名字。响应某个事件的函数叫事件处理程序(或事件监听器)
事件处理程序以“on”开头。
事件 事件处理程序
click onclick
load onload
1.HTML事件处理程序
<input type="button" value="click" onclick="alert('click')">
单击按钮，弹出“click”。
但是要注意不能使用未转义的HTML的语法字符。如<和>
也可以调用js中的函数
<input type="button" value="click" onclick="add()">
<script type="text/javascript">
function add(){
alert("pppppp")
}
</script>
事件处理程序中的代码在执行时，有权访问全局环境下的任何代码。
这样指定的事件处理程序，会创建一个封装这元素属性值的函数。函数中有一个局部变量event，就是事件对象。
<!--通过event变量，可以访问事件对象-->
input type="button" value="click me" onclick="alert(event.type)">
//"click"
<!--在函数的内部this指事件的目标对象-->
<input type="button" value="click me" onclick="alert(this.value)">
//"click me"
缺点：
1.时差问题，HTML加载快，可能用于点击按钮时，js还没有加载完成。就会报错。
所以用try-catch语句，以便错误不会呈现给用户。
<input type="button" value="click" onclick="try{add();}catch(ex){}">
<script type="text/javascript">
function add(){
alert("pppppp")
}
</script>
2.扩展事件处理程序的作用域链在不同的浏览器会导致不同的结果。
3.HTML和js紧密耦合，如果要改变事件处理程序就要改两个地方
2.DOM0级事件处理程序
就是将一个函数赋值给一个事件处理程序。
<button id="box">click</button>
<script type="text/javascript">
var box = document.getElementById("box");
box.onclick = function(){
alert(this.id);
}
//"box"
</script>
this指的是当前元素。
这样添加的事件处理程序会在事件流的冒泡阶段被处理。
DOM0级事件可以删除
box.onclick = null;
3.DOM2级事件处理程序
"DOM2"级事件定义了两个方法，用于处理指定和删除事件处理程序的操作。
3.1.addEventListener()添加事件
参数： 1.事件名
2.作为事件处理程序的函数
3.false(捕获阶段)或true(冒泡阶段)
var box = document.getElementById("box");
box.addEventListener("click", function(){
alert(this.id);
},false);
//"box"
可以添加两个事件，只要写两个addEventListener就行。
box.addEventListener("click", function(){
alert("this is click");
},false);
//"this is click"
这样就会弹出两个，先弹box后弹this is click。
3.2removeEventListener()移除事件
要求：添加的参数和addEventListener一样
*都是注意参数2事件处理程序要是一个，不是说一样，是一个*
<button id="box">click</button>
<script type="text/javascript">
var box = document.getElementById("box");
var a = function(){
alert("this is click");
}
box.addEventListener("click", a,false);
box.removeEventListener("click",a,false)
</script>
这样一样事件处理程序就是一个
如果以下这样就不能移除
<button id="box">click</button>
<script type="text/javascript">
var box = document.getElementById("box");
box.addEventListener("click", function(){
alert(this.id);
},false);
box.removeEventListener("click",function(){
alert(this.id);
},false)
</script>
因为看着事件处理程序程序是一样的，其实不是一个。
为了更好地兼容，建议在事件冒泡阶段处理程序。
4.IE事件处理程序
在IE中
添加事件和删除事件 attachEvent()和detachEvent()
参数：事件处理程序名称()
4.1 attachEvent()事件处理程序
IE8以及之前的版本只有冒泡
<button id="box">click</button>
<script type="text/javascript">
var box = document.getElementById("box");
box.attachEvent("onclick",function(){
alert(this === window);
})
//true
</script>
DOM0级事件处理程序会在所属元素的作用域中运行。而IE事件处理程序会在全局环境下运行。所以this=window
可以用attachEvent添加多个方法。
box.attachEvent("onclick",function(){
alert(this === window);
})
box.attachEvent("onclick",function(){
alert("this is world");
})
和DOM2不同的是，事件处理是从下向上的。
以上面为例
先弹出this is world后弹出true
4.2 detachEvent()移除事件
参数要求和attachEvent参数一样。其中事件处理程序要是一个。
和DOM2的attachEvent是一样的。
<button id="box">click</button>
<script type="text/javascript">
var box = document.getElementById("box");
var a = function(){
alert("this is click");
}
box.attachEvent("click", a);
box.detachEvent("click",a)
</script>
5.跨浏览器事件处理程序
<button id="box">click</button>
<script type="text/javascript">
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;
}
}
}
var box = document.getElementById("box");
var a = function(){
alert("this is click")
};
EventUtil.addHandler(box,"click",a);
EventUtil.removeHandler(box,"click",a)
</script>