事件驱动编程

     事件驱动编程
发生某个事件、或者状态改变，调用某个事件处理函数

几个核心概念

事件源：谁发出事件通知，发出消息；也就是事件主体
事件名称：发出什么样的通知的名称，比如鼠标到我
头上了，我被别人点了一下
事件响应函数：谁对这个事件感兴趣，当这个事件发生时
要执行什么样的操作
事件对象：一般来说，当事件发生时，会产生一个描述
该事件的具体对象，包括具体的参数一起发给响应函数，
好让他们通过事件对象来了解事件更加详细的信息。
比如说谁在几点几分点的等。

示例

<p style="color:red" id="p1">Hello world!</p>//事件源

function shout(e){//事件响应函数，也叫监听函数
 alert(e.clientX);//e事件对象
}

document.getElementById("p1").onclick=shout;//重点
//在事件源上绑定事件响应函数

通过console.dir(e);//打印事件对象的属性、方法

要对事件源加事件以后都要写在js文件里
window.onload=function(){
 document.getElementById("p1").onclick=shout;//默认给shout传事件对象
}

//IE中的事件对象统一用event代表
//Firefox的事件对象统一为事件处理函数的第一个参数,可以为e
e=e||event;//用这句话解决问题

浓缩语句的方法
function $(id){
 return document.getElementById(id);
}

鼠标事件
键盘事件
onkeypress:onkeydown、onkeypress、onkeyup
功能键无效，只对字母数字有效
onkeydown:对功能键也有效
HTML事件
window的onload、unload

绑定多个监听函数，使用
addEventListener或attachEvent
W3C DOM标准
bCapture表示事件是否向上冒泡传播

dom对象.addEventListener("事件名"，fn,bCapture);
dom对象.removeEventListener("事件名",fn,bCapture);

IE独有的
dom对象.attachEvent("事件名"，fn,bCapture);
dom对象.detachEvent("事件名",fn,bCapture);

 

 

阻止默认的鼠标事件(例如超链接事件)

Firefox : e.preventDefault();

IE: e.returnValue=false;

例:阻止右键菜单

window.onload=function(){
    document.oncontextmenu=function(e){
  e=e||event;
  if(document.attachEvent){
   e.returnValue=false;
   
  }else{
   e.preventDefault();
  }
  
  
 }
}

重点
判断是不是IE
if(document.attachEvent){
//IE代码
dom对象.attachEvent("onclick"，fn);
dom对象.attachEvent("onclick",fn2);
}else{
//Firefox代码
dom对象.addEventListener("click"，fn);
dom对象.addEventListener("click",fn2)
}