首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

事件高级

DOM事件流 html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。 ​...那么是先执行父元素的单击事件,还是先执行div的单击事件 ??? 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。...比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。 ?...现代浏览器都遵循了此标准,所以当事件发生时,会经历3个阶段。...键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。 事件对象的使用 事件触发发生时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。

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

    webAPIs03-属性选择器、环境对象this、事件、页面对象

    如上图所示,任意事件被触发时总会经历两个阶段:【捕获阶段】和【冒泡阶段】。 简言之,捕获阶段是【从父到子】的传导过程,冒泡阶段是【从子向父】的传导过程。...outer.addEventListener('click', function () { console.log('child...') }) 执行上述代码后发现,当单击事件触发时...,其祖先元素的单击事件也【相继触发】,这是为什么呢?...结合事件流的特征,我们知道当某个元素的事件被触发时,事件总是会先经过其祖先才能到达当前元素,然后再由当前元素向祖先传递,事件在流动的过程中遇到相同的事件便会被触发。...() { // xxxxx }) 页面尺寸事件 会在窗口尺寸改变的时候触发事件: window.addEventListener('resize', function() { // xxxxx

    78410

    事件高级

    DOM事件流 html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。 ​...那么是先执行父元素的单击事件,还是先执行div的单击事件 ??? 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。...比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。 ?...现代浏览器都遵循了此标准,所以当事件发生时,会经历3个阶段。...事件对象的使用 事件触发发生时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。 所以,在事件处理函数中声明1个形参用来接收事件对象。 ?

    1.5K41

    WEB入门之十四 jQuery事件

    data] , fn ] ) 元素的值发生改变时发生的事件 click( [ [data] , fn ] ) 单击鼠标时发生的事件 dblclick( [ [data] , fn ] ) 双击鼠标时发生的事件...鼠标悬浮到某元素上时发生的事件 mouseup( [ [data] , fn ] ) 松开鼠标按钮时发生的事件 scroll( [ [data] , fn ] ) 页面滚动时发生的事件 select(...图5.1.10 hover事件 5.3.2 toggle事件 该事件用于模拟鼠标的连续单击事件,第1次单击时触发第1个函数的执行;第2次单击时触发第2个函数的执行;第n次单击时触发第n个函数的执行。...div>div> 该示例与5.12差不多,只是由hover事件换成了toggle事件,当鼠标单击绿色的标题时,下面的内容就会显示出来;当鼠标再次单击绿色的标题时,下面的内容就会隐藏起来...,多个事件用空格隔开 data:该参数可选,表示事件发生时通过event对象传递的值 fn:表示事件发生时的处理函数 下面我们通过一个示例来演示on函数的用法,该示例让用户输入自己的身份证号,然后单击按钮时分析出用户的出生日期

    8410

    HTML DOM 学习

    事件触发条件 事件属性 事件说明 触发 onblur 失去焦点时 键盘、鼠标、blur方法 onfocus 获得焦点时 键盘、鼠标、focus方法 onchange 修改内容时 键盘、鼠标、赋值语句...onclick 鼠标单击时 键盘、鼠标、click方法 ondblclick 鼠标双击时 鼠标 onkeydown 键盘按下 键盘 onkeypress 键盘按键(按/松) 键盘 onkeyup 键盘抬起...鼠标 onload 载入时 系统 onsubmit 表单提交时 键盘、鼠标、submit方法 onreset 表单重置时 键盘、鼠标、reset方法 event对象属性 当事件发生时会产生事件对象,...事件对象得作用时用来记录事件发生得关键信息 属性 说明 条件 altKey、ctrlKey、shiftKey 是否按下Alt、Ctrl、Shift键 键盘鼠标 button 鼠标按钮是否按下 鼠标 keyCode...键盘按键时unicode值 键盘 clientX、clientY 鼠标在窗口区得坐标 鼠标 offsetX、offsetY 鼠标相对事件触发的坐标 鼠标 srcElement 事件触发者 事件

    97220

    【JS游戏编程基础】关于js里的this关键字的理解

    this关键字在c++,java中都提供了这个关键字,在刚开始学习时觉得有难度,但是只要理解了,用起来就方便多了,下面通过本篇文章给大家详解js里this关键字的理解。...2、用DOM方式在事件处理函数中使用this关键字: division element var div = document.getElementById('elmtDiv'); div.attachEvent...3、用DHTML方式在事件处理函数中使用this关键字: division element lt;mce:script language="javascript"> var div = document.getElementById...('onclick', this.ToString); //给这个对象的事件连上处理函数 this.newElement = document.createElement('DIV')...new element 单击func variable时,弹出对话框,显示undefined ——因为这时toString函数里的this指针指向window 单击new element时,弹出对话框显示

    3.1K101

    WEB入门之十四 jQuery事件

    [ [data] , fn ] ) 元素的值发生改变时发生的事件 click( [ [data] , fn ] ) 单击鼠标时发生的事件 dblclick( [ [data] , fn ] ) 双击鼠标时发生的事件...鼠标悬浮到某元素上时发生的事件 mouseup( [ [data] , fn ] ) 松开鼠标按钮时发生的事件 scroll( [ [data] , fn ] ) 页面滚动时发生的事件 select(...图5.1.10 hover事件 5.3.2 ​toggle事件​ 该事件用于模拟鼠标的连续单击事件,第1次单击时触发第1个函数的执行;第2次单击时触发第2个函数的执行;第n次单击时触发第n个函数的执行...div> div> 该示例与5.12差不多,只是由hover事件换成了toggle事件,当鼠标单击绿色的标题时,下面的内容就会显示出来;当鼠标再次单击绿色的标题时...,多个事件用空格隔开 data:该参数可选,表示事件发生时通过event对象传递的值 fn:表示事件发生时的处理函数 下面我们通过一个示例来演示on函数的用法,该示例让用户输入自己的身份证号,然后单击按钮时分析出用户的出生日期

    12910

    「Web编程API」- 03

    DOM事件流 html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。...那么是先执行父元素的单击事件,还是先执行div的单击事件 ???...比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。 当时的2大浏览器霸主谁也不服谁!...现代浏览器都遵循了此标准,所以当事件发生时,会经历3个阶段。...键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。 事件对象的使用 事件触发发生时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。

    1.4K50

    事件高级

    该方法接收三个参数:  type:事件类型字符串,比如 click 、mouseover ,注意这里不要带 on  listener:事件处理函数,事件发生时,会调用该监听函数  useCapture...DOM事件流 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。...比如我们给一个div 注册了点击事件:       事件冒泡: IE 最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点的过程。...事件对象的使用 事件触发发生时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。 所以,在事件处理函数中声明1个形参用来接收事件对象。...常情况下terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),  这时候this指向的是父元素,因为它是绑定事件的元素对象

    1.2K10

    浅析 JavaScript 中的事件委托

    事件传播 当你单击下面 html 中的按钮时: div id="buttons"> Click...那么事件传播是怎样帮助捕获多个按钮事件的呢? 该算法很简单:把事件侦听器附加到按钮的父级,并在单击按钮时捕获冒泡事件。这就是事件委托的工作方式。...你不需要把委托事件监听器直接附加到按钮上,而是可以委托父监听 div id="buttons">。单击按钮时,父元素的侦听器将会捕获冒泡事件(还记得前面所说事件传播吗?)。...该事件侦听器也会对按钮单击做出反应,因为按钮单击事件冒泡通过祖先元素(由于事件传播)。 步骤 3:用 event.target 选择目标元素 单击按钮时,将会用event 对象参数调用处理函数。...总结 当发生点击事件(或传播的任何其他事件)时: 事件从 window、document、根元素向下传播,并经过目标元素的祖先(捕获阶段); 事件发生在目标(目标阶段)上; 最后,事件在目标祖先之间冒出气泡

    2.7K30

    前端成神之路-WebAPIs03

    DOM事件流 html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。...那么是先执行父元素的单击事件,还是先执行div的单击事件 ??? ?...比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。 ? 当时的2大浏览器霸主谁也不服谁!...现代浏览器都遵循了此标准,所以当事件发生时,会经历3个阶段。...事件对象的使用 事件触发发生时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。 所以,在事件处理函数中声明1个形参用来接收事件对象。 ?

    3K20

    浅谈JavaScript的事件(事件流)

    事件冒泡   IE的事件流叫事件冒泡,即事件开始时,由具体的元素(文档中嵌套层次最深的节点)接收,然后向上传播到不具体的节点。...,如果单击了div,则事件会按照div、body、html的顺序执行。...也就是说事件首先发生了div上,而div也就是我们单击的元素。然后事件按照dom向上传播,直至传播到document对象。所有浏览器都支持事件冒泡。...如果以前面的例子,则事件发生的顺序为document、html、body和div。 DOM事件流   事件流包含三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。...下一个阶段处于目标阶段,于是事件在div上面发生,并在事件处理中被看成事件冒泡阶段的一部分。最后事件冒泡发生,并将事件回传到document。ie8以及更早的浏览器不支持Dom事件流。

    86880

    JavaScript高级笔记

    使用innerHTML属性修改标签体内容 事件简单学习 * 功能: 某些组件被执行了某些操作后,触发某些代码的执行。...* 如何绑定事件 1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码 1. 事件:onclick--- 单击事件 2....事件监听机制: * 概念:某些组件被执行了某些操作后,触发某些代码的执行。 * 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了 * 事件源:组件。如: 按钮 文本输入框......* 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。 * 常见的事件: 1....点击事件: 1. onclick:单击事件 2. ondblclick:双击事件 2.

    12010

    JS事件流

    可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应代码。 而事件流描述的是从页面接收事件的顺序。...事件的传播顺序如下: div body html document 也就是说,click 事件首先在元素 div 上发生,然后 click 事件沿 DOM 树向上传播,每一级的节点上都会发生,直至传播到...中所述案例,则单击 div 元素后,事件触发顺序如下: document html body div 也就是在事件捕获过程中,document 对象首先接收到 click 事件,然后事件沿 DOM 树向下依次传播...还以上述代码为例,单击 div 元素后的触发顺序则是: ?...下一阶段是处于目标阶段,于是事件在 div 上发生,并在事件处理中被看成冒泡的一部分。最后,冒泡阶段发生,事件传播回文档。 回顾问题 开篇提出的问题,仿佛在此可以得出结论: ?

    5.8K10

    笔记35-JavaScript高级

    使用innerHTML属性修改标签体内容 事件简单学习 * 功能: 某些组件被执行了某些操作后,触发某些代码的执行。...* 如何绑定事件 1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码 1. 事件:onclick--- 单击事件 2....事件监听机制: * 概念:某些组件被执行了某些操作后,触发某些代码的执行。 * 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了 * 事件源:组件。如: 按钮 文本输入框......* 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。 * 常见的事件: 1....点击事件: 1. onclick:单击事件 2. ondblclick:双击事件 2. 焦点事件 1. onblur:失去焦点 2. onfocus:元素获得焦点。 3.

    1.3K30
    领券