事件驱动编程

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

几个核心概念

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

示例

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

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


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


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

要对事件源加事件以后都要写在js文件里
window.οnlοad=function(){
 document.getElementById("p1").οnclick=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.οnlοad=function(){
    document.οncοntextmenu=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)
}

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值