给网站增加功能怎么做,页面跳转代码,网络哪里能接活做网站,网站开发工作室简介文章目录3 JavaScript DOM3.1 DOM基本术语DOM模型及其作用文档对象模型节点节点的属性文档对象3.2 DOM文档操作3.2.1 查找网页元素3.2.2 获取元素内容新的策略——修改样式更好的策略——修改样式3.2.3 改变元素内容3.2.4 操作网页元素3.2.5 获取元素偏移offset和style的区别3.…
文章目录3 JavaScript DOM3.1 DOM基本术语DOM模型及其作用文档对象模型节点节点的属性文档对象3.2 DOM文档操作3.2.1 查找网页元素3.2.2 获取元素内容新的策略——修改样式更好的策略——修改样式3.2.3 改变元素内容3.2.4 操作网页元素3.2.5 获取元素偏移offset和style的区别3.2.6 获取元素可视区3.2.7 获取元素滚动3.2.8 元素节点导航3.2.9 查找网页元素3.3 DOM文档事件3.3.1 事件入门事件基本概念事件的三要素执行事件的过程3.3.2 事件绑定事件监听版本IE9之前的事件绑定事件监听发展史3.3.3 窗口事件3.3.4 鼠标事件3.3.5 键盘事件3.3.6 焦点事件3.3.7 文本事件3.3.8 表单事件3.3.9 媒体事件3.3.10 排他思想3.3.11 事件冒泡3.3.12 事件委派3.3.13 事件传播事件流事件捕获回到事件绑定3.3.14 事件对象事件对象简介事件对象常用属性和方法3 JavaScript DOM
在前面的JS基础阶段中我们学习的是ECMAScript标准规定的基本语法但是只学习基本语法是无法做出网页交互效果的为此在本章的学习中我们要进入WebAPIs阶段。
WebAPIs是W3C组织的标准主要学习DOM和BOM在这一章节中我们需要JS基本语法的铺垫步入学习网页交互功能的道路。 3.1 DOM基本术语
DOM模型及其作用
当网页被加载时浏览器会创建页面的文档对象模型Document Object Model它是W3C组织推荐的处理可扩展标记语言的标准编程接口其结构为一颗DOM对象树。如果学过Python爬虫中的Xpath解析框架你可以很好的理解我上述的话。 Js可以通过DOM对HTML文档进行操作即随心所欲操作Web界面。
JavaScript 能改变页面中的所有 HTML 元素JavaScript 能改变页面中的所有 HTML 属性JavaScript 能改变页面中的所有 CSS 样式JavaScript 能删除已有的 HTML 元素和属性JavaScript 能添加新的 HTML 元素和属性JavaScript 能对页面中所有已有的 HTML 事件作出反应JavaScript 能在页面中创建新的 HTML 事件 文档对象模型
文档一个HTML网页就是一个文档对象网页中的每一个部分都转换为了一个对象模型表示对象之间的关系方便我们获取对象 节点
节点Node是构建网页最基本的组成部分。网页中的每一个部分都可看做是一个节点。节点类型多样属性和方法也不尽相同最常用的节点可以分为以下四类
文档节点整个HTML文档网页中所有的结点都是以子节点的形式存在文档对象作为window对象的属性存在我们不用获取可直接使用。通过该对象我们可以在整个文档访问内查找节点对象并且可以通过该对象创建各种节点对象。元素节点HTML文档中的HTML标签我们可以通过多种方法访问到元素节点如document.getElementById()。属性节点元素的属性通过元素节点.getAttributeNode(“属性名”)可以找到属性节点对象但我们很少使用它。文本节点HTML标签中的文本内容使用元素节点.firstChild可以获取元素节点的文本节点其一般为元素节点的第一个子节点。 节点的属性
对于每个节点来说都具备nodeName、nodeType、nodeValue三个属性。
nodeNamenodeTypenodeValue文档节点#document9Null元素节点标签名1Null属性节点属性名2属性值文本节点#text3文本内容 文档对象 浏览器为我们提供了文档节点对象document这个对象是window属性。如果你希望访问HTML页面中的任何元素那么你必须从访问document对象开始。 文档节点对象可以在页面中直接使用文档节点代表的是整个网页 3.2 DOM文档操作
3.2.1 查找网页元素
方法说明document.getElementById(‘id’)元素id查找元素document.getElementByTagName(‘name’)标签名查找元素document.getElementByClassName(‘name’)类名查找元素document.querySelector(‘CSS选择器’)根据CSS选择器返回第一个元素document.querySelectorAll(‘CSS选择器’)通过CSS选择器选择多个元素document.body选择body标签的所有内容document.documentElement选择html标签的所有内容
注JS是解释性语言故JS代码必须写在HTML的下方因为只有HTML生成元素了JS才能通过DOM操纵元素。
!DOCTYPE html
html langzh-cn
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- HTML元素 --div id test测试案例1/divp测试案例2/pp测试案例3/pdiv classc1测试案例4/divdiv class c2测试案例5/divdiv id c3测试案例6/divdiv id c3测试案例7/divscript//1 通过ID找元素注意ID大小写敏感返回值为var test1 document.getElementById(test);console.log(test1);console.dir(test1);//等同于log,用于查看元素结构//2 通过标签名找元素这种方式选中所有同名标签返回值为伪数组var test2 document.getElementsByTagName(p);console.log(test2);//3 通过类名找元素该方法仅支持IE9以上返回值为伪数组var test3 document.getElementsByClassName(c1);console.log(test3);//4 通过选择器查找第一个元素var test4 document.querySelector(.c2);console.log(test4);//5 通过选择器选定所有元素var test5 document.querySelectorAll(#c3);console.log(test5);var test6 document.querySelectorAll(*);console.log(test6);//6 得到body元素var test7 document.body;console.log(test7);//7 得到html元素var test8 document.documentElement;console.log(test8);/script
/body
/html3.2.2 获取元素内容
注推荐学完事件再回来看
方法说明元素节点.innerText获取HTML元素标签间的内容元素节点.innerHTML获取HTML元素标签间内容以及标签元素节点.属性获取HTML元素的属性值元素节点.style.样式获取HTML元素的行内样式值
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#Test5 p{height:50px;width:100px;background: pink;}/style
/head
body!-- 测试组件 --button测试按钮1/buttondiv测试内容1/divbrdivbutton id testbtn2测试按钮2/buttonp id test2测试内容2/p/divbrdivbutton id testbtn3测试按钮3——图片1/buttonbutton id testbtn4测试按钮4——图片2/buttonbrimg src ./img_103.jpg alt id testimg width 300px/divdiv id Test5p测试内容5/pbrbutton测试按钮5/button/divscript/*innerText*///1 获取事件源var btn1 document.querySelector(button);var div1 document.querySelector(div);//2 注册事件btn1.onclick function(){div1.innerText 测试内容已改变;}/*innerHTML*///1 获取事件源var btn2 document.getElementById(testbtn2)var p2 document.getElementById(test2);//2 注册事件btn2.onclick function(){p2.innerHTML strong测试内容已改变/strong;}/*元素节点.属性*///1 获取事件源var btn3 document.getElementById(testbtn3);var btn4 document.getElementById(testbtn4);var img3 document.getElementById(testimg);//2 注册事件btn3.onclick function(){img3.src ./img_103.jpg;}btn4.onclick function(){img3.src ./img_112.jpg;}/*元素节点.style.样式*///1 获取事件源var btn5 document.querySelector(#Test5 button);var p5 document.querySelector(#Test5 p);//2 注册事件btn5.onclick function(){p5.style.background skyblue;}/script
/body
/html新的策略——修改样式
说明如果要想通过DOM修改CSS样式一个样式就要一条语句十分难受。为此我们可以将修改后的样式放在一个选择器中当我们需要很多组件同时变成该样式时使用元素.className修改该元素的所属的类这样就可以给该元素附上提前准备好的样式。
注className方法并不是添加类而是覆盖类。这就意味着如果元素此前拥有的类将会被覆盖。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/*提前准备一个样式*/.Test1{color: yellowgreen;background: pink;}/style
/head
bodydiv测试内容1/divbutton测试按钮1/buttonscriptvar div1 document.querySelector(div);var btn1 document.querySelector(button);btn1.onclick function(){div1.className Test1;}/script
/body
/html更好的策略——修改样式
说明之前的className容易覆盖以前的类名故我们可以使用classList方式来追加和删除类名。
方式说明元素.classList.add(‘类名’)追加一个类元素.classList.remove(‘类名’)删除一个类元素.classList.toggle(‘类名’)切换一个类
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/*提前准备一个样式*/.Test1{color: yellowgreen;background: pink;}/*样式2*/.Test2{background-color: aqua;}/style
/head
bodydiv class Test1测试内容1/divbutton class add-btn追加样式类/buttonbutton class remove-btn删除样式类/buttonbutton class toggle-btn切换样式类/buttonscriptvar div document.querySelector(div)var add_btn document.querySelector(.add-btn)var remove_btn document.querySelector(.remove-btn)var toggle_btn document.querySelector(.toggle-btn)console.log(add_btn);console.log(remove_btn);add_btn.onclick function(){div.classList.add(Test2)}remove_btn.onclick function(){div.classList.remove(Test2);}toggle_btn.onclick function(){div.classList.toggle(Test1);}/script
/body
/html3.2.3 改变元素内容
说明我们可以通过以下方法修改元素的内容
方法说明元素节点.innerText 新内容改变元素的标签值元素节点.innerHTML 新元素改变元素元素节点.属性 新的属性值改变元素的属性值元素节点.setAttribute(属性, 值)改变元素的属性值元素节点.style.样式 新的属性值改变 HTML 元素的行内样式值3.2.4 操作网页元素
创建 HTML 元素节点document.createElement(element)
创建 HTML 属性节点document.createAttribute(attribute)
创建 HTML 文本节点document.createTextNode(text)
删除 HTML 元素元素节点.removeChild(element)
添加 HTML 元素元素节点.appendChild(element)
替换 HTML 元素元素节点.replaceChild(element)
在指定的子节点前面插入新的子节点元素节点.insertBefore(element) 3.2.5 获取元素偏移
说明offset指偏移量我们使用offset系列相关属性可以动态地获取该元素的位置、大小等。需要注意的是获取的仅有数值而无单位。
方法说明元素.offsetWidth返回自身包括padding、边框、内容区的宽度返回数值不带单位元素.offsetHeight返回自身包括padding、边框、内容区的高度返回数值不带单位元素.offsetParent获取离当前元素最近的开启了定位的祖先元素元素.offsetTop返回元素相对带有定位父元素上方的偏移元素.offsetLeft返回元素相对带有定位父元素左边框的偏移
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin:0;padding:0;}.div{background-color: pink;height: 200px;width: 200px;border: 2px solid red;padding:2px;}/style
/head
bodydiv class div/divscriptvar div document.querySelector(.div)// offsetWidth返回自身包括padding、边框、内容区的宽度返回数值不带单位console.log(div.offsetWidth);// offsetHeight返回自身包括padding、边框、内容区的高度返回数值不带单位console.log(div.offsetHeight);// offsetParent获取离当前元素最近的开启了定位的祖先元素console.log(div.offsetParent);// offsetTop返回元素相对带有定位父元素上方的偏移console.log(div.offsetTop);// offsetLeft返回元素相对带有定位父元素左边框的偏移console.log(div.offsetLeft);/script
/body
/htmloffset和style的区别
offsetstyleoffset可以得到任意样式表中的样式值style只能得到行内样式表中的样式值offset系列获得的数值是不带单位的style.width获得的是带有单位的字符串offsetWidth包含paddingborderwidthstyle.width获得不包含padding和border的值offsetWidth等属性属于只读属性style.widh是可读写属性可以获取也可以赋值3.2.6 获取元素可视区
方法说明元素.clientWidth返回自身包括padding、内容区宽度、不含边框返回数值不带单位元素.clientHeight返回自身包括padding、内容区高度、不含边框返回数值不带单位元素.clientTop返回元素上边框的大小元素.cllientLeft返回元素左边框的大小
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;background-color: pink;border: 3px solid skyblue;margin: 0 auto;}/style
/head
bodydiv/divscriptvar div document.querySelector(div);console.log(div.clientWidth); //200说明不包含边框console.log(div.clientHeight);//200 说明不包含边框console.log(div.clientLeft);//3 边框的左边宽度为3console.log(div.clientTop);//3 边框的顶部宽度为3/script
/body
/html3.2.7 获取元素滚动
方法说明元素.scrollTop返回被卷去的上侧距离返回数值不带单位元素.scrollLeft返回被卷去的左侧距离返回数值不带单位元素.scrollWidth返回自身实际的宽度不含边框返回数值不带单位元素.scrollHeight返回自身实际的高度不含边框返回数值不带单位!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width:50px;height:100px;background-color: pink;overflow: scroll;border: 3px solid red;}/style
/head
bodydiv测试内容1 测试内容1 测试内容1 测试内容1 /divscriptvar div document.querySelector(div);console.log(div.scrollHeight);//208 表名内容padding的宽度为208console.log(div.scrollTop); //0 表明没有内容在滚动条上面console.log(div.scrollWidth);//33 表名内容padding的宽度为33console.log(div.scrollLeft);//0表名没有内容在滚动条左侧/script
/body
/html3.2.8 元素节点导航
说明在前面的选择器中我们通通都是使用DOM提供的方法来获取元素但这些方法逻辑性不强且繁琐。为此Js还提供了利用节点层级来获取元素。
方法描述元素节点.parentNode返回元素的父节点。元素节点.parentElement返回元素的父元素。元素节点.childNodes返回元素的一个子节点的数组包含空白文本Text节点。元素节点.children返回元素的一个子元素的集合不包含空白文本Text节点。但其为非标准方法元素节点.firstChild返回元素的第一个子节点包含空白文本Text节点。元素节点.firstElementChild返回元素的第一个子元素不包含空白文本Text节点。元素节点.lastChild返回元素的最后一个子节点包含空白文本Text节点。元素节点.lastElementChild返回元素的最后一个子元素不包含空白文本Text节点。元素节点.previousSibling返回某个元素紧接之前节点包含空白文本Text节点。元素节点.previousElementSibling返回指定元素的前一个兄弟元素相同节点树层中的前一个元素节点。元素节点.nextSibling返回某个元素紧接之后节点包含空白文本Text节点。元素节点.nextElementSibling返回指定元素的后一个兄弟元素相同节点树层中的下一个元素节点。
div我是div/divspan我是span/spanulli我是li/lili我是li/lili我是li/li/uldiv classboxspan class erweima×/span/divscript// 1.通过已知元素节点获取最近的父节点var erweima document.querySelector(.erweima)// var box document.querySelector(.box) 传统写法var box erweima.parentNode //元素导航写法console.log(box);// 2.通过已知元素节点获取所有的子节点子节点中既有元素节点也有文本节点// 通常不建议使用该方法来获取子节点因为太麻烦了var ul document.querySelector(ul)console.log(ul.childNodes);// 3.非标准方法但其获得所有浏览器认可用于选取已知元素节点的所有子元素节点console.log(ul.children);// 4.获取第一个子节点console.log(ul.firstChild);// 5.获取第一个元素子节点console.log(ul.firstElementChild);// 6.获取最后一个子节点console.log(ul.lastChild);// 7.获取最后一个元素子节点console.log(ul.lastElementChild);/script3.2.9 查找网页元素
属性说明document.anchors返回拥有 name 属性的所有a 元素document.baseURI返回文档的绝对基准 URIdocument.body返回 body 元素document.cookie返回文档的 cookiedocument.doctype返回文档的 doctypedocument.documentElement返回 html 元素document.documentMode返回浏览器使用的模式document.documentURI返回文档的 URIdocument.domain返回文档服务器的域名document.forms返回所有 form 元素document.embeds返回所有 embed 元素document.images返回所有 img 元素document.lastModified返回文档更新的日期和时间document.title返回 title 元素document.scripts返回所有 script 元素3.3 DOM文档事件
3.3.1 事件入门
事件基本概念
事件编程时系统内发生的动作或者发生的事情
事件监听让程序检测是否有事件发生一旦有事件触发就立即调用一个函数做出响应也称为注册事件。 事件的三要素
事件源事件被触发的对象事件类型如何触发事件调用的函数要做什么事 执行事件的过程
获取事件源注册事件绑定事件添加事件处理程序 3.3.2 事件绑定
事件监听版本
版本写法DOM L0事件源.on事件 function(){}DOM L2事件源.addEventListener(事件,事件处理函数,布尔值)
注
L0和L2有很大区别我们会在后面讨论。第三个参数时布尔值指定使用事件冒泡还是事件捕获如果是true则为捕获如果是false则为传播此参数可省略。在IE9之前不支持L2可使用attachEvent()代替。 IE9之前的事件绑定
格式事件源.attachEvent(事件,事件处理函数)
说明官方在文档中明确指出在实际开发中不要使用该方式 事件监听发展史
DMO L0是DOM发展的第一个版本DOM L11998.10.1称为W3C推荐标准DOM L2使用addEventListener注册事件DOM L3DOM3级别事件模块在DOM2级事件的基础上重新定义了这些事件也添加了一些新事件类型
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodybutton id btn1测试按钮1/buttonbutton id btn2测试按钮2/buttonscript/*老版写法*/var btn1 document.getElementById(btn1);btn1.onclick function(){alert(按钮1已被点击);}/*新版写法*/var btn2 document.getElementById(btn2);btn2.addEventListener(click, function(){alert(按钮2已被点击);})/script
/body
/html3.3.3 窗口事件
注在下面各类型事件的使用中我们不推荐一个一个全部死记要用什么查什么即可。
属性描述onblur当窗口失去焦点时运行脚本。onfocus当窗口获得焦点时运行脚本。onload当文档加载之后运行脚本。onresize当调整窗口大小时运行脚本。常用作响应式布局。onstorage当 Web Storage 区域更新时存储空间中的数据发生变化时运行脚本。DOMContentLoaded不包括样式表、图片、flash等仅当DOM加载完成即触发时间适合用于页面图片较多的情况3.3.4 鼠标事件
属性描述onclick当单击鼠标时运行脚本。ondblclick当双击鼠标时运行脚本。onmousedown当按下鼠标按钮时运行脚本。onmouseup当松开鼠标按钮时运行脚本。onmousemove当鼠标指针移动时运行脚本。onmouseover当鼠标指针移至元素之上时运行脚本不可以阻止冒泡。onmouseout当鼠标指针移出元素时运行脚本不可以阻止冒泡。onmouseenter当鼠标指针移至元素之上时运行脚本可以阻止冒泡。onmouseleave当鼠标指针移出元素时运行脚本可以阻止冒泡。onmousewheel当转动鼠标滚轮时运行脚本。onscroll当滚动元素的滚动条时运行脚本。3.3.5 键盘事件
属性描述onkeydown当按下按键时运行脚本。onkeyup当松开按键时运行脚本。onkeypress当按下并松开按键时运行脚本。3.3.6 焦点事件
属性描述focus获得焦点blur失去焦点3.3.7 文本事件
属性描述input用户输入文本时开始运行脚本3.3.8 表单事件
属性描述onblur当元素失去焦点时运行脚本。onfocus当元素获得焦点时运行脚本。onchange当元素改变时运行脚本。oninput当元素获得用户输入时运行脚本。oninvalid当元素无效时运行脚本。onselect当选取元素时运行脚本。onsubmit当提交表单时运行脚本。3.3.9 媒体事件
属性描述onabort当发生中止事件时运行脚本。oncanplay当媒介能够开始播放但可能因缓冲而需要停止时运行脚本。oncanplaythrough当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本。ondurationchange当媒介长度改变时运行脚本。onemptied当媒介资源元素突然为空时网络错误、加载错误等运行脚本。onended当媒介已抵达结尾时运行脚本。onerror当在元素加载期间发生错误时运行脚本。onloadeddata当加载媒介数据时运行脚本。onloadedmetadata当媒介元素的持续时间以及其它媒介数据已加载时运行脚本。onloadstart当浏览器开始加载媒介数据时运行脚本。onpause当媒介数据暂停时运行脚本。onplay当媒介数据将要开始播放时运行脚本。onplaying当媒介数据已开始播放时运行脚本。onprogress当浏览器正在取媒介数据时运行脚本。onratechange当媒介数据的播放速率改变时运行脚本。onreadystatechange当就绪状态ready-state改变时运行脚本。onseeked当媒介元素的定位属性不再为真且定位已结束时运行脚本。onseeking当媒介元素的定位属性为真且定位已开始时运行脚本。onstalled当取回媒介数据过程中延迟存在错误时运行脚本。onsuspend当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本。ontimeupdate当媒介改变其播放位置时运行脚本。onvolumechange当媒介改变音量亦或当音量被设置为静音时运行脚本。onwaiting当媒介已停止播放但打算继续播放时运行脚本。3.3.10 排他思想
排他思想当前元素为A状态其他为B状态
应用轮播图等
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.pink{background-color: pink;}/style
/head
bodybutton class pink测试按钮1/buttonbutton测试按钮2/buttonbutton测试按钮3/buttonscriptvar btns document.querySelectorAll(button);for (var i 0; i btns.length; i) {btns[i].addEventListener(click,function(){document.querySelector(.pink).classList.remove(pink);this.classList.add(pink);})}/script
/body
/html3.3.11 事件冒泡
事件冒泡事件的向上传导。当后代元素上的事件被触发时其祖先元素的相同事件也会被触发。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{background: skyblue;width: 300px;height: 300px;}div div{background: pink;height: 50px;width:50px;}/style
/head
bodydivdiv/div/divscriptvar innerDiv document.querySelector(div div);var outerDiv document.querySelector(div);innerDiv.onclick function(){alert(您点击了内层);}outerDiv.onclick function(){alert(您点击了外层);}/script
/body
/html3.3.12 事件委派
事件委派为多个元素绑定同一个事件。
事件委派原理利用事件冒泡。将事件统一绑定给祖先元素后点击后代元素则后代元素会冒泡到祖先元素上去寻找事件。
事件委派的好处通过委派可以减少事件绑定的次数提高程序的性能。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{background-color: greenyellow;}/style
/head
bodydiv class divClassp测试内容1/pp测试内容2/pp测试内容3/p/divscriptvar div1 document.querySelector(div);/*target属性用于返回一个事件触发对象*/div1.onclick function(event){if(event.target.className ! divClass){alert(测试内容已被点击);}}/script
/body
/html3.3.13 事件传播
事件流
说明事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播这个传播过程即DOM事件流。如我们给一个div注册点击事件 这时候我们需要先去寻找这个元素这个过程我们称为捕获阶段找到当前目标后进入当前目标阶段对目标进行事件的执行最后进入冒泡阶段div元素执行事件后父级元素如果有相同类型的事件则也会触发如两者都具有点击事件。
事件捕获
在HTML DOM中有两种事件传播方式冒泡和捕获。我们在前面已经谈论过冒泡冒泡就是从内而外发生事件而捕获则和冒泡反着来。 回到事件绑定
方法说明事件源.addEventListener(事件,事件处理函数,布尔值)绑定事件事件源.removeEventListener(事件,事件处理函数)解绑事件
注
L2绑定事件允许向相同元素添加多个不同类型的事件且不覆盖L2绑定和解绑只支持IE8之后的版本 3.3.14 事件对象
事件对象简介
说明只要绑定了事件则系统会自动创建一个事件对象event可简写为e或evt。我们将其写于事件回调函数的参数列表中。 事件对象常用属性和方法
事件对象属性方法说明e.target返回触发事件的对象e.srcElement返回触发事件的对象 ie6-8才可使用e.type返回事件的类型e.cancelBubble阻止事件冒泡 ie6-8使用e.returnValue阻止默认事件发生 ie6-8使用e.preventDefault()阻止默认事件发生e.stopPropagation()阻止事件冒泡
