## 事件驱动三要素: ##
1 事件 2 事件源 3 事件处理程序
# 1 #DOM 0级事件绑定:
脚本直接绑定
button.onclick =function(){};
HTML元素中绑定
<input type="button" id="button1" onclick="alert(1)" value="提交"/>
# 2 # DOM 2级事件绑定:
针对IE obj.attachEvent("on事件","处理程序");添加事件
obj.detachEvent("on事件","处理程序");删除事件
针对FF/CHROM obj.addEventListener("事件","处理程序",boolean);添加事件
obj.removeEventListener("事件","处理程序",boolean);删除事件
# 针对兼容性问题方法1: #
function aa(obj,a,b){
if(obj.attachEvent){
return obj.attachEvent("on"+a,b);
}else if(obj.addEventListener){
return obj.addEventListener(a,b);
}
}
function bb(obj,a,b){
if(obj.detachEvent){
return obj.detachEvent("on"+a,b);
}else if(obj.removeEventListener){
return obj.removeEventListener(a,b);
}
}
# 针对兼容性问题方法2(使用创建对象的方法): #
var Event={
add:function(obj,a,b){
if(obj.attachEvent){
return obj.attachEvent("on"+a,b);
}else if(obj.addEventListener){
return obj.addEventListener(a,b);
}else{
obj["on"+a]=b;
}
},
remove:function(obj,a,b){
if(obj.detachEvent){
return obj.detachEvent("on"+a,b);
}else if(obj.removeEventListener){
return obj.removeEventListener(a,b);
}else{
obj["on"+a]=null;
}
}
};
Event.add(button,"click",a);
Event.add(button,"click",b);
Event.remove(button,"click",a);
# 3 事件对象(用来表示当前事件,只在事件发生的过程中才有效,对象的属性和方法包含了当前事件的状态。)
var ev = e || window.event;
# 4 #事件对象属性:
## 鼠标事件:
相对于浏览器位置 clientX:当鼠标事件发生时,鼠标相对于浏览器X轴的位置
clientY:当鼠标事件发生时,鼠标相对于浏览器Y轴的位置
相对于屏幕位置 screenX:当鼠标事件发生时,鼠标相对于屏幕X轴的位置
screenY:当鼠标事件发生时,鼠标相对于屏幕Y轴的位置
相对于事件源位置
针对W3C:
layerX:当鼠标事件发生时,鼠标相对于事件源X轴的位置
layerY:当鼠标事件发生时,鼠标相对于事件源Y轴的位置
针对IE/CHROM:
offsetX:当鼠标事件发生时,鼠标相对于事件源X轴的位置
offsetY:当鼠标事件发生时,鼠标相对于事件源Y轴的位置
## 解决 layerX 与 offsetX 的兼容问题
var div = document.getElementById("div");
var yuanyi={
yuanX:function(obj){
if(obj.layerX){
return obj.layerX;
}else if(obj.offsetX){
return obj.offsetX;
}
},
yuanY:function(obj){
if(obj.layerX){
return obj.layerY;
}else if(obj.offsetX){
return obj.offsetY;
}
}
};
document.onmousemove=function(e){
var ev = e || window.event;
div.innerHTML = ev.clientX + " "+ev.clientY+"<br/>"+ev.screenX + " "+
ev.screenY+"<br/>"+yuanyi.yuanX(ev) + " "+yuanyi.yuanY(ev);
};
## 示例 ##
//当鼠标按下时
div.onmousedown = function(e){
var ev = e || window.event;
var ox = yuanyi.yuanX(ev);
//var ox = ev.offsetX;
var oy = yuanyi.yuanY(ev);
//var oy = ev.offsetY;
//当鼠标移动时
this.onmousemove=function(e){
var ev = e || window.event;
this.style.marginTop = ev.clientY - oy +"px";
this.style.marginLeft = ev.clientX - ox +"px";
};
//当鼠标抬起时
this.onmouseup = function(){
this.onmousemove = null;
}
};
##键盘事件:
keyCode 获得键盘码
altKey/ctrlKey/shiftKey 判断是否按,如果按了,由true,否则false
type 输出事件名称
## 示例: 留言板提交内容功能
var div = document.getElementById("div");
var textarea = document.getElementById("textarea");
textarea.onkeydown=function(e){
var ev = e || window.event;
if(ev.ctrlKey && ev.type == "keydown" && ev.keyCode == "13"){
//div.innerHTML = textarea.value;
var jia = document.createElement("p");
jia.innerHTML = textarea.value;
div.appendChild(jia);
textarea.value = "";
textarea.focus();
}
};
//取得浏览器的型号
function myBrowser() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
//判断是否Opera浏览器
if(isOpera) {
return "Opera";
}
//判断是否Firefox浏览器
if(userAgent.indexOf("Firefox") > -1) {
return "FF";
}
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
}
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
}
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
return "IE";
}
}
## 滚轮事件:
滚轮事件: DOMMouseScroll (FF) onmousewheel(chrom/IE)
判断 滚轮向上还是向下 wheelDelta/detail
## 示例: 使图片放大或缩小
var picture = document.getElementById("picture");
if(myBrowser() == "ff"){
picture.addEventListener("DOMMouseScroll",fun,false);
}else{
picture.onmousewheel=fun;
}
function fun(){
var num = detail ||wheelDelta ;
if(num>0){
picture.style.width = picture.offsetWidth*1.2+"px";
}else{
picture.style.width = picture.offsetWidth*0.8+"px";
}
}
事件流: 当页面元素触发事件的时候,该元素容器以及整个页面都会按照特定顺序响应元素触发事件,事件传播的顺序叫做事件流.
IE:冒泡事件:从点击的地方从内向外执行(由明确的事件源到最不确定事件源泉依次向上触发)
W3C:捕获事件:从外到点击的地方开始执行(使用addEventListener添加事件时boolean值为true则为捕获,否则为冒泡)
注:当有冒泡事件和捕获事件时,捕获事件先发生.
阻止事件流:阻止事件流往外传播.
IE(冒泡):ev.cancdBubble = true;
W3C(捕获):ev.strpPropagation();
补充:
var ev=e || window.event;(用来表示当前事件,只在事件(比如onclick)发生的过程中才有效,对象的属性和方法包含了当前事件的状态。)
var obj = ev.taget(W3C) || ev.srcElement(IE)触发事件的DOM节点，就是谁触发的这个事件。
##事件委托实例 表格修改
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
input{
border: 0;
text-align: center;
}
td{
30px;
height: 20px;
}
</style>
<script>
window.onload=function(){
var tr=document.getElementById("tr1");
tr.onclick=function(e){
var ev=e||window.event;
var obj=ev.target||ev.srcElement;
if(obj.nodeName=="TH"){
return;
}
if(obj.nodeName=="TD"){
var old=obj.innerHTML;
var input=document.createElement("input");
input.type="text";
obj.innerHTML="";
obj.appendChild(input);
input.focus();
input.onblur=input.ondblclick=input.onkeydown=function(e){
var ev=e||window.event;
if(ev.type == "blur" || ev.type == "dblclick" || (ev.type == "keydown" && ev.keyCode == "13")){
var s;
if(input.value.trim()==""){
s=old;
}
else{
s=input.value;
}
obj.removeChild(input);
obj.innerHTML=s;
}
};
}
}
}
</script>
</head>
<body>
<table id="tr1" border="1" style="text-align: center" cellspacing="0">
<tr>
<th> 姓名</th>
<th> 年龄</th>
<th>科目</th>
<th>成绩</th>
<th>性别</th>
</tr>
<tr >
<td >张三</td>
<td>20</td>
<td>js</td>
<td>80</td>
<td>男</td>
</tr>
</table>
</body>
</html>