展开

关键词

Web开发的基本功

浏览器默认行为执行与阻止分析首先简单回顾下DOM的事件处理过程:DOM0级:?在图(1)所示的capture phase中, 事件向下冒泡抵达目标的父元素。 级方法, DOM2级方法的优势为:可以添加多个事件先后执行。 需要注意的一点是IE仅从IE9开始支持DOM2级事件处理方式。 IE事件处理程序:IE(以及Opera)实现了attachEvent()detachEvent()方法进行事件绑定与解绑,绑定事件会被添加到冒泡阶段。 attachEvent的作用域为全局作用域,this == windows, 而DOM0中,this为被绑定元素。attachEvent可以绑定多个事件,与dom2类似。

449130

关于DOM事件流、DOM0级事件与DOM2级事件

防止事件冒泡而带来不必要的错误困扰。 不难看出,事件在到达具体元素后,停止了冒泡,但不影响父元素的事件捕获五、DOM0级事件DOM0级事件,就是直接通过 onclick 等方式实现相应的事件1、标签内写 onclick 事件 2、在 JS 这说明 DOM0 级添加事件时,后面的事件会覆盖前面的事件,而 DOM2级则不会,多个事件都会执行;另外,DOM0级事件具有很好的跨浏览器优势,会以最快的速度绑定,但由于绑定速度太快,可能页面还未完全加载出来 ,以至于事件可能无法正常运行六、DOM2级事件1、DOM2级事件的方法主流浏览器 DOM2 级事件是通过以下两个方法用于处理指定删除事件处理程序的操作:addEvenetListenerremoveEventListener2 注意:只有 DOM2级事件包含以下三个阶段 事件捕获阶段 处于目标阶段 事件冒泡阶段

55120
  • 广告
    关闭

    2021云+社区年度盘点发布

    动动手指转发活动或推荐好文,即可参与虎年公仔等百份好礼抽奖!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JavaScript事件探秘

    2、DOM0级事件处理程序DOM0级别事件处理程序是一种比较传统的,是指把一个行数赋值给一个事件处理程序的属性,也是用的比较多的方式。他的优点是:简单,而且具有夸浏览器的优势。 ;}如果要需要这个事件,可以这样写: btn2.onclick = null; 以上就是DOM0级事件处理方法。 3、DOM2级事件处理程序DOM2级事件定义了两个方法:用于处理指定删除事件处理程序的操作:addEventListener()removeEventListener()。 它们都接收三个参数:要处理的事件名、作为事件处理程序的函数一个布尔值。他的有点与DOM0级一样,还可以添加多个事件处理程序。 IE 中 event 对象的全部信息方法 DOM 对象中都有,只不过实现方式不一样。不过,这种对应关系让实现两种事件模型之间的映射非常容易。

    21120

    JavaScript第十一弹——事件流!事件代理!我懂了!

    今天要大家聊一聊事件!先给大家送上几个小概念:事件:事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScript与HTML之间的交互是通过事件实现的。 3)事件流:一个完整的DOM2事件流包括三个阶段:事件捕获、目标阶段事件冒泡阶段。 targetElement.innerHTML); } } 这是不是使得代码效率更高了呢,但是事件代理也并不是没有坑的,如果我们点击了父级节点,而又不希望冒泡到子节点呢,那么我们就要采用e.stopPropagation()来实现了3 DOM0 DOM2 DOM3不知道有没有细心的小伙伴发现我们前面提到过DOM2这样一个概念,有没有产生疑惑呢? 其实DOM经过发展,有了DOM0DOM2、DOM3等版本,对于事件处理也有所不同。1)DOM0: 直接通过on将事件绑定给DOM,如:Rabbit事件可以通过设置为null来移除。

    16220

    js事件浏览器兼容案例

    window.clipboardData.setData(text, value); } }, addHandler: function (element, type, func) { if (element.addEventListener) {DOM2 type, func, false); } else if (element.attachEvent) {IE element.attachEvent(on + type, func); } else {DOM0 element = func; } }, removeHandler: function (element, type, func) { if (element.removeEventListener) {DOM2 type, func, false); } else if (element.detachEvent) {IE element.detachEvent(on + type, func); } else {DOM0

    42420

    「面试常问」系统理解浏览器之事件机制

    = function() { } 移除事件btn.onclick = null DOM2 事件处理程序通过 addEventListener 可以添加 DOM2 级别的事件处理程序,它接收 3 个参数 )btn.addEventListener(click, () => { }, false) DOM0 事件处理程序的区别:addEventListener 可以改变事件流,即可以在捕获阶段触发事件 ,而 DOM0 是不行的;addEventListener 可以为同一个元素多次添加同一类型的事件处理程序,先添加的事件处理程序会先触发,而 DOM0 如果给同一个元素绑定多个相同类型的事件处理程序的话 let btn = document.getElementById(div)btn.attachEvent(onclick, function() { }) 它有这么几个注意事项:注册的事件名 DOM0 一样,需要带上 on,比如 onclick;在通过 attachEvent 添加的事件处理程序内部 this 会指向 window,而 DOM0 DOM2 的 this 会指向元素本身; addEventListener

    9820

    JavaScript 中 的 DOM BOM

    从根本上将 BOM 只处理浏览器窗口框架,但是人们习惯把针对浏览器的 JavaScript 扩展也算作 BOM 的一部分,例如:浏览器弹出新窗口的功能;移动、缩放关闭浏览器窗口的功能;navigator DOM2 在原有的 DOM 基础上又扩充了鼠标用户界面事件、范围、遍历(迭代 DOM 文档的方法)等细分模块,并且通过对象接口增加了对 CSS 的支持。 DOM2 级引入的模块有: - DOM 视图(DOM Views):定义了追踪不同文档的视图接口。 - DOM 事件(DOM Events):定义了事件事件处理的接口。 - DOM 遍历范围(DOM Traversal and Range):定义了遍历操作文档树的接口。 DOM0 级,DOM0 级标准本质上不存在,所谓 DOM0 只是 DOM 历史坐标中的一个参照点,具体来说,DOM0 级是指 Internet Explorer 4.0 Netscape Navigator

    7320

    js高程之事件通识篇(一)

    事件处理对象html事件处理函数这一类在我们原生开发的时候很常见,直接用标签的事件属性绑定函数,在vue的框架写法中也是类似的写法,至于其底层是html事件处理还是下面的dom0级,后面我会在查看对应的源码 dom0级处理函数将一个函数赋值给一个事件处理属性,这种方式跨浏览器,写法简单,兼容性好,但是它需要一个对元素的引用,所以如果这个事件如果定义在元素的前面,那么事件就不会绑定上。 let btn = document.getElementById(btn);btn.onclick = function(){ console.log(this)}dom2级事件dom2级事件定义了两个方法 ,用于处理指定程序删除事件处理程序的操作。 ie事件处理程序attachEvent与detatchEvent 分别可以用来为ie增加移除事件监听程序。与dom0级不同的是,其是为全局添加的,也就是事件里的this为window。

    24630

    JS魔法堂:元素克隆、剪切技术研究

    实际测试效果: 浏览器 复制子元素 标准属性(property) 标准特性(attribute) 自定义特性(customize attribute) 自定义属性(expando) DOM0事件处理函数 DOM2事件处理函数 parentNode parentElement的值 ownerDocument IE5.5~8 √ √ √ √ √(浅复制) Χ Χ null 不变  IE9+ √ √  √ 事件处理函数 DOM2事件处理函数 parentNode parentElement的值 ownerDocument  IE9+ √ √  √ √  Χ  Χ   Χ  null 当前文档的document 事件处理函数 DOM2事件处理函数 parentNode parentElement的值 ownerDocument  IE9+ √ √  √ √ √ √ √ null 当前文档的document对象 事件处理函数 DOM2事件处理函数 parentNode parentElement的值 ownerDocument  IE9+ √ √  √ √ √ √ √  充当 clipboard的div元素

    37050

    关于面试的一些问题合集

    盒模型分为:W3C标准盒模型IE盒模型W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。 IE 盒子模型的范围也包括 margin、border、padding、content,标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border pading。 也触发了包含这个元素的所以祖先容器IE:事件冒泡(由最开始具体的元素接收,然后逐级向上传播)Netscape:事件捕获(最外层更早接收到事件,最具体的元素最后接收到事件) 事件处理程序HTML事件处理程序 DOM0 级事件处理程序var btn2=document.getElementById(btn2);btn2.onclick=function(){alert(hello DOM0)} DOM2级事件处理程序var document.getElementById(btn3);btn3.addEventListener(click,showMes,false)function showMes(){alert(hello DOM2

    35760

    submit方法与onsubmit事件

    1.dom0方式绑定 var obj = document.getElementById(myform); var check = function(){ if (error){验证出错的情况just 2.用dom2方式绑定(addEventListener)看下面这段代码: var obj = document.getElementById(myform); var check = function ); } else { IE浏览器 window.event.returnValue = false; } }} 三.如何用代码触发onsumbit这也取决于你用何种方式绑定onsubmit事件1.dom0 = false){ obj.submit();} 2.dom2方式绑定(参见二.2) if (obj.fireEvent) {for ie if (obj.fireEvent(onsubmit)){ obj.submit

    46120

    【JS】395-重温基础:事件

    1.3 DOM事件流“DOM2级事件”规定的事件流包含三个阶段:事件捕获阶段,处于目标阶段事件冒泡阶段。事件捕获为截获事件提供机会,然后实际的目标接收到事件,最后事件冒泡,对事件作出响应。 我们将事件处理程序,分为这么几类:HTML事件处理程序DOM0级事件处理程序DOM2级事件处理程序IE事件处理程序跨浏览器事件处理程序2.1 HTML事件处理程序某个元素支持的事件,都可以用一个与相应事件处理程序同名的 IE的attachEvent()DOM0级方法区别:两者事件处理程序的作用域不同。DOM0级方法,作用域在所属元素的作用域。 级方法、DOM2级方法或IE方法即可,默认采用DOM0级方法。 3.1 DOM中的事件对象无论指定事件处理程序时使用什么方法(DOM0级方法或DOM2级方法),都会传入 event对象:var leo = document.getElementById(leo);leo.onclick

    36060

    JS-DOM2级封装练习题--点击登录弹出登录对话框

    Document-DOM2级封装练习题 * { margin: 0; padding: 0; } .head { font-size: 12px; padding: 6px 0 0 10px; } # 事件都不必要添加‘on’,但是ie少不了on,就在type前加上‘on’,不用加false或ture,因为ie只支持冒泡,默认是false也只有false } else { ele = hander;不支持dom2 级操作的话,就调用dom0级的样式,就比如obj.onclick = function(){}一样,ele=obj,onclick=on+type,hander=function(){};值得注意的是, 1:需要加on,因为传过来type时不用加on但是dom0级调用事件是要有on的。

    59670

    JS事件流

    后来ECMAScript在DOM2中对事件流进行了进一步规范,基本上就是上述二者的结合。 DOM0:不是W3C规范。DOM0级事件具有极好的跨浏览器优势,会以最快的速度绑定。 专注于HTML文档XML文档。其中DOM1级事件处理标准中并没有定义事件相关的内容,所以没有所谓的DOM1事件处理DOM2:对DOM1增加了 样式表对象模型DOM2级定义了两个事件处理程序。 增加了 内容模型 (DTD 、Schemas) 文档验证 。 对DOM2增加了 内容模型 (DTD 、Schemas) 文档验证 。定义了一些新的事件,比如键盘事件,还可以自定义事件。

    15920

    再谈BOMDOM(4):DOM0DOM2事件处理分析

    为什么没有DOM0及DOM1 事件我们的确定标准了是没有DOM0级的。所谓DOM0级只是DOM历史坐标中的一个参照点而已。 具体说来,DOM0级指的是Internet Explorer 4.0Netscape Navigator 4.0最初支持的DHTML。 实际上,DOM0级标准是不存在的,所谓的DOM0级是DOM历史坐标中的一个参照点而已,具体说呢,DOM0级指的是IE4Netscape 4.0这些浏览器最初支持的DHTML..大概2000年的时候争论过 级 事件处理程序DOM2开始推崇三层分离:DOM视图(DOM Views):定义了跟踪不同文档(例如,应用CSS之前之后的文档)视图的接口;DOM事件(DOM Events):定义了事件事件处理的接口 DOM3 事件监听DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件也添加了一些新事件。

    13910

    attachEventaddEventListener区别

    一般来说,可以直接封装成这种形式:var addEvent = function(element,type,handler){ if(element.addEventListener){ DOM2级 element.addEventListener element.attachEvent(on+type,function(){ 默认皆为冒泡 handler.call(element); }); }else{ element = handler; DOM0 级 } };addEventListener的使用方式:主要是DOM2级target.addEventListener(type, listener, useCapture);target就是要注册事件的对象

    27520

    事件

    事件DOM2级在事件监听使用方式上有什么区别? 在W3C对DOM事件进行规范化之前的事件处理,一般称为DOM0级事件处理程序。W3C在DOM2级文档规范中,包含了DOM 事件(DOM Events)规范,也就是我们通常所说的DOM2级事件处理程序。 DOM2级事件处理方式:DOM2级事件处理方式指定了,添加事件处理程序删除事件处理程序的方法。 DOM2级定义了addEventListener()removeEventListener()用于处理指定删除事件处理程序。 二者区别:使用Dom2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序,而Dom0级为一个事件添加多个事件处理程序时,后面的程序会覆盖前面的。

    35730

    JavaScript事件详解

    JavaScript事件模型 JavaScript事件模型,也就是事件机制,分为两类DOM0级事件模型DOM2级事件模型。 DOM0级事件模型 DOM0级事件模型是早期的事件模型,比如说一个onclick事件 缺点: 无法绑定多个相同的事件,注册多个同类型的函数的话,就会发生覆盖,之前注册的函数就会无效 document.getElementById function(event){ var event=event||window.event; var target=event.target||event.srcElement alert(target);} DOM2 级事件模型 在DOM2级中使用addEventListenerremoveEventListener来注册解除事件(IE8及之前版本不支持,IE7、IE8用 attachEvent)。 事件流又称为事件传播,DOM2级事件规定的事件流包括三个阶段:事件捕获阶段(capture phase)、处于目标阶段(target phase)事件冒泡阶段(bubbling phase) 首先发生的是事件捕获

    8910

    跨浏览器事件处理

    dom0事件为直接在元素上写方法;dom2事件是通过添加Listener方法来进行函数调用; var but = document.getElementById(but); function view(

    5920

    JavaScript学习笔记012-DOM2级事件监听-代理0冒泡-捕获模式

    我说:不会,只会原生js,我要做开发 前端59期学员作业 *内部样式表* 冒泡模式(默认):同一环境下同一对象执行的事件由内向外执行 捕获模式:同一环境下同一对象执行的事件由外向内执行 DOM0级事件 box.onclick = function ( ){}; 一个对象只能绑定一个事件,默认使用冒泡,不可以捕获 某些情况下,不需要事件冒泡这个特性,就需要取消事件冒泡 阻止事件冒泡 DOM0级事件阻止事件冒泡写法 event.stopPropagation();event,cancelBubble = true; 低版本ie兼容写法 DOM2级事件 添加事件监听obj.addEventListener(type

    25210

    相关产品

    • 图数据库 KonisGraph

      图数据库 KonisGraph

      图数据库KonisGraph(TencentDB for KonisGraph)是基于腾讯在社交网络、支付、游戏和音乐等业务场景超大规模图数据管理的经验积累,为您提供的一站式高性能海量图数据存储、管理、实时查询、计算和可视化分析的数据库服务。支持属性图模型和TinkerPop Gremlin查询语言,帮助用户快速完成对图数据的建模、查询和分析;支持百亿级节点、万亿级边的超大规模图数据中关联关系的查询分析。广泛适用于社交网络、金融支付、安全风控、知识图谱、广告推荐和设备拓扑网络等具有海量关系数据的场景。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券