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

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

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

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);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容