1.javascript中的事件处理程序【学习笔记】
2017-03-05 14:20
746 查看
事件处理程序:1.HTML事件处理程序 2.DOM 0 级事件处理程序 3.DOM 2 级事件处理程序
1.HTML事件处理程序:把事件直接加到HTML结构的元素上
![](https://img-blog.csdn.net/20170305143453653?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20170305143754244?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20170305144232199?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20170305144244600?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20170305154310746?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
缺点:HTML与JS代码都需要修改(开发时候一般不采用)
2.DOM 0 级事件处理程序 (最常用且最传统 能跨浏览器):把一个函数赋值给一个事件处理程序的属性
![](https://img-blog.csdn.net/20170305145708955?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20170305145810284?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
// 删除所添加的事件 赋值为null
![](https://img-blog.csdn.net/20170305150132705?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
[b]3.DOM 2 级事件处理程序
[/b]
3.1.Chrome、Firefox、Opera、Safari 等非 IE 浏览器 有两个方法:
[b]处理指定事件处理程序: addEventListener ( type , listener , useCapture )[/b]
[b]删除指定事件处理程序: removeEventListner ([b][b]type , listener , useCapture
[/b])[/b][/b]
[b][b][b]([b][b]type, listener, useCapture[/b])[/b][/b]
[/b][/b]
[要处理的事件名] [作为事件处理程序的函数] [布尔值]
注:函数后面不添加();布尔值一般为false;
属性前面均不加上 “ on ”
![](https://img-blog.csdn.net/20170305152341889?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20170305152457499?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
[b]// 删除所添加的事件[b][b]removeEventListner( ) 参数跟对应的添加事件的参数一致[/b][/b][/b]
![](https://img-blog.csdn.net/20170305153036034?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
//可添加多个事件处理程序 HTML结构元素中无法做到添加多个事件处理程序
![](https://img-blog.csdn.net/20170305153522564?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20170305153916382?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
3.2 IE浏览器 事件处理程序的两种方法(Opera支持IE事件处理程序):
添加事件:attachEvent([b][b] type , listener[/b] )
[/b]
删除事件:detachEvent(
[b][b]type , listener[/b] )
[/b]
注:只接收两个参数(IE8及更早的浏览器只支持事件冒泡);属性前面均加上 “ on ”
![](https://img-blog.csdn.net/20170305155559952?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20170305155611702?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
[b]// 删除所添加的事件[b][b][b]detachEvent( ) 参数跟对应的添加事件的参数一致[/b][/b][/b][/b]
![](https://img-blog.csdn.net/20170305155809189?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzQzNTE2MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
4.跨浏览器的事件处理程序(进行能力检测):封装在对象内
1.HTML事件处理程序:把事件直接加到HTML结构的元素上
缺点:HTML与JS代码都需要修改(开发时候一般不采用)
2.DOM 0 级事件处理程序 (最常用且最传统 能跨浏览器):把一个函数赋值给一个事件处理程序的属性
// 删除所添加的事件 赋值为null
[b]3.DOM 2 级事件处理程序
[/b]
3.1.Chrome、Firefox、Opera、Safari 等非 IE 浏览器 有两个方法:
[b]处理指定事件处理程序: addEventListener ( type , listener , useCapture )[/b]
[b]删除指定事件处理程序: removeEventListner ([b][b]type , listener , useCapture
[/b])[/b][/b]
[b][b][b]([b][b]type, listener, useCapture[/b])[/b][/b]
[/b][/b]
[要处理的事件名] [作为事件处理程序的函数] [布尔值]
注:函数后面不添加();布尔值一般为false;
属性前面均不加上 “ on ”
[b]// 删除所添加的事件[b][b]removeEventListner( ) 参数跟对应的添加事件的参数一致[/b][/b][/b]
//可添加多个事件处理程序 HTML结构元素中无法做到添加多个事件处理程序
3.2 IE浏览器 事件处理程序的两种方法(Opera支持IE事件处理程序):
添加事件:attachEvent([b][b] type , listener[/b] )
[/b]
删除事件:detachEvent(
[b][b]type , listener[/b] )
[/b]
注:只接收两个参数(IE8及更早的浏览器只支持事件冒泡);属性前面均加上 “ on ”
[b]// 删除所添加的事件[b][b][b]detachEvent( ) 参数跟对应的添加事件的参数一致[/b][/b][/b][/b]
4.跨浏览器的事件处理程序(进行能力检测):封装在对象内
相关文章推荐
- JavaScript事件处理程序 学习笔记
- JavaScript高级程序设计学习笔记--事件(一)(事件流、事件处理程序/事件侦听器)
- JavaScript高级程序设计学习笔记--事件(一)(事件流、事件处理程序/事件侦听器)
- JavaScript事件处理程序 学习笔记
- js学习笔记:事件——事件流、事件处理程序、事件对象
- 【JavaScript学习】事件:事件处理程序
- JavaScript权威设计--事件处理介绍(简要学习笔记十七)
- javascript事件小结(事件处理程序方式)--javascript高级程序设计笔记
- JavaScript学习笔记之事件处理机制
- SilverLight学习笔记--Silverligh之在Javascript中捕获和处理Silverlight控件事件
- head first C#学习笔记:如何创建事件以及事件处理程序
- 理解JavaScript事件以及事件处理程序——笔记整理
- javascript学习笔记-事件处理
- javascript学习笔记之事件和事件处理
- 【js学习笔记-092】-----事件处理程序的调用
- JavaScript学习笔记22-事件处理
- JavaScript事件学习小结(二)js事件处理程序
- 【js学习笔记-091】-----------注册事件处理程序
- JavaScript Event学习第三章 早期的事件处理程序
- Javascript学习笔记13——关于响应事件