JS的事件绑定深入认识
一、传统事件模型
传统事件模型中存在局限性。
内联模型以HTML标签属性的形式使用,与HTML混写,这种方式无疑造成了修改以及扩展的问题,已经很少使用了。
脚本模型是将事件处理函数写到js文件中,从页面获取元素进行对应事件函数的绑定以触发执行。但也存在不足之处:
1.一个事件绑定多个事件监听函数,后者将覆盖前者。
2.需要限制重复绑定的情况
3.标准化event对象
二、现代事件绑定
DOM2级事件定义了两个方法用于添加、删除事件:addEventListener()、removeEventListener().他们分别接收三个参数:事件名、函数、冒泡或捕获的布尔值(true表示捕获,false表示冒泡)。
与之对应,IE提供了类似的两个方法attachEvent()和 detachEvent(),但IE的两个方法存在另外的问题:无法传递this对象(IE中的this指向window)可以使用call方法进行对象冒充:
function addEvent(obj,type,fn){ if(typeof obj.addEventListener != 'undefined'){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent != 'undefined'){ obj.attachEvent('on' + type,function(){ fn.call(obj,window.event); }); } };
但由于添加时执行的是匿名函数,因此添加后无法进行删除;另外IE提供方法还会有无法顺序执行绑定事件、存在内存泄漏的问题。
为了解决这一系列的问题,就有必要对方法进行进一步的封装,对其他浏览器使用DOM2级标准进行,对于IE,采用基于传统模式的添加、删除,思路为:
1.添加是使用JS的散列表存储对象事件,为每一个对象事件分配一个ID值,按添加的调用顺序,先判断是否存在相同的处理函数,不存在的话就依次将事件绑定函数添加到散列表中,这样解决了无法顺序执行以及重复添加的问题
2.删除时进行遍历函数匹配的判断,存在则删除
总结:
之前对JS的事件绑定并没有太深的认识,甚至停留在传统事件绑定模型上,对程序实现上还是认识太浅,这次学习封装库这部分内容时,才学习到很多JS上面向对象的应用。虽说类似于JQuery的这样js库已经实现了很好的数据绑定机制的封装效果,但只知其然,不知其所以然还有会有种蒙在鼓里的感觉,亲自去分析一下具体的实现,会有一种豁然开朗的感觉,也体会到,做好一个兼容性、通用性强的程序更要考虑很多内容,解决很多问题,也正在在这些问题中逐渐清楚很多的。
相关推荐
-
js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,没有事件监听的机制,对于事件监听的兼容性问题是最大的难题: 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this); } <input type="button" onclick="eventfun()&qu
-
js 事件的传播机制(实例讲解)
事件的默认传播机制: 捕获阶段:从外向里依次查找元素 目标阶段:从当前事件源本身的操作 冒泡阶段:从内到外依次触发相关的行为(我们最常用的就是冒泡阶段) 具体见下图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #outer{ margin
-
js之事件冒泡和事件捕获详细介绍
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开
-
JS的事件绑定深入认识
一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写,这种方式无疑造成了修改以及扩展的问题,已经很少使用了. 脚本模型是将事件处理函数写到js文件中,从页面获取元素进行对应事件函数的绑定以触发执行.但也存在不足之处: 1.一个事件绑定多个事件监听函数,后者将覆盖前者. 2.需要限制重复绑定的情况 3.标准化event对象 二.现代事件绑定 DOM2级事件定义了两个方法用于添加.删除事件:addEventListener().removeEventLi
-
深入理解JS的事件绑定、事件流模型
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.键盘事件: keydown:键盘按下时触发 keypress:键盘按下并抬起的瞬间触发. keyup:键盘抬起触发 [注意事项] ①执行顺序:keydown keypress keyup ②keypress只能捕获数字,字母,符号键,
-
Node.js中使用事件发射器模式实现事件绑定详解
在Node里,很多对象都会发射事件.比如,一个TCP服务器,每当有客户端请求连接就会发射"connect"事件,又比如,每当读取一整块数据,文件系统就会发射一个"data"事件.这些对象在Node里被称为事件发射器(event emitter).事件发射器允许程序员订阅他们感兴趣的事件,并将回调函数绑定到相关的事件上,这样每当事件发射器发射事件时回调函数就会被调用.发布/订阅模式非常类似传统的GUI模式,比如按钮被点击时程序就会收到相应的通知.使用这种模式,服务端程
-
Cpage.js给组件绑定事件的实现代码
Cpage.js是一款轻量级的Mvvm框架,使用TypeScript(JavaScript的超集)开发. 内置模板引擎,路由,指令,http,dom等模块.可以方便地进行组件化开发,语法统一.易用,不依赖于第三方框架,适合中小项目开发. Cpage.js不仅可以给普通元素绑定事件,也可以给组件绑定事件! 首先,我们可以定义一个组件header var header = Cpage.component({ name: 'header', components: [], template: `<di
-
兼容浏览器的js事件绑定函数(详解)
因为javascript中所有对象都集成与Object,那么只有给Object原型添加一个事件绑定函数,就不需要在处理绑定事件的时候,每次写一长串代码,直接调用即可.在代码中添加红色部分代码,直接便可以在代码中直接调用 <div id="mydiv" style="cursor:pointer; background-color:#F00">nihaoa</div> <script language="javascript&q
-
js中DOM事件绑定分析
js事件绑定 JavaScript 有三种事件模型: 内联模型 脚本模型 DOM2 模型 1.内联模型 //基本废除不用 <input type="button" value="按钮" onclick="alert('Lee');" /> <input type="button" value="按钮" onclick="box();" /> 2.脚本模型 //基本
-
对Vue.js之事件的绑定(v-on: 或者 @ )详解
1.Vue.js事件绑定的一般格式 v-on:click='function' v-on:click/mouseout/mouseover/ @click 2.Vue.js事件绑定的实现 2.1 JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"&g
-
js实现同一个页面,多个enter事件绑定的示例
困得不行了 ,脑袋转不动了,大家直接拿代码用吧... document.onkeydown = function(e) { var ev = (typeof event!= 'undefined') ? window.event : e; if(ev.keyCode == 13 && document.activeElement.id == "") {//activeElement活动事件,该事件只可以使用于输入域中 console.log("内容111:&q
-
JS事件绑定的常用方式实例总结
本文实例讲述了JS事件绑定的常用方式.分享给大家供大家参考,具体如下: 常用的事件绑定的几种方式有三种: 直接在 dom 元素上进行绑定. 用 on 绑定. 用 addEventListener.attachEvent 绑定. 一.直接在 dom 元素上进行绑定 <input id="btn1" type="button" onclick="test();" /> 二.用 on 绑定 兼容性:在IE,FF,Chrome,Safari,
-
JS 事件绑定、事件监听、事件委托详细介绍
在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 在DOM中直接绑定事件
随机推荐
- Go语言文件操作的方法
- ruby on rails 代码技巧
- Redis实现唯一计数的3种方法分享
- 使用Chrome浏览器调试Android App详解
- PHP使用trim函数去除字符串左右空格及特殊字符实例
- php中的动态调用实例分析
- python使用range函数计算一组数和的方法
- Python获取Linux系统下的本机IP地址代码分享
- Javascript删除指定元素节点的方法
- canvas绘图不清晰的解决方案
- Python-基础-入门 简介
- ASP脚本的执行顺序详细说明
- CentOS7按时间段截取指定的Tomcat日志到指定文件的方法
- jquery提交form表单时禁止重复提交的方法
- 基于JavaScript实现的希尔排序算法分析
- Android 中Popwindow弹出菜单的两种方法实例
- C++实现广度优先搜索实例
- Android 在其他线程中更新UI线程的解决方法
- Android 摄像头高斯模糊的示例代码
- java开发之spring webflow实现上传单个文件及多个文件功能实例