事件指派方式有两种,传统指派方式和现代指派方式
注:为了防止不能正常显示代码,标签开头大写了
1,传统指派方式只需要添加事件名和需要执行的函数。如一个点击按钮执行事件:
第一步:<Div id=’mydiv’>点击我</div>称之为事件元素
第二步:事件处理程序Function clickme(){
Alert(“我是一个按钮”);
}
第三步:触发获取事件源,事件捕获
Document.getelementbyid(‘mydiv’).onclick=clickme;
为了简化上述步骤,可以写:
Var mydiv=Document.getelementbyid(‘mydiv’);
Mydiv.onclick=function(){
Alert(“我是一个按钮”);
}
或者在div中直接写事件方式和处理函数名
<Div id=’mydiv’ onclick=clickme()>点击我</div>
2,现代指派方式主要是添加事件监听,因为浏览器的不同又分为两种,基于IE和基于DOM的浏览器(chrome Firefox)
基于IE的现代指派方式
第一步:<Div id=’mydiv’>点击我</div>称之为事件元素
第二步:事件处理程序Function clickme(){
Alert(“我是一个按钮”);
}
第三步:触发获取事件源,事件捕获
Document.getelementbyid(‘mydiv’).attachevent(“onclick”,clickme);
第四步:取消事件捕获
Document.getelementbyid(‘mydiv’).detachevent(“onclick”,clickme);
基于DOM的现代指派方式
第一步:<Div id=’mydiv’>点击我</div>称之为事件元素
第二步:事件处理程序Function clickme(){
Alert(“我是一个按钮”);
}
第三步:触发获取事件源,事件捕获
Document.getelementbyid(‘mydiv’).addeventlistener(‘click’,clickme,false);
参数说明:click处理方式,去掉传统指派方式中的on,
Clickme,只写事件函数名,没有括号
False,代表捕获机制,true代表事件冒泡机制
第四步:取消监听
Document.removeelementbyid(‘mydiv’).addeventlistener(‘click’,clickme,false);
注意:在基于IE和基于DOM的浏览器的指派方式中,为了直接写事件处理函数,可以不单独定义一个函数,即可以直接写匿名函数。
如:Document.getelementbyid(‘mydiv’).addeventlistener(‘click’,function(){
Alert(“我是一个按钮”);
},false);