展开

关键词

dom啦8 DOM事件

document.querySelector("a"); ww.onclick=function() { alert("a标签被点击了"); // 以下代码的含义: 用我们添加的事件覆盖掉系统同名的事件

21920

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

一、DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window image.png 二、流 流的概念,在现今的 JavaScript 三、DOM 事件流 ? 不难看出,事件在到达具体元素后,停止了冒泡,但不影响父元素的事件捕获 五、DOM0级事件 DOM0级事件,就是直接通过 onclick 等方式实现相应的事件 1、标签内写 onclick 事件 <input 这说明 DOM0 级添加事件时,后面的事件会覆盖前面的事件,而 DOM2级则不会,多个事件都会执行; 另外,DOM0级事件具有很好的跨浏览器优势,会以最快的速度绑定,但由于绑定速度太快,可能页面还未完全加载出来 ,以至于事件可能无法正常运行 六、DOM2级事件 1、DOM2级事件的方法 主流浏览器 DOM2 级事件是通过以下两个方法用于处理指定和删除事件处理程序的操作: addEvenetListener removeEventListener

84820
  • 广告
    关闭

    【玩转 Cloud Studio】有奖调研征文,千元豪礼等你拿!

    想听听你玩转的独门秘籍,更有机械键盘、鹅厂公仔、CODING 定制公仔等你来拿!

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

    DOM事件探索

    前端开发 JavaScriptD DOM ---- 1.事件事件流描述的是从页面中接受事件的顺序。 IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流 事件冒泡:事件从最开始的最具体的元素接受,然后逐级向上传递,传递到最不具体的元素(节点,也就是文档)。 2.事件处理程序 1.HTML事件处理程序 2.DOMO级事件处理程序 3.DOM2级事件处理程序 DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作,addEventListener 4.IE事件处理程序 attachEvent()添加事件 detachEvent()删除事件 这两个方法接收相同的两个参数:事件处理程序名称与事件处理函数 跨浏览器的事件处理程序: var eventUtil 1.DOM中的事件对象 (1)、type:获取事件类型 (2)、target:事件目标 (3)、stopPropagation() 阻止事件冒泡 (4)、preventDefault() 阻止事件的默认行为

    16950

    HTML DOM - 事件

    事件作出反应 当事件发生时,可以执行 JavaScript,比如当用户点击一个 HTML 元素时。 HTML 事件属性 如需向 HTML 元素分配事件,您可以使用事件属性。 ---- 使用 HTML DOM 来分配事件 HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件: 实例 为 button 元素分配 onclick 事件: document.getElementById ---- onload 和 onunload 事件 当用户进入或离开页面时,会触发 onload 和 onunload 事件。 onload 事件可用于检查访客的浏览器类型和版本,以便基于这些信息来加载不同版本的网页。 onload 和 onunload 事件可用于处理 cookies。

    16530

    Dom 事件处理函数

    很详细的一些事件,浏览器支持情况,以及详细的说明。在这里向整理者致敬。 <! org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dom Event Handlers/Dom 事件处理函数</title> <style type="text/css"> <! } </script> </head> <body>

    25480

    DOM事件模拟

    要确定浏览器是否支持DOM规定的HTML事件,可以使用如下代码: var isSupported = document.implementation.hasFeature("HTMLEvents", " 2.0"); 只有根据DOM2级事件实现这些事件的浏览器才返回true,以非标准方式支持这些事件的浏览器会返回false; 关于document.implementation的其它方法以及它们各自的返回值 ,可以查看MDN上的说明>> 目前主流的浏览器(非IE)支持DOM2级创建的事件类型有: 1、UIEvents     一般化的UI事件 2、MouseEvents  一般化的鼠标事件 3、MutationEvents   一般化的DOM变动事件 4、HTMLEvents  一般化的HTML事件 DOM3增加了文件事件TextEvent/TextEvents(Gecko)、键盘事件KeyboardEvent/KeyEvents evt.altKey = false; evt.ctrlKey = false; evt.shiftKey = false; evt.keyCode = 65; dom.fireEvent("onkeypress

    33010

    HTML事件属性--DOM

    研究html的对象,事件和方法,从js的角度来思考,这个标签的属性是通过什么方法,触发什么事件来实现的 键盘鼠标事件 页面窗口事件 表单事件 一、window事件属性 针对window对象触发的事件 } </script> 打印前和打印后的事件方法类似,一个是在打印前触发事件,一个是在打印这个事件结束之后触发onafterprint这个事件 demo查看 2.onbeforeunload/unload 离开页面之间触发的事件/之后触发的事件 打开f12,然后刷新,或者关闭浏览器,可以在浏览器触发事件 <script> window.onbeforeunload = function(){ } 13.onpopstate 当浏览器窗口记录改变时运行的脚本, 14.onredo 当文档执行撤销时触发的事件 二、form事件属性 由html表单内触发的事件,通常使用在form元素中 1.onblur /鼠标释放时触发的事件 一个是按下去的瞬间就触发 一个是当鼠标被松开的时候触发 onmouseup效果和onclick一样,因为click也是点击过后触发 这两个事件加起来相当于一个click事件,但是并不能用这两个事件来做点击事件的效果

    9920

    JavaScript HTML DOM 事件

    事件做出反应 我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。 </body> </html> HTML 事件属性 如需向 HTML 元素分配 事件,您可以使用事件属性。 ---- 使用 HTML DOM 来分配事件 HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件: 实例 向 button 元素分配 onclick 事件: <script ---- onload 和 onunload 事件 onload 和 onunload 事件会在用户进入或离开页面时被触发。 onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。 onload 和 onunload 事件可用于处理 cookie。

    11730

    DOM事件第二弹(UIEvent事件

    standard: 'input', ie: 'propertychange' } } var uitls = { bindEvent: function(dom useCapture){ var fix = fixs[eventType]; if(document.addEventListener){ dom.addEventListener fix.standard : eventType, fun, useCapture); }else{ dom.attachEvent('on' + ( fix ? 事件来代替(状态值)。 三、焦点事件 不是所有的标签都支持焦点事件,如div(不可编辑状态)、span、p等这类布局和显示内容的标签不支持焦点事件,主要form、以及form下的标签支持焦点事件

    47490

    dom啦17 焦点事件

    () { console.log(this.value); } // 在IE9以下, 如果想时时的获取到用户修改之后的数据, 可以通过onpropertychange事件来实现 oInput.oninput=function() // oninput事件可以时时获取到用户修改之后的数据, 只要用户修改了数据就会调用(执行) {

    16820

    JavaScript 教程「10」:DOM 事件

    事件 什么是事件 在之前 DOM 的学习中,我们主要学习了如何获取 DOM 元素,并且学会了如何给获取的元素进行属性修改等操作。但这些基本都是静态的修改,并没有接触到一些动作。 事件监听 事件监听,就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,这个过程就叫做注册事件DOM 元素被事件所触发。 charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DOM 事件类型 学习了事件的定义以及如何实现一个最简单的事件监听,接下来就来看看,Web API 中为 DOM 提供的常用事件类型有哪些。

    6421

    Jquery获取DOM绑定事件

    获取到当前正在执行的事件: $('#testDive').bind('click', function(event){alert('event: ' + event.type)}); 获取所有绑定事件

    62720

    再谈BOM和DOM(4):DOM0DOM2事件处理分析

    JavaScript能够让网站对用户的各种操作及时做出“反馈”,响应用户交互行为,而这些就是:DOM事件以及事件处理 DOM就是操作的元素,这个看《再谈BOM和DOM(1):BOM与DOM概述》 事件就是用户或浏览器自身执行的某种动作 DOM0级 事件监听 DOM 0级事件监听:把一个函数赋值给一个事件的处理程序属性 在w3c没有把其DOM 模型引入网页时,netscape与微软已经逼不及待到快他们熟悉的语言中把相关的DOM模型搞进来了 (例如,应用CSS之前和之后的文档)视图的接口; DOM事件DOM Events):定义了事件事件处理的接口; DOM样式(DOM Style):定义了基于CSS为元素应用样式的接口; 事件与样式 DOM3 事件监听 DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件也添加了一些新事件DOM中的事件模拟自定义事件 DOM3级还定义了自定义事件自定义事件不是由DOM原生触发的它的目的是让开发人员创建自己的事件

    18210

    Webkit底层原理(4)--DOM事件机制和Shadow DOM

    本文链接:https://blog.csdn.net/caomage/article/details/102162100 一、DOM事件机制 1. Webkit的事件处理机制 DOM事件分为很多种,与用户相关的只是其中一种,称为UIEvent,其他的包括CustomEvent、MutationEvent等。 当事件的派发机制遇到网页的盒模型特别是很多个盒的时候,情况变得比较复杂,这是因为事件需要在多个盒子和多个DOM树之间传递。当触控事件(Touch Events)被引入之后,情况更复杂了。 既然Shadow DOM在整个网页DOM树中不可见,那么事件如何处理呢?事件中需要包含事件目标,这个目标当然不能是不可见的节点,所以事件目标其实就是包含Shadow DOM子树的节点对象。 事件捕获的逻辑没有变化,在Shadow DOM子树内也会继续传递。当Shadow DOM子树中事件向上冒泡的时候,Webkit会同时向整个文档的DOM上传递该事件,以避免一些奇怪的行为。

    61840

    JS中DOM事件流总结

    一、事件捕获 1.概念 事件捕获:从document到触发事件的那个节点,自上而下的去触发事件。 2.图解 事件捕获 二、事件冒泡 1.概念 事件冒泡:从触发事件的那个节点一直到document,是自下而上的去触发事件。 2.图解 事件冒泡 三、DOM事件流 1.概念 DOM事件流相当于将事件捕获与事件冒泡两者结合起来,事件触发的顺序是先进行事件捕获阶段 => 目标元素阶段 => 事件冒泡阶段。 2.图解 DOM事件流 3.示例 绑定事件方法(addEventListener)的第三个参数是控制事件触发顺序的,默认为false,即事件冒泡;若为true,即事件捕获。 <! 事件阻止只能阻止后续的阶段事件并且未作用于同一元素上的事件函数。 六、备注 本文参照:https://segmentfault.com/a/1190000015603334

    11630

    深入理解 DOM 事件机制

    前言 本文主要介绍 DOM 事件级别、DOM 事件模型、事件流、事件代理和 Event 对象常见的应用,希望对你们有些帮助和启发! 一、DOM 事件级别 DOM 级别一共可以分为四个级别:DOM0 级、DOM1 级、DOM2 级和 DOM3 级。 而 DOM 事件分为 3 个级别:DOM0 级事件处理,DOM2 级事件处理和DOM3 级事件处理。由于DOM1 级中没有事件的相关内容,所以没有DOM1 级事件。 3.DOM3 级事件DOM 2级事件的基础上添加了更多的事件类型。 二、DOM 事件模型和事件DOM事件模型分为捕获和冒泡。一个事件发生后,会在子元素和父元素之间传播(propagation)。这种传播分成三个阶段。

    60250

    DOM事件第一弹

    近期温习了部分w3c上关于DOM事件的规范,发现以前有些模糊的概念更加清晰,以及受到罗胖(罗辑思维)的影响,很是想分享自己的了解的东西,希望大家给予指正或补充。 UIEvent iniUIEvent() 此处为DOM2级事件DOM3级对事件分解更加详细,后续文章继续整理。 现将常用的一些事件对象操作总结如下: 标准属性或者方法名 作用 IE兼容事件名 bubbles 判断事件是否冒泡阶段,true表示冒泡阶段 cancelable 指示事件是否可以取消默认动作 target 返回触发此事件的元素(事件的目标节点) srcElement type 返回事件的类型 preventDefault() 阻止默认事件的执行 returnValue为false表示 stopPropagation () 阻止事件的传播 cancelBubble属性为false 三、如何自定义一个事件 1.

    34360

    DOM事件机制(原理级别的)

    我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite...

    10710

    相关产品

    • 事件总线

      事件总线

      腾讯云事件总线(EB)是一款安全,稳定,高效的无服务器事件管理平台,支持腾讯云服务、自定义应用、SaaS应用以标准化、中心化的方式接入,帮助您轻松实现无服务器事件驱动架构。

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券

    Dom Event Handlers/Dom 事件处理函数
    事件 浏览器支持