js学习总结之dom2级事件基础知识详解


Posted in Javascript onJuly 27, 2017

我们使用的DOM2事件绑定,其实是让box通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法实现的。

DOM0级事件绑定:只能给一个元素的某一个行为绑定一次方法,第二次绑定的会把前面的覆盖掉。

DOM2:可以给某一个元素的同一个行为绑定多个不同的方法

box.addEventListener('click',function(e){
      console.log(1)
    },false)
    box.addEventListener('click',function(e){
      console.log(2)
    },false) // 输出1 2

DOM2:DOM0中的行为类型,我们用DOM2一样可以绑定,而且DOM2中还提供了一些DOM0没有的行为类型->DOMContentLoaded:当页面中的DOM结构(HTML结构加载完成)触发的行为

box.addEventListener('DOMContentLoaded',function(e){
      
    },false)
window.onload = function(){}

//当页面中的所有资源都加载完成(图片、HTML结构、音视频...)才会执行后面的函数;并且在一个页面中只能用一次,后面在写会把前面的覆盖掉;->因为他是采用DOM0事件绑定,所以只能绑定一次
     $(document).ready(function(){})//->$(function(){})
    /*
      只要页面中的HTML结构加载完成就会执行对应的函数;并且在同一个页面中可以出现多次。因此这个是采用DOM2事件的绑定,绑定的行为是DOMContentLoaded
    */

DOM2级添加和移除事件细节

function fn1(e){
      console.log(this);
    }
    //添加事件
    box.addEventListener('click',fn1,false);
    //移除事件
    box.removeEventListener('click',fn1,false);

注意:移除的时候需要保证三个参数:行为、方法、哪个阶段发生的   三个参数必须一致 ->DOM2在绑定的时候,我们一般都给他绑定的是实名函数

只能给某个元素的同一个行为绑定多个“不同”的方法(如果方法相同了,只能留一个)

当行为触发,会按照绑定的先后顺序依次把绑定的方法执行;执行的this是当前被绑定事件的元素本身

function fn1(){
      console.log(1);
    }
    //添加事件
    box.addEventListener('click',fn1,false);
    box.addEventListener('click',fn1,false);//只输出一个1

上面涉及一个概念:事件池(用来存储当前元素行为绑定的方法的,浏览器自带的机制) 如下图所示

js学习总结之dom2级事件基础知识详解

 但是在IE6-8浏览器中,不支持addEventListener,如果想实现DOM2事件绑定只能用attachEvent/detachEvent

它只有两个参数,不能像addEventListener那样控制在哪个阶段发生,默认只能在冒泡阶段发生,同时行为需要添加on(和DOM0特别的类似)

box.attachEvent('onclick',fn1)

注意:和标准浏览器的事件池机制对比:

1、顺序问题:执行的时候顺序是混乱的,标准浏览器是按照绑定顺序依次执行的

2、重复问题:ie6-8可以给同一个元素的同一个行为绑定多个相同的方法

3、this问题:ie6-8中当方法执行的时候,方法中的this不是当前的元素box而是window

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
用React Native制作一个简单的游戏引擎
May 27 Javascript
Angular指令之restict匹配模式的详解
Jul 27 #Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 #Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 #Javascript
Angularjs的键盘事件的绑定
Jul 27 #Javascript
Angularjs 事件指令详细整理
Jul 27 #Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 #Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 #Javascript
You might like
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
Python 26进制计算实现方法
2015/05/28 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
python2 对excel表格操作完整示例
2020/02/23 Python
python如何删除文件、目录
2020/06/23 Python
python 制作本地应用搜索工具
2021/02/27 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
优秀求职信范文分享
2013/12/19 职场文书
社区党员先进事迹
2014/01/22 职场文书
小学开学典礼主持词
2014/03/19 职场文书
签约仪式主持词
2014/03/19 职场文书
小学同学聚会感言
2015/07/30 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android