js--DOM事件绑定

tianhang 发布于2019-08-26 11:50 / 1050人阅读

摘要：中的事件绑定函数和可能在实践中不去使用，有几个原因就将全面支持中的事件绑定函数的事件绑定函数无法传递的事件绑定函数不支持捕获同一个函数注册绑定后，没有屏蔽掉有内存泄漏的问题

js事件绑定

JavaScript 有三种事件模型：

内联模型

脚本模型

DOM2 模型

内联模型

//基本废除不用

脚本模型

//基本不用
var input = 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 表单 当发送表格到服务器时

内联模型
“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.有内存泄漏的问题

GPU云服务器云服务器事件绑定重复绑定事件绑定点击事件 javascript事件绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107661.html

深入理解js Dom事件机制（一）——事件流

摘要：事件捕获提出的事件流模型称为事件捕获。事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。首先我们思考一个很有意思的事情：一张纸上画了两个同心圆，当我们把手指放到圆心上时，手指指向的不是一个圆，而是纸上的两个圆，同理之，当我们单击网页上的一个div...

OBKoro1 2019-08-21 17:34 评论0 收藏0
JS DOM Event

摘要：事件处理程序事件侦听器的设定级级首先讲级事件处理程序对事件的方式被称为事件处理程序或事件侦听器，但这两者之间是有区别的。此外，不能对事件目标事件类型执行阶段都相同的对象注册多个相同的事件侦听器。关于这一篇章有太多对于我来说杂且乱的知识点，单单是分别DOM层级划分我看过的文章就有（0,2,3）的，（0,2）的，由于自己知识掌握还很薄弱所以只能参考别人文章结合自己理解来写，这其中也涉及到...

WelliJhon 2019-08-20 16:46 评论0 收藏0
史上前端面试最全问答（附答案）

摘要：第四步本地服务器再向上一步返回的域名服务器发送请求，然后接受请求的服务器查询自己的缓存，如果没有该纪录，则返回相关的下级的域名服务器的地址。第六步本地域名服务器把返回的结果保存到缓存，以备下一次使用，同时还将结果返回给客户机。史上前端面试最全知识点（附答案）一.html & js & css 1.AMD和CMD是什么？它们的区别有哪些？ AMD和CMD是二种模块定义规范。现在都使用...

SHERlocked93 2019-08-01 17:28 评论0 收藏0
史上前端面试最全问答（附答案）

摘要：第四步本地服务器再向上一步返回的域名服务器发送请求，然后接受请求的服务器查询自己的缓存，如果没有该纪录，则返回相关的下级的域名服务器的地址。第六步本地域名服务器把返回的结果保存到缓存，以备下一次使用，同时还将结果返回给客户机。史上前端面试最全知识点（附答案）一.html & js & css 1.AMD和CMD是什么？它们的区别有哪些？ AMD和CMD是二种模块定义规范。现在都使用...

scola666 2019-08-20 18:57 评论0 收藏0