事件流，事件对象和jQuery

JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript 中的事件冒泡与事件捕获</title> </head> <body> <div id="Red" style="width:200px;height:200px;background-color:red;padding:2…

Javascript与HTML之间的交互是通过事件实现. 一.事件流事件,是文档或浏览器窗口中发生的一些特定的交互瞬间.事件流,描述的是页面中接受事件的顺序.IE9,chrome,Firefox,Opera,Safari均实现了DOM2级规范中定义的标准DOM事件,而IE8和IE8以下版本仍然保留专有的事件处理方式. 事件冒泡事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播. <!DOCTYPE html> <html…

JavaScript 事件事件流事件对象事件处理程序回调函数 error和try...catch和throw

参考资料: 慕课网 DOM事件探秘 js事件对象处理事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数来处理. 定义某种行为,然后将其添加到用户触发的事件之上(比如点击或者按键) 事件: 是文档/浏览器窗口中发生的,特定的交互瞬间. UI事件焦点事件鼠标和滚轮事件 click 鼠标主键(一般是左键)或按下回车键 dbclick 双击鼠标主键 mousedown 按下任意鼠标键,不能通过键盘触发…

JavaScript Event 事件事件流事件对象事件处理程序回调函数 error和try...catch和throw

参考资料: 慕课网 DOM事件探秘 js事件对象处理事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数来处理. 定义某种行为,然后将其添加到用户触发的事件之上(比如点击或者按键) 事件: 是文档/浏览器窗口中发生的,特定的交互瞬间. UI事件焦点事件鼠标和滚轮事件 click 鼠标主键(一般是左键)或按下回车键 dblclick 双击鼠标主键 mousedown 按下任意鼠标键,不能通过键盘触发…

js的事件流事件机制

(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开…

JS事件（一）事件流&事件处理程序

1.事件流描述的是从页面接收事件的顺序 IE和Netscape提出了几乎完全相反的事件流概念 IE:事件冒泡(由内而外) Netscape:事件捕获(由外向内) DOM2级事件规定事件流包括三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段 2.为事件指定处理程序的方式 2.1.HTML事件处理程序 <script> function fun(){ alert('clicked'); } </script> <button onclick="func()"…

JavaScript事件流--事件冒泡、目标与事件捕获

1.事件冒泡微软提出了名为事件冒泡的事件流.事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面.也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象. 因此上面的例子在事件冒泡的概念下发生click事件的顺序应该是p -> div -> body -> html -> document 2.事件捕获网景提出另一种事件流名为事件捕获与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素. 上面的例子在事件捕获的概念下发生click事件…

python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px).当一个元素的宽度需要数学计算的时候推荐使用.width() 方法 . 举例: <!DOC…

jQuery基础（4）- 位置信息、事件流、事件对象、事件代理、jquery事件

一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // 获取匹配元素集合中的第一个元素的宽度值,内容宽度,不含padding .height() // 获取匹配元素集合中的第一个元素的高度值,内容高度,不含padding 注意:这个方法不接受任何参数..css(‘width’)(或.css(‘height’))和 .width()(或.height()…

jQuery系列（九）：JS的事件流的概念

1.事件概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念. (1)什么是事件流事件流描述的是从页面中接收事件的顺序 a.DOM事件流 “DOM2级事件”规定的事件流包括三个阶段: ① 事件捕获阶段: ② 处于目标阶段: ③ 事件冒泡阶段那么其实呢,js中还有另外一种绑定事件的方式:看下面代码: <!D…

JavaScript的事件概述以及事件对象，事件流

事件处理程序 JavaScript 事件对象是由访问 Web 页面的用户引起的一系列操作,例如:用户点击页面上的某个按钮或者鼠标移动到页面的某个图片上而产生一系列的互动的反馈. 我们通过为指定事件绑定回调函数的形式来处理事件,当指定事件触发以后我们的回调函数就会被调用,这样我们的页面就可以完成和用户的交互了. 事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netscape Navigator 中出现,作为分担服务器端运算负载的一种手段.直到几乎所有的浏览器都支持事件处理. Jav…

jQuery通过event获取点击事件的事件对象

要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流事件对象: 当事件发生时会产生事件对象,事件对象的作用是用来记录“事件发生是一些相关的信息.注意事件对象只有在事件发生时才会产生,我们无法手动创建,并且事件对象只能在处理函数内部访问,处理函数允许结束后该对象自动销毁. 怎么理解那?? 如上代码,当onmousemove事件发生时,就会产生一个事件对象,就是程序中的event对象,我们只能在这个匿名函数中访问到这个event对象,在函数外面是访问不到的,同样我们也无法手动…

【追寻javascript高手之路05】理解事件流

前言新的一天又开始了,我们对今天对未来抱有很大期待,所以开始我们今天的学习吧,在此之前来点题外话,还是爱好问题. 周三的面试虽然失败,但是也是很有启迪的,比如之前我就从来没有想过爱好问题,我发现我的爱好如下: ① 霹雳布袋戏完了就米有什么爱好了,其实我完全可以说自己爱好旅游什么的,我也确实爱好旅游,只不过比较穷,走的地方不多罢了,这里又扯出一个话题: 学习工作与生活我们为了理想需要学习需要工作,工作完了需要生活,现在是前者分量掩盖了后者,所以以后的世界要注意了. 好了进入今天的学习吧,我们…

09-JS的事件流的概念(重点)

在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念. 什么是事件流事件流描述的是从页面中接收事件的顺序 1.DOM事件流 “DOM2级事件”规定的事件流包括三个阶段: ① 事件捕获阶段: ② 处于目标阶段: ③ 事件冒泡阶段那么…

前端 ----js的事件流的概念（重要）

09-JS的事件流的概念(重点) 在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念. 什么是事件流事件流描述的是从页面中接收事件的顺序 1.DOM事件流 “DOM2级事件”规定的事件流包括三个阶段: ① 事件捕获阶段: ②…

JS的事件流的概念(重点)

09-JS的事件流的概念(重点) 在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念. 什么是事件流事件流描述的是从页面中接收事件的顺序 1.DOM事件流 “DOM2级事件”规定的事件流包括三个阶段: ① 事件捕获阶段:…

09-----JS事件流的概念（重点）

在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文时间的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念. 什么是事件流事件流描述的是从页面中接收事件的顺序 1.DOM事件流 “DOM2级事件”规定的事件流包括三个阶段: ① 事件捕获阶段: ② 处于目标阶段: ③ 事件冒泡阶段那么…

08 JS的事件流的概念(重点)

在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念. 什么是事件流事件流描述的是从页面中接收事件的顺序 1.DOM事件流 “DOM2级事件”规定的事件流包括三个阶段: ① 事件捕获阶段: ② 处于目标阶段: ③ 事件冒泡阶段那么…

js事件流

event:事件对象,当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存在一个指定地方-event对象,供我们在需要调用.event对象必须是在一个事件调用的函数里 ie/chrome :event是一个全局对象ff:标准事件对象是通过事件函数的第一个参数传入如果一个函数是被事件调用的那么这个函数定义的第一个参数就是事件对象event兼容:function(ev){ var e=ev || event;} onmousemove:当鼠标在一个元素上面移动时触…

添加事件及Event对象的兼容写法

一.事件流事件流描述的是从页面中接受事件的顺序. IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流 1.事件冒泡事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档). 2.事件捕获事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. 二.事件处理程序 1.HTML事件处理程序 2.DOM0级事件处理程序 3.DOM2级事件处理程序 DOM2级事件定义了两个方法:用于处理指定和删除事件处…

JavaScript - 事件流

事件流事件冒泡就是事件沿DOM树向上传播,在没一级节点上都会发生,直至传播到document对象. 事件捕获正好相反,但是老版本的浏览器不支持,因此很少有人使用事件捕获. 事件处理程序 HTMl 事件处理程序事件处理程序中的代码在执行时候,有权访问全局作用域中的任何代码.该函数包含一个局部变量event.同时在该函数内部的this值等于事件的目标元素.该函数的作用域很特殊,类似于如下的形式: function(){ with(document) { with(this) { // } } }…

js事件流、事件处理程序/事件侦听器

1.事件流事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点.事件捕获的用意在于事件到达预定目标之前捕获它. DOM事件流 “DOM2级事件流”规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和冒泡阶段.首先发生的是事件捕获,为截获事件提供了机会.然后是实际的目标接收到…

JS Event事件流（冒泡机制、捕获机制、事件绑定）

1.事件流事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).对于html来说,就是当一个元素产生了一个事件,它会把这个事件传递给它的父元素,父元素接收到了之后,还要继续传递给它的上一级元素,就这样一直传播到document对象(亲测现在的浏览器到window对象,只有IE8及下不这样): 再多说一句,现在的浏览器默认是采用的是事件…

javaScript事件流是什么？

一.事件事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字. 事件是javaScript和DOM之间交互的桥梁. 你若触发,我便执行--事件发生,调用它的处理函数执行相应的JavaScript代码给出响应. 典型的例子有:页面加载完毕触发load事件:用户单击元素,触发click事件. 二.事件流事件流描述的是从页面中接收事件的顺序. 1.事件流感性认识问题:单击页面元素,什么样的元素能感应到这…

JS事件流与DOM事件处理程序

在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节点上绑定的事件,例如click,dblclick,mouseenter等,以及事件在DOM节点中的传播.今天我们主要就javascript中事件流的传播过程以及不同DOM级事件处理程序进行讲解. 事件流事件流可以理解为事件在页面的DOM节点之间传播的顺序,主要分为三个过程,分别是:事件捕获阶段 -…

DOM 事件流与事件处理程序

㈠事件流 ▶事件:是文档和浏览器窗口中发生的,特定的交互瞬间. ▶事件流:描述的是从页面中接受事件的顺序 ⑴DOM事件冒泡定义:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播至最不具体的那个节点(文档). 具体讲解: 代码: <html> <head> <title>事件流<title> <meta charset="utf-8"></head> <body>…

javaScript事件--事件流

一.事件事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字. 事件是javaScript和DOM之间交互的桥梁. 你若触发,我便执行——事件发生,调用它的处理函数执行相应的JavaScript代码给出响应. 典型的例子有:页面加载完毕触发load事件:用户单击元素,触发click事件. 二.事件流事件流描述的是从页面中接收事件的顺序. 1.事件流感性认识问题:单击页面元素,什么样的元素能感应到这…

js事件常用操作、事件流

注册事件给元素添加事件,称为注册事件或者绑定事件. 注册事件有两种方式:传统方式和方法监听注册方式传统方式 on开头的事件,例如onclick <button onclick="alert('hi~')"></button> 或 btn.onclick = function() {} 具有唯一性:同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式 eventTarget.addEventListener(…

javaScript事件（一）事件流

一.事件事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.事件是javaScript和DOM之间的桥梁.你若触发,我便执行——事件发生,调用它的处理函数执行相应的JavaScript代码给出响应.典型的例子有:页面加载完毕触发load事件:用户单击元素,触发click事件. 二.事件流 1.事件流感性认识问题:单击页面元素,什么样的元素能感应到这样一个事件?答案:单击元素的同时,也单击了元素的容器元素,甚至整个页面.例子:有三个同心圆, 给每个圆添…

Javascript高级编程学习笔记（57）—— 事件（1）事件流

事件 JS与HTML的交互是通过事件实现的而事件指的就是:文档或浏览器窗口特定的交互瞬间可以通过侦听器来预定事件,以便在事件发生时执行相应的代码这种模式也是设计模式中的观察者模式事件流有了事件,也就有了事件流的概念事件流故名思意:也就是事件的流向,所以事件流描述的是从页面中接收事件的顺序虽然事件流描述的都是事件的流向,但是事件流在当时的两个最大的浏览器厂商的提出中却是两个差不多完全相反的事件流概念一是IE的冒泡事件流,二是Netscape的捕获事件流事件冒泡即事件开始时由最具…