当前位置: 首页 > news >正文

深入学习之事件兼容2 以及二级事件

、    //pageX/pageY在IE6~8下不兼容
    // e.pageX = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
    //e.pageY = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));

    //target:当前事件源(行为是发生在哪个元素上的,这个元素就是当前的事件源)
    //在IE6~8下不兼容
   // e=e||window.event
    //e.target= e.target|| e.srcElement;

    //type:当前事件行为的类型  例如:"click"

    //preventDefault:阻止事件的默认行为
    //在IE6~8下不兼容
    //e.preventDefault ? e.preventDefault() : e.returnValue = false;

//阻止冒泡传播
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;

  //事件委托的原理:
    //利用了事件默认会进行冒泡传播的机制,我们给最外层的元素绑定一个方法,当里面元素的相关行为触发的时候,最外面的绑定的方法也会执行,我们可以通过事件对象中的事件源判断当前点击的是哪一个元素,从而进行不一样的处理

 function move() {
      window.clearTimeout(oDiv.timer);
      <js code>
      oDiv.timer = window.setTimeout(move, 10);
  }

/对于一个容器中我们多个元素都要绑定相关的行为,做不同的处理,我们测试后的结果发现:使用事件委托的方式处理,比一个个的单独绑定事件,在执行和处理的速度上提升了一倍(事件委托非常的重要)
    //对于一些其他的需求,除了事件委托你是处理不了的

 //给最外面的body绑定一个点击事件,当里面的某一个元素的点击行为被触发的时候,在不阻止冒泡传播的情况下,body的click行为都会被触发,我们为其绑定的那个方法也会执行
    //e.target是事件源:就是我们当前点击的这个元素
  //之前的代码存在一个问题:
    //鼠标如果移动端的速度过快,盒子会跟不上鼠标移动端,导致鼠标从盒子上脱离;我们鼠标在盒子外面移动或者抬起和盒子是没有任何关系的了;这样的话我们之前给boxTop绑定的move和up都不能移除了;当鼠标再次进去我们的盒子,哪怕是没有按下,盒子也会跟着鼠标移动...
    // ->"鼠标丢失问题"

    //JS中,在IE和火狐浏览器下我们使用一个方法,把鼠标和元素强行的用绳子绑定到一起:setCapture
    //谷歌下应用 鼠标即使滑动在快你也永远跑不出document,这样的话我们的move/up事件就不给boxTop,给document绑定




//DOM2级事件绑定 ->定义在当前元素原型链上的EventTarget这个类的prototype上  addEventListener/removeEventListener

   //1、DOM2相对于DOM0增加了哪些的优势?
    //1)DOM0只能给一个元素的同一个行为绑定一次方法,第二次绑定的会把第一次的给覆盖掉;DOM2可以给一个元素的同一个行为绑定多个不同的方法;-->事件池/事件队列



  //2)DOM0在事件的默认传播机制中我们能够操作的只有冒泡阶段(但是捕获阶段也存在,我们不能操作而已)(事件委托、阻止冒泡传播...)
    //DOM2是既可以操作冒泡阶段,也可以操作捕获阶段-->addEventListener最后一个参数是false,代表在冒泡阶段我们进行操控(最常用的);最后一个参数是true,代表我们是在捕获阶段操控;

 //$(document).ready():只要页面中的HTML结构将加载完成就会执行对应的操作(一个页面可以使用多次)
    //document.addEventListener("DOMContentLoaded",function(){},false);


    //DOM0级事件绑定 ->定义在当前元素对象的私有的属性上的 oDiv.οnclick=function(e){}
    //DOM2级事件绑定 ->定义在当前元素原型链上的EventTarget这个类的prototype上  addEventListener/removeEventListener

    //1、DOM2相对于DOM0增加了哪些的优势?
    //1)DOM0只能给一个元素的同一个行为绑定一次方法,第二次绑定的会把第一次的给覆盖掉;DOM2可以给一个元素的同一个行为绑定多个不同的方法;-->事件池/事件队列

    //2)DOM0在事件的默认传播机制中我们能够操作的只有冒泡阶段(但是捕获阶段也存在,我们不能操作而已)(事件委托、阻止冒泡传播...)
    //DOM2是既可以操作冒泡阶段,也可以操作捕获阶段-->addEventListener最后一个参数是false,代表在冒泡阶段我们进行操控(最常用的);最后一个参数是true,代表我们是在捕获阶段操控;

    //3)DOM0中的事件行为DOM2中都有,DOM2中还提供了一些我们DOM0中没有的事件行为:DOMContentLoaded ->当页面上的HTML结构加载完成就会执行对应的操作

    //window.onload:只有当页面中的HTML结构、图片、文字等所有资源都加载完成才会执行对应的操作 (在一个页面中只能使用一次,使用多次后面会把前面的覆盖掉->因为它是DOM0级事件绑定,如果改为DOM2事件绑定也是可以使用多次的) window.addEventListener("load",function(){},false);

    //$(document).ready():只要页面中的HTML结构将加载完成就会执行对应的操作(一个页面可以使用多次)
    //document.addEventListener("DOMContentLoaded",function(){},false);



    //3)DOM0中的事件行为DOM2中都有,DOM2中还提供了一些我们DOM0中没有的事件行为:DOMContentLoaded ->当页面上的HTML结构加载完成就会执行对应的操作

    //window.onload:只有当页面中的HTML结构、图片、文字等所有资源都加载完成才会执行对应的操作 (在一个页面中只能使用一次,使用多次后面会把前面的覆盖掉->因为它是DOM0级事件绑定,如果改为DOM2事件绑定也是可以使用多次的) window.addEventListener("load",function(){},false);

    //$(document).ready():只要页面中的HTML结构将加载完成就会执行对应的操作(一个页面可以使用多次)
    //document.addEventListener("DOMContentLoaded",function(){},false);


//事件的传播分为两个阶段:
    //捕获阶段、冒泡阶段 ->捕获在前,冒泡在后
    //捕获阶段:从外向内执行
    //冒泡阶段:从内向外执行



    oDiv.addEventListener("click", function (e) {
        console.log("ok");
    }, false);


 function fn12() {
        console.log(12);
        console.log(this);
    }


    oDiv.attachEvent("onclick", fn1);



 function fn12() {
        console.log(12);
        console.log(this);
    }


    oDiv.attachEvent("onclick", fn1);

  //DOM2兼容问题:
    //在标准的浏览器中采用addEventListener/removeEventListener,在IE6~8中不支持这个,需要使用attachEvent/detachEvent;
    //oDiv.addEventListener("click",fn1,false);//三个参数,行为不需加on
    //oDiv.attachEvent("onclick",fn1);//两个参数,行为需要加on,第三个参数没有说明我们的这个只能在冒泡阶段发生

    //1)顺序问题->标准浏览器中绑定多个方法,方法的执行顺序和绑定的顺序保持一致,而在IE6~8中顺序是混乱的
    //2)重复问题->标准浏览器中是对于给一个元素的同一个行为绑定多次一样的方法,浏览器会自己把重复的过滤掉,而在IE6~8中是不进行过滤的,绑定重复了也会执行多次
    //3)this问题->标准浏览器中绑定的方法中的this是当前的元素,而IE6~8中是window



/移除:在DOM2移除的时候,我们需要保证三个参数高度的一致才能移除
    //    function fn(e) {
    //        console.log("ok");
    //        oDiv.removeEventListener("click", fn, false);
    //    }
    //    oDiv.addEventListener("click", fn, false);





相关文章:

  • 看了网友Roy的评论,研究了一下用filter来解决Struts中文乱码的问题!
  • 深入学习之h5 以及媒体查询
  • 保护自己的MIDlet程序之二:TimeProtector
  • 深入学习之动画
  • 保护自己的MIDlet程序之三:SNProtector
  • 深入学习之前端递归应用
  • 深入学习之浅拷贝
  • 保护自己的MIDlet程序
  • 深入学习之非关系数据库
  • 深入学习之http
  • 实战程序管理器和多语言程序
  • 深入学习之闭包和bind 原型重写
  • 浏览器的渲染过程
  • J2ME-定时器(TimerTask)使用及初探
  • 深入学习之改变this的方法
  • Android交互
  • emacs初体验
  • FineReport中如何实现自动滚屏效果
  • go语言学习初探(一)
  • IIS 10 PHP CGI 设置 PHP_INI_SCAN_DIR
  • JavaScript 基础知识 - 入门篇(一)
  • JS函数式编程 数组部分风格 ES6版
  • Laravel Mix运行时关于es2015报错解决方案
  • miniui datagrid 的客户端分页解决方案 - CS结合
  • node学习系列之简单文件上传
  • python 学习笔记 - Queue Pipes,进程间通讯
  • QQ浏览器x5内核的兼容性问题
  • Quartz实现数据同步 | 从0开始构建SpringCloud微服务(3)
  • Travix是如何部署应用程序到Kubernetes上的
  • Wamp集成环境 添加PHP的新版本
  • 解决iview多表头动态更改列元素发生的错误
  • 聊聊sentinel的DegradeSlot
  • 免费小说阅读小程序
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 浅谈Golang中select的用法
  • Salesforce和SAP Netweaver里数据库表的元数据设计
  • ![CDATA[ ]] 是什么东东
  • # 再次尝试 连接失败_无线WiFi无法连接到网络怎么办【解决方法】
  • #、%和$符号在OGNL表达式中经常出现
  • #mysql 8.0 踩坑日记
  • #鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行
  • #我与Java虚拟机的故事#连载18:JAVA成长之路
  • (1)SpringCloud 整合Python
  • (10)STL算法之搜索(二) 二分查找
  • (读书笔记)Javascript高级程序设计---ECMAScript基础
  • (二十四)Flask之flask-session组件
  • (介绍与使用)物联网NodeMCUESP8266(ESP-12F)连接新版onenet mqtt协议实现上传数据(温湿度)和下发指令(控制LED灯)
  • (三)模仿学习-Action数据的模仿
  • (转载)从 Java 代码到 Java 堆
  • .babyk勒索病毒解析:恶意更新如何威胁您的数据安全
  • .NET/C# 异常处理:写一个空的 try 块代码,而把重要代码写到 finally 中(Constrained Execution Regions)
  • .netcore 如何获取系统中所有session_如何把百度推广中获取的线索(基木鱼,电话,百度商桥等)同步到企业微信或者企业CRM等企业营销系统中...
  • .net和jar包windows服务部署
  • @entity 不限字节长度的类型_一文读懂Redis常见对象类型的底层数据结构
  • @Validated和@Valid校验参数区别