js中DOM事件绑定分析

2023-09-15 07:38:04 328

js事件绑定

JavaScript有三种事件模型：

内联模型
脚本模型
DOM2模型

1、内联模型

//基本废除不用

2、脚本模型

//基本不用
varinput=document.getElementsByTagName('input')[0];//得到input对象
input.onclick=function(){//匿名函数执行
alert('Lee');
};
事件处理函数影响的元素何时发生
onabort图像当图像加载被中断时
onblur窗口、框架、所有表单对象当焦点从对象上移开时
onchange输入框，选择框和文本区域当改变一个元素的值且失去焦点时
onclick链接、按钮、表单对象、图像映射区域当用户单击对象时
ondblclick链接、按钮、表单对象当用户双击对象时
ondragdrop窗口当用户将一个对象拖放到浏览器窗口时
onError脚本当脚本中发生语法错误时
onfocus窗口、框架、所有表单对象当单击鼠标或者将鼠标移动聚焦到窗口或框架时
onkeydown文档、图像、链接、表单当按键被按下时
onkeypress文档、图像、链接、表单当按键被按下然后松开时
onkeyup文档、图像、链接、表单当按键被松开时
onload主题、框架集、图像文档或图像加载后
onunload主体、框架集文档或框架集卸载后
onmouseout链接当图标移除链接时
onmouseover链接当鼠标移到链接时
onmove窗口当浏览器窗口移动时
onreset表单复位按钮单击表单的reset按钮
onresize窗口当选择一个表单对象时
onselect表单元素当选择一个表单对象时
onsubmit表单当发送表格到服务器时

3、内联模型

“DOM2级事件”定义了两个方法，用于添加事件和删除事件处理程序的操作：
addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数；事件名、函数、冒泡或捕获的布尔值(true表示捕获，false表示冒泡)

window.addEventListener('load',function(){
alert('Lee');
},false);
window.removeEventListener('load',function(){
alert('Mr.Lee');
},false)

PS:IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受
相同的参数：事件名称和函数。

在使用这两组函数的时候，先把区别说一下：

1.IE不支持捕获，只支持冒泡；
2.IE添加事件不能屏蔽重复的函数；
3.IE中的this指向的是window而不是DOM对象。
4.在传统事件上，IE是无法接受到event对象的，但使用了attchEvent()却可以，但有些区别。
```javascript
window.attachEvent('load',function(){
alert('Lee');
},false);
window.detachEvent('load',function(){
alert('Mr.Lee');
},false)
```

PS：IE中的事件绑定函数attachEvent()和detachEvent()可能在实践中不去使用，有几个原因：

1.IE9就将全面支持W3C中的事件绑定函数；

2.IE的事件绑定函数无法传递this；

3.IE的事件绑定函数不支持捕获；

4.同一个函数注册绑定后，没有屏蔽掉；5.有内存泄漏的问题

js中DOM事件绑定分析

热门推荐

随机推荐