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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
jQuery DOM操作实例
Mar 05 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 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
10 个经典PHP函数
2013/10/17 PHP
twig里使用js变量的方法
2016/02/05 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
javascript string字符串优化问题
2011/07/31 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
Python3实现二叉树的最大深度
2019/09/30 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
毕业生求职简历的自我评价
2013/10/07 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
初中信息技术教学计划
2015/01/22 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript