事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记

【事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记】的更多相关文章

事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记

1.事件流浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上所有的圆.放到实际页面中就是,你点击一个按钮,而是纸上所有的圆. <栗子:现实生活中的声波.水波> 事件流:从页面中接收事件的顺序,通俗说:用户操作DOM的一系列行为交互. 2.事件冒泡事件冒泡:IE的事件流叫事件冒泡,即事件开始由最具体的元素(文档中嵌套层次最深的那个元素)接收,然后逐级向上传…

JavaScript高级程序设计学习笔记之事件

1.事件流事件流描述的是从页面中接收事件的顺序. 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).(DOM树向上传播)(通俗解释(个人理解: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层.)) 事件冒泡的优点与缺点优点:想象一下现在…

JavaScript高级程序设计学习笔记第十三章--事件

事件冒泡: IE 的事件流,事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).例如: <!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv">Click Me</div> </b…

JavaScript高级程序设计学习笔记--事件

HTML事件处理程序 <input type="button" value="Click Me" onclick"showMessage()"/> 通过HTML指定事件处理程序的的缺点是HTML与JavaScript代码紧密耦合.如果要更换事件处理程序,就要改动两个地方:HTML代码和JavaScript代码. DOM0级事件处理程序 var btn=document.getElementById("myBtn")…

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

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

JS高级程序设计学习笔记之JS事件（1）

事件流冒泡定义:事件开始时由最具体的元素接收,然后逐级上传到较为不具体的节点.(IE9.FF.Chrome.Safari会将事件一直冒泡到window对象.IE5.5及其以下会跳过<html>元素,直接从body跳到document).若发生事件的节点元素并没有绑定该事件,则这个动作会向上冒泡,直到被执行,一直冒泡到window对象. 阻止冒泡:①使用stoppropagation() ②在函数中进行一次判断,if(event.target==event.current.target){f…

《JavaScript高级程序设计》笔记：事件（十三）

事件流事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).如下代码: <body> <div id="myDiv">click me</div> </body> 如果你点击了上面的div元素,那么这个click事件会按照如下顺序传播: (1)<div> (2)<body> (3)<html> (4)document 所有现代浏览器都支持事件冒…

Javascript高级编程学习笔记（59）—— 事件（3）事件对象

事件对象在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象兼容DOM的浏览器会将event对象传入事件处理程序中如下所示: var btn = document.getElementByTagName("button")[0]; btn.onclick = function(event){ alert(event.type); //"click" }…

Javascript高级编程学习笔记（58）—— 事件（2）事件处理程序

事件处理程序事件处理程序即响应某个事件的函数事件处理程序以 “on” 开头如“onclick”,“onload” HTML事件处理程序某个元素支持的每种事件都可以使用一个与响应的事件处理程序同名的HTML特性来指定这个特性的值应该是能够执行的script代码如: <input type="button" value="click me" onclick="alert('clicked')"/> 此外也可以直接调用在文档其它…

Javascript高级编程学习笔记（66）—— 事件（10）变动事件

变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModified:在DOM结构发生变化时触发,即会在下面所有事件触发后触发 DOMNodeInserted:当一个节点作为子节点插入另一个节点中时触发 DOMNodeRemoved:节点从父节点中移除时触发 DOMNodeInsertedIntoDocument:一个节点被直接插入文档或通过子树间接插入文档后…