前端面试经——关于事件指派方式

事件指派方式有两种，传统指派方式和现代指派方式

注：为了防止不能正常显示代码，标签开头大写了

1，传统指派方式只需要添加事件名和需要执行的函数。如一个点击按钮执行事件：

第一步：

点击我

称之为事件元素
第二步：事件处理程序Function clickme(){
Alert(“我是一个按钮”);
}
第三步：触发获取事件源，事件捕获
Document.getelementbyid(‘mydiv’).onclick=clickme;
为了简化上述步骤，可以写：
Var mydiv=Document.getelementbyid(‘mydiv’);
Mydiv.onclick=function(){
Alert(“我是一个按钮”);
}
或者在div中直接写事件方式和处理函数名

点击我

2，现代指派方式主要是添加事件监听，因为浏览器的不同又分为两种，基于IE和基于DOM的浏览器（chrome Firefox）

基于IE的现代指派方式

第一步：

点击我

称之为事件元素
第二步：事件处理程序Function clickme(){
Alert(“我是一个按钮”);
}
第三步：触发获取事件源，事件捕获
Document.getelementbyid(‘mydiv’).attachevent(“onclick”,clickme);
第四步：取消事件捕获
Document.getelementbyid(‘mydiv’).detachevent(“onclick”,clickme);

基于DOM的现代指派方式

第一步：

点击我

称之为事件元素
第二步：事件处理程序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);