上回书说道,JS中变量、运算符、分支结构、循环和嵌套循环等内容。本回就由本K给大伙唠唠JS中的BOMDOM事件

一、“花心大萝卜”——BOM

1、震惊,FFF团为何对BOM举起了火把——BOM简介

BOM(Browser Object Model) 是指浏览器对象模型,在JS中BOM是个不折不扣的花心大萝卜,因为它有很多个对象,其中代表浏览器窗口的Window对象是BOM的“正室”、也就是最重要的,其他对象都是正室的下手、或者叫侧室也不足为过。

2、细数BOM的那些风流——BOM对象详解

2.1 BOM的正室——window对象。

window对象代表浏览器窗口,是JS的BOM中最常用到的对象,下面就跟大家介绍一下领悟window对象的常用方法。

① prompt:弹窗接受用户输入;
② alert:弹窗警告;
③ confirm:带有确认/取消按钮的提示框;
④ close:关闭浏览器窗口;
⑤ open:重新打开新窗口,传入参数URL/窗口名称/窗口特征;
⑥ setTimeout:设置延时执行,只会执行一次(两个参数:需要执行的function/毫秒数);
⑦ setInterval:设置定时器,循环每隔N毫秒执行一次(传入参数:调用setInterval时返回一个ID,通过变量接受ID,传入clearInterval);
⑧ clearTimeout:清除延迟;
⑨ clearInterval:清除定时器;

在这九种方法中,最常用到也是这里面最麻烦的四种是setTimeout/clearTimeout和setInterval/clearInterval,它们两两对应,常放在一起搭配使用。下面就给大伙举一个这方面的栗子~

(栗子:setTimeout/clearTimeout)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>首先是setTimeout与clearTimeout</title>
  6. <!--要记得首先打开控制台哟~-->
  7. <script type="text/javascript">
  8.  var timeoutid = setTimeout(function(){
  9. console.log("setTimeout");
  10. },5000) ;
  11. function clearTimeoutBtn(){
  12. clearTimeout(timeoutid);
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <button onclick="clearTimeoutBtn()">clearTimeout</button>
  18. </body>
  19. </html>

(栗子:setInterval/clearInterval)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>然后是setInterval与clearInterval</title>
  6. <!--要记得首先打开控制台哟~-->
  7. <script type="text/javascript">
  8. var num = 10;
  9. var timeinterval = setInterval(function(){
  10. num--;
  11. console.log(num);
  12. if (num==0){
  13. clearInterval(timeinterval);
  14. }
  15. },1000)
  16. function clearIntervalBtn(){
  17. clearInterval(timeinterval);
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <button onclick="clearIntervalBtn()">clearIntervar</button>
  23. </body>
  24. </html>

2.2 BOM的侧室们——其他对象简述。

因为除window对象外的其他BOM对象在实际的JS撰写中很少出现,所以本K就以代码的形式给大家简单提一下。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>BOM的侧室们</title>
  6. <!--要记得首先打开控制台哟~-->
  7.  
  8. <script type="text/javascript">
  9.  
  10. // screen对象
  11.  
  12. console.log(screen);
  13. console.log(screen.width);//宽度
  14. console.log(screen.height);//高度
  15. console.log(screen.availHeight);//可用高度=屏幕高度-底部任务栏
  16. console.log(screen.availWidth);//可用宽度
  17.  
  18. // location对象
  19. // 完整的url路径:
  20. // 协议:// 主机名(IP地址):端口号(默认80端口)/文件路径?传递的参数(参数名0=参数值0&参数名1=参数值1)#锚点
  21.  
  22. console.log(location);
  23. console.log(location.href);//完整路径
  24. console.log(location.protocol);//路径协议http: https: ftp: file: mailto:
  25. console.log(location.pathname);//路径部分 /开始
  26. console.log(location.port);//端口号
  27. console.log(location.search);//从?开始往后的部分
  28. console.log(location.hostname);//IP地址
  29. console.log(location.host);//主机名+端口号
  30. console.log(location.hash);//从#开始的锚点
  31. // 使用JS设置页面跳转
  32. // window.location="http://www.baidu.com";
  33.  
  34. function locationReload(){
  35. //重新加载当前页面
  36. location.reload(true);//reload(true)表示从服务器重新加载当前页面;reload()在本地刷新当前页面
  37. }
  38.  
  39. function locationAssign(){
  40. location.assign("http://www.baidu.com"); //加载新的文档,替换以后可以回退
  41. }
  42.  
  43. function locationReplace(){
  44. location.replace("http://www.baidu.com");//使用新的文档替换当前文档,替换后不能回退
  45. }
  46.  
  47. // history
  48. // length : 浏览历史列表的个数
  49. // history.forward(); : 前进到前一个页面
  50. // history.back(); : 后退到后一个页面
  51. // history.go(); : 跳转到历史浏览历史的任意位置;当前页为第0个,前一个页面为第1个,后一个页面为第-1个
  52.  
  53. console.log(history.length);
  54.  
  55. function historyForword(){
  56. history.forward();
  57. }
  58. function historyBack(){
  59. history.back();
  60. }
  61. function historyGo(){
  62. history.go();
  63. // 0
  64. // 1 = history.forward();
  65. // -1 = history.back();
  66. }
  67.  
  68. // Navigator
  69. console.log(navigator.appName);//产品名称
  70. console.log(navigator.appVersion);//产品版本号
  71. console.log(navigator.userAgent);//用户代理信息
  72. console.log(navigator.platform);//系统代理平台
  73.  
  74. console.log(navigator.plugins);//检查浏览器安装的插件信息
  75. // 返回一个数组,检测浏览器安装的所有插件(↓主要属性↓)
  76. // description : 插件描述信息
  77. // filename : 插件在本地磁盘的文件名
  78. // length : 插件的个数
  79. // name : 文件名
  80.  
  81. console.log(navigator.mimeTypes);//浏览器插件所支持的文件类型(↓主要属性↓)
  82. // description:MIME类型描述
  83. // enabledPlugin:支持此类型的浏览器插件
  84. // suffixes:此类型可能的后缀名
  85. // type:MIME类型的写法,例如:image/x-icon text/css
  86. </script>
  87.  
  88. </head>
  89. <body>
  90.  
  91. <button onclick="locationAssign()">加载新的文档</button>
  92. <br />
  93.  
  94. <button onclick="locationReload()">重新加载当前文档</button>
  95. <br />
  96.  
  97. <button onclick="locationReplace()">使用新的文档替换当前文档</button>
  98. <br />
  99.  
  100. <button onclick="historyForword()">这个是historyForword</button>
  101. <br />
  102.  
  103. <button onclick="historyBack()">这个是historyBack</button>
  104. <br />
  105.  
  106. <button onclick="historyGo()">这个是historyGo</button>
  107.  
  108. </body>
  109. </html>

二、“N世同堂”——DOM

1、朝阳群众又立功,代码中竟出现如此神秘的“庞大组织”——DOM简介

DOM(Document Object Model),是指文档对象模型,是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型,而DOM中的每一条分支都被称作一个“节点”,所有节点及节点属性构成的结构图会呈现出很强的层次性(栗子如下图,源于万能的度娘)。

DOM节点分为三大类:元素节点,文本节点,属性节点。文本节点、属性节点为元素节点的两个子节点,通过gelElement系列方法,可以取到元素节点。

2、如此组织,其真相竟然是...——DOM操作详解

DOM操作是JS中应用性非常强的一部分,所以本K就以代码的形式来给大家叙述。

2.1 获取节点与样式修改

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>DOM代码详述(一)</title>
  6.  
  7. <script type="text/javascript">
  8.  
  9. window.onload = function(){
  10. var div1 = document.getElementById("div1");//通过ID获取唯一的节点;多个同名ID只会取第一个
  11. console.log(div1);
  12.  
  13. console.log(div1.tagName);//查看节点:①属性;获取节点的标签名
  14. console.log(div1.innerHTML);//②设置或者获取节点内部的所有HTML代码
  15. console.log(div1.innerText);//③设置或者获取节点内部的所有文字
  16.  
  17. console.log(window.getComputedStyle(div1,null));//查看所有属性(非IE属性)
  18. console.log(div1.currentStyle);//查看所有属性(IE属性)
  19.  
  20. }
  21. function getById(){
  22. //取到元素节点的样式属性节点
  23. var div1 = document.getElementById("div1").style;//获取
  24. div1.backgroundColor = "#FF00FF";//行级样式表权重1000;所有节点属性,一律驼峰命名法
  25.  
  26. //取到元素节点
  27. var divDoc = document.getElementById("div1");//获取
  28. divDoc.innerHTML = "<s>king_land</s>";//重置修改div中的HTML代码
  29. }
  30.  
  31. //——————————————分割线——————————————————
  32.  
  33. function getByName(){//通过Name取到一个数组,包含1到多个节点;
  34.  
  35. var div = document.getElementsByName("div1");
  36.  
  37. console.log(div.length);
  38.  
  39. //使用方式:通过循环,取到每一个节点,循环次数从0开始,<数组.length
  40. for(var n = 0 ;n < div.length ; n++){
  41. div[n].style.backgroundColor = "#FFFF00";
  42. }
  43.  
  44. //div1.backgroundColor = "#FFFF00";
  45. //div[0].style.backgroundColor = "#FFFF00";//★
  46.  
  47. }
  48.  
  49. //——————————————分割线——————————————————
  50.  
  51. //document.getElementsByTagName();//同Name
  52.  
  53. function getByTagName(){
  54.  
  55. var div = document.getElementsByTagName("div");
  56.  
  57. div[0].style.backgroundColor = "#00FF00";
  58.  
  59. }
  60.  
  61. //——————————————分割线——————————————————
  62.  
  63. //document.getElementsByClassName();//同Name
  64.  
  65. function getByClass(){
  66.  
  67. var div = document.getElementsByClassName("div1");
  68.  
  69. div[0].style.backgroundColor = "#00FFFF";
  70.  
  71. }
  72. //——————————————分割线——————————————————
  73.  
  74. function getAttr () {
  75.  
  76. var img1 = document.getElementById("img1");
  77. alert(img1.getAttribute("src"));
  78.  
  79. }//查看属性节点 getAttribute("属性名");
  80.  
  81. //——————————————分割线——————————————————
  82.  
  83. function setAttr () {
  84.  
  85. var img1 = document.getElementById("img1");
  86. img1.setAttribute("src","../../2-CSS基础语法/img/bg_flower_multi.gif");
  87. img1.setAttribute("style","width: 100px;height: 100px;");
  88.  
  89. }//设置属性节点 getAttribute("属性名","属性值");
  90.  
  91. //——————————————分割线——————————————————
  92.  
  93. //JS修改样式总结
  94. //1、.className:为元素设置一个新的class名字 例如:div1.className = "div2";
  95. //2、.style:为元素设置新的样式 例如:div1.style.background-color = "blue";
  96. //3、.style.cssText:为元素同时修改多个样式 例如:div1.style.cssText = "width:100px;height:200px;";
  97.  
  98. </script>
  99.  
  100. <style type="text/css">
  101.  
  102. .div1{
  103. height: 100px;
  104. width: 100px;
  105. background-color: #000000;
  106. color: #FFFFFF;
  107. line-height: 100px;
  108. text-align: center;
  109. }
  110.  
  111. </style>
  112.  
  113. </head>
  114. <body>
  115.  
  116. <div id="div1" name="div1" class="div1">
  117. 这里是测试区
  118. </div>
  119. <div id="div1" name="div1" class="div1">
  120. 这里是测试区
  121. </div>
  122. <div id="div1" name="div1" class="div1">
  123. 这里是测试区
  124. </div>
  125. <img src="../../2-CSS基础语法/img/bg_flower_multi.gif" id="img1"/>
  126.  
  127. <br />
  128. <button onclick="getById()">通过ID修改divcolor</button>
  129. <br />
  130. <button onclick="getByName()">通过Name修改divcolor</button>
  131. <br />
  132. <button onclick="getByTagName()">通过TagName修改divcolor</button>
  133. <br />
  134. <button onclick="getByClass()">通过ClassName修改divcolor</button>
  135. <br />
  136. <button onclick="getAttr()">取到img的src属性值</button>
  137. <br />
  138. <button onclick="setAttr()">修改img的src属性值</button>
  139.  
  140. </body>
  141. </html>

2.2 层次节点常用操作

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6.  
  7. <script type="text/javascript">
  8.  
  9. window.onload = function (){
  10.  
  11. //获取层次节点的常用属性
  12.  
  13. var ul1 = document.getElementById("ul1");
  14.  
  15. // var lis = ul1.getElementsByTagName("li"); //只取到ul1中所有li
  16. // var lis = document.getElementsByTagName("li"); //取到页面中所有的li
  17.  
  18. console.log(ul1.childNodes);//获取元素的所有子节点(包含元素节点、文本节点)
  19.  
  20. console.log(ul1.firstChild);//获取元素的第一个子节点
  21.  
  22. console.log(ul1.lastChild);//获取元素的最后一个子节点
  23.  
  24. console.log(ul1.ownerDocument);//获取当前文档根节点,在html文档中为document节点
  25.  
  26. console.log(ul1.parentNode);//获取当前节点的父节点
  27.  
  28. console.log(ul1.previousSibling);//获取当前节点的前一个兄弟节点
  29.  
  30. console.log(ul1.nextSibling);//获取当前节点的后一个兄弟节点
  31.  
  32. //上述属性均会获得所有的元素节点和文本节点,如果只需要元素节点,需要使用对应Element属性,例如:firstChild→firstElementChild
  33.  
  34. console.log(ul1.attributes);//获取当前节点的所有属性节点
  35.  
  36. }
  37.  
  38. //——————————————创建并新增节点——————————————————
  39.  
  40. //方法一:.creatElement("标签名")创建一个新节点,需要配合setAttribute()方法设置属性;
  41. //方法二:.appendChild(节点名)在元素的最后追加一个新节点
  42. //方法三:.insertBefore(新节点名,目标节点名):将新节点插入到目标节点之前
  43. //方法四:克隆对象.cloneNode(true/false):需要克隆谁,就用谁去调用克隆节点;传递参数可以为true/false,true表示克隆当前节点及子节点;false表示只克隆当前节点,不克隆子节点。
  44.  
  45. function appendImg(){
  46.  
  47. //1、创建一个图片节点
  48. var img = document.createElement("img");
  49. //2、给img节点设置属性
  50. img.setAttribute("src","../../1-HTML基本标签/ivicon.png");
  51. //3、将设置好的img节点追加到body最后
  52. document.body.appendChild(img)//.setAttribute("src","../../img/2017-02-25_143342.png");
  53.  
  54. }
  55.  
  56. function insertImg(){
  57.  
  58. //1、创建一个图片节点
  59. var img = document.createElement("img");
  60. //2、给img节点设置属性
  61. img.setAttribute("src","../../1-HTML基本标签/ivicon.png");
  62. //3、在两个ul之间插入图片
  63. var ul2 = document.getElementById("ul2");
  64. document.body.insertBefore(img,ul2);
  65.  
  66. }
  67. var count = 2;
  68. function copyUl(){
  69.  
  70. //1、取到ul2节点
  71. var ul2 = document.getElementById("ul2");
  72. //2、克隆节点
  73. var ul2Clon = ul2.cloneNode(true);
  74. count ++;
  75. ul2Clon.setAttribute("id","ul"+count)
  76. //3、在原ul2节点之前,插入新克隆节点
  77. document.body.insertBefore(ul2Clon,ul2);
  78.  
  79. }
  80.  
  81. //——————————————删除和替换节点——————————————————
  82.  
  83. //1、.removeChild(需删除节点):从父容器中删除指定节点;
  84. //2、.replaceChild(新节点,被替换节点):用新节点替换被指定节点,如果新节点为页面中已有节点,会将此节点删除后替换到指定节点。
  85.  
  86. function deleteUl1(){
  87.  
  88. //取到ul1
  89. var ul1 = document.getElementById("ul1");
  90. if (ul1){
  91. //从父容器body中删除ul1节点
  92. document.body.removeChild(ul1);
  93. }else{
  94. alert("憋删了,早没了");
  95. }
  96.  
  97. }
  98.  
  99. function ul1ReplaceUl2(){
  100.  
  101. var div = document.createElement("div");
  102. div.setAttribute("style","width: 100px;height: 100px;background-color: #20B2AA;");
  103. var ul2 = document.getElementById("ul2");
  104. document.body.replaceChild(div,ul2);
  105.  
  106. }
  107.  
  108. </script>
  109.  
  110. <style type="text/css">
  111.  
  112. ul{
  113. width: 600px;
  114. list-style: none;
  115. padding: 0;
  116. background-color: #20B2AA;
  117. display: flex;
  118. justify-content: space-around;
  119. margin-top: 20px;
  120. }
  121.  
  122. </style>
  123.  
  124. </head>
  125. <body>
  126.  
  127. <ul id="ul1">
  128. <li>第一项</li>
  129. <li>第二项</li>
  130. <li>第三项</li>
  131. <li>第四项</li>
  132. </ul>
  133.  
  134. <ul id="ul2">
  135. <li>第1项</li>
  136. <li>第2项</li>
  137. <li>第3项</li>
  138. <li>第4项</li>
  139. </ul>
  140.  
  141. <button onclick="appendImg()">在最后插入一幅图片</button>
  142. <button onclick="insertImg()">在两个ul之间插入一幅图片</button>
  143. <button onclick="copyUl()">copy一个ul2</button>
  144. <br />
  145.  
  146. <button onclick="deleteUl1()">删除ul1</button>
  147. <button onclick="ul1ReplaceUl2() ">用ul1替换ul2</button>
  148.  
  149. </body>
  150. </html>

2.3 表格操作

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>DOM操作表格</title>
  6.  
  7. <script type="text/javascript">
  8.  
  9. //表格对象:
  10. //1、rows属性:返回表格中的所有行,数组;
  11. //2、insertRow(index):在表格的第index+1行,插入一个新行;
  12. //3、deleteRow(index):删除表格的第index+1行;
  13.  
  14. //表格的行对象:
  15. //1、cells属性:返回当前行中的所有单元格,数组;
  16. //2、rowIndex属性:返回当前行在表格中的索引顺序,从0开始;
  17. //3、insertCell(index):在当前行的index+1处插入一个td;
  18. //4、deleteCell(index):删除当前行的第index+1个td;
  19.  
  20. //表格的单元格对象:
  21. //1、cellIndex属性:返回单元格在该行的索引顺序,从0开始;
  22. //2、innerHTML属性:设置或者返回当前单元格中的HTMl代码;
  23. //3、align(valign)属性:设置当前单元格的水平对齐方式;
  24. //4、className属性:设置单元格的class名称。
  25.  
  26. function newRow(){
  27.  
  28. var book = prompt("书名:");
  29. var price = prompt("价格:");
  30.  
  31. var table = document.getElementsByTagName("table");
  32. //在表格的最后一行插入一个新行
  33. var newRow = table[0].insertRow(table[0].rows.length-1);
  34. //给新行设置单元格
  35. var cell0 = newRow.insertCell(0);
  36. cell0.innerHTML = book;
  37. var cell1 = newRow.insertCell(1);
  38. cell1.innerHTML = price;
  39.  
  40. getSum();
  41.  
  42. }
  43.  
  44. function deleteRow(){
  45.  
  46. var table = document.getElementsByTagName("table");
  47. if(table[0].rows.length>2){
  48. table[0].deleteRow(table[0].rows.length-2);
  49. }else{
  50. alert("删删删!删你妹啊删!")
  51. }
  52. getSum();
  53. }
  54.  
  55. function changeTitle(){
  56.  
  57. var color = prompt("请输入6位十六进制颜色值:");
  58. var table = document.getElementsByTagName("table");
  59. table[0].rows[0].style = "background-color:#"+color;
  60.  
  61. }
  62.  
  63. function copyRow(){
  64.  
  65. var table = document.getElementsByTagName("table");
  66. var copyRow = table[0].rows[table[0].rows.length-2].cloneNode(true);
  67. var heJi = table[0].rows[table[0].rows.length-1];
  68. //由于浏览器,自动将表格的<tr>包裹在<tbody>中
  69. //所以<tr>实际并非<table>的子节点,故需取到<table>中的<tbody>进行插入;
  70.  
  71. if(table[0].rows.length>2){
  72. table[0].getElementsByTagName("tbody")[0].insertBefore(copyRow,heJi);
  73. }else{
  74. alert("没有可以复制的行");
  75. }
  76. getSum();
  77. }
  78.  
  79. function getSum(){
  80. //取到当前表格 表格所有行
  81. var table = document.getElementsByTagName("table");
  82. var rows = table[0].rows;
  83. //
  84. if(rows.length<=2){
  85. rows[rows.length-1].cells[1].innerText = 0 + "元";
  86. alert("没有可计算的行!");
  87. return;
  88. }
  89. //求和
  90. var sum = 0 ;
  91.  
  92. for(var i = 1 ; i <= rows.length-2 ; i++){//第0行与最后一行舍弃1 rows.length-2
  93.  
  94. var cells = rows[i].cells;//取到单元格
  95. sum += parseFloat(cells[cells.length-1].innerText);//最后一个单元格的 内容(innerText) 转化成数字并求和计算!
  96.  
  97. }
  98.  
  99. rows[rows.length-1].cells[cells.length-1].innerText = sum.toFixed(2) + "元";
  100.  
  101. }
  102.  
  103. window.onload = function(){
  104. getSum();
  105. }
  106.  
  107. </script>
  108.  
  109. <style type="text/css">
  110.  
  111. table{
  112. border-collapse: collapse;
  113. width: 400px;
  114. text-align: center;
  115. color: #585858;
  116. }
  117. td,th{
  118. border: 1px solid #8B8A8B;
  119. }
  120. table tr:last-child{
  121. color: #E70014;
  122. }
  123.  
  124. </style>
  125.  
  126. </head>
  127. <body>
  128.  
  129. <table>
  130. <tr>
  131. <th>书名</th>
  132. <th>价格</th>
  133. </tr>
  134. <tr>
  135. <td>看得见风景的房间</td>
  136. <td>30.00元</td>
  137. </tr>
  138. <tr>
  139. <td>幸福从天而降</td>
  140. <td>18.50元</td>
  141. </tr>
  142. <tr>
  143. <td>60个瞬间</td>
  144. <td>32.00元</td>
  145. </tr>
  146. <tr>
  147. <td>合计</td>
  148. <td></td>
  149. </tr>
  150. </table>
  151.  
  152. <br />
  153.  
  154. <button onclick="newRow()">增加一行</button>
  155. <button onclick="deleteRow()">删除最后一行</button>
  156. <button onclick="changeTitle()">修改标题样式</button>
  157. <button onclick="copyRow()">复制最后一行</button>
  158.  
  159. </body>
  160. </html>

三、鼠标和键盘、那些不得不说的事——JS中的事件

1、三足鼎立——JS中的事件分类

1.1 鼠标事件

click 单击

dblclick 双击

mouseover 鼠标移入

mouseout 鼠标移出

mousemove 鼠标划过

mousedown 鼠标按下

mouseup 鼠标抬起

1.2 键盘事件

keydown:键盘按下时触发

keypress:键盘按下并松开的瞬间触发

keyup:键盘抬起时触发

【注意事项】
①执行顺序:keydown keypress keyup
②长按时,会循环不断的执行keydown keypress
③有keydown事件,不一定有keyup事件(事件触发过程中,鼠标移走,可能就没有keyup)
④keypress事件只能捕获字母、数字、符号(包括回车和空格),不能捕获功能键;keydown keyup基本可以捕获所有功能键,特殊例外
⑤keypress区分大小写,keydown keyup不区分;
⑥keypress不区分主键盘和小键盘,keydown keyup区分;
【如何确定键盘触发按键】 
⑴ 在触发函数中触发参数e代表按键事件;
⑵ 通过e.keyCode 确认案件Ascii码值,进而确定按键;
⑶ 兼容所有浏览器的写法(一般不必要):
 var evn = e||event; //取到按键
 var code = evn.keyCode||evn.which||evn.charCode; //取到按键编码

1.3 HTML事件

2、此岸与彼岸——JS中的事件模型

2.1 DOM0事件模型

2.1.1 内联模型:直接将函数名作为HTML标签的某个事件属性的属性值;
        栗子 <button onclick="func()"></button>
        缺点:违反了W3C关于HTML与JS分离的基本原则!

2.1.2 脚本模型:在JS脚本中通过事件属性进行绑定;
        栗子 window.onload = function(){}
        局限性:同一节点只能绑定一个同类型事件;

2.2 DOM2事件模型(后面有栗子!)

优点:同一节点,可以添加多个同类型事件的监听器;


①添加事件绑定:
IE10之前:btn1.attachEvent("onclick",函数);
其他浏览器:btn1.addEventListener("click",函数,true/false);
true:表示事件捕获;false(默认):表示事件冒泡
兼容写法:if(btn1.attackEvent){btn1.attachEvent("onclick",函数);}else{btn1.addEventListener("click",函数,true/false);}

②取消事件绑定:
.detachEvent("onclick",函数名);
.removeEventListener("click",函数名);
注:如果取消时间帮顶,回调函数必须使用有名函数,而不能使用匿名函数。因为在取消事件帮顶时,需要传入函数名;

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>这里是栗子</title>
  6.  
  7. <script type="text/javascript">
  8. window.onload = function (){
  9.  
  10. var btn1 = document.getElementById("btn1");
  11. function func1(){
  12. alert(1);
  13. }
  14. function func2(){
  15. alert(2);
  16. }
  17. btn1.addEventListener("click",func1,false);
  18. btn1.addEventListener("click",func2,false);
  19.  
  20. var btn2 = document.getElementById("btn2");
  21. btn2.addEventListener("click",function(){
  22. btn1.removeEventListener("click",func1);
  23. },false);
  24.  
  25. }
  26. </script>
  27. </head>
  28. <body>
  29.  
  30. <button id="btn1">点我会弹窗!</button>
  31.  
  32. <br /><br />
  33.  
  34. <button id="btn2">点我不弹窗!</button>
  35. </body>
  36. </html>

3、上上下下——JS中的事件流

3.1 事件冒泡

当某DOM元素触发某事件时,会从当前DOM元素开始,逐个触发其祖先元素的同类型事件,直到DOM根节点;
DOM0事件流均为事件冒泡;
IE中使用.attachEvent()事件,均为冒泡;
其他浏览器.addEventListener()添加的事件,当第三个参数为false时,为冒泡。

3.2 事件捕获

当某DOM元素触发某事件时,会从DOM根节点,逐个触发其祖先元素的同类型事件,直到触发到当前DOM元素开始;

只有使用.addEventListener()添加的事件,并且当第三个参数为true时,才进行捕获。

3.3 阻止事件冒泡

IE浏览器:将e.cancelBubble属性设为true;
其他浏览器:调用e.stopPropagation();方法

3.4 取消事件默认行为

IE浏览器:将e.returnValue属性设为false;
其他浏览器:调用e.preventDefault(); 方法

(这里有栗子)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>事件流举栗</title>
  6. <style type="text/css">
  7.  
  8. #div1{
  9. width: 200px;
  10. height: 200px;
  11. background-color: #20B2AA;
  12. color: #FFFFFF;
  13. font-size: 20px;
  14. font-weight: 700;
  15. }
  16. #div2{
  17. width: 100px;
  18. height: 100px;
  19. background-color: #436690;
  20. color: #FFFFFF;
  21. font-size: 20px;
  22. font-weight: 700;
  23. }
  24. #div3{
  25. width: 50px;
  26. height: 50px;
  27. background-color: #4E2E83;
  28. color: #FFFFFF;
  29. font-size: 20px;
  30. font-weight: 700;
  31. }
  32.  
  33. </style>
  34.  
  35. </head>
  36. <body>
  37. <div id="div1">
  38. <div id="div2">
  39. <div id="div3">3</div>
  40. 2
  41. </div>
  42. 1
  43. </div>
  44.  
  45. <a href="../07 JS中的DOM/笔记.html" onclick="stopHref()">跳转页面</a>
  46. </body>
  47.  
  48. <script type="text/javascript">
  49. var div1 = document.getElementById("div1");
  50. var div2 = document.getElementById("div2");
  51. var div3 = document.getElementById("div3");
  52.  
  53. div1.addEventListener("click",function(e){
  54. handleE();
  55. console.log("div1触发了click事件");
  56. },false);
  57.  
  58. div2.addEventListener("click",function(e){
  59. handleE();
  60. console.log("div2触发了click事件");
  61. },false);
  62.  
  63. div3.addEventListener("click",function(e){
  64. handleE();
  65. console.log("div3触发了click事件");
  66. },false);
  67.  
  68. function handleE(e){
  69. var evn = e||window.event;
  70. evn.stopPropagation();
  71. }
  72. function stopHref(e){
  73.  
  74. e = e||window.event;
  75. if (e.preventDefault) {
  76. e.preventDefault(); //IE以外
  77. } else {
  78. e.returnValue = false; //IE
  79. }
  80.  
  81. alert("好气呀!");
  82.  
  83. }
  84.  
  85. </script>
  86.  
  87. </html>

从零开始的JS生活(二)——BOM、DOM与JS中的事件的更多相关文章

  1. DOM和IE中的 事件对象

    DOM中的事件对象:(符合W3C标准)    preventDefault()        取消事件默认行为    stopImmediatePropagation() 取消事件冒泡同时阻止当前节点 ...

  2. (二)咋使用VUE中的事件修饰符

    1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添 ...

  3. QRCode.js生成二维码

    QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...

  4. qrcode.js生成二维

    使用到qrcode.js生成二维码 pako.js压缩字符串:https://github.com/nodeca/pako 参照代码如下: <!DOCTYPE HTML PUBLIC " ...

  5. JS中的函数、Bom、DOM及JS事件

    本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...

  6. JS学习四(BOM DOM)

    BOM                Screen对象 console.log(window.width);//屏幕宽度 console.log(window.height);//屏幕高度 conso ...

  7. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

  8. js BOM DOM

    BOM对象 BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 简而言之就是使 JavaScript ...

  9. 从零开始学 Web 之 Vue.js(二)过滤器,按键修饰符,自定义指令

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. 【模板】Dijkstra的heap优化

    为了将最小费用最大流的spfa优化,决定将spfa换成heap优化的Dijkstra.(dijkstra不能处理负边权) 所以还得现学... 白点表示已经确定最短路径的点. 蓝点表示还未确定最短路径的 ...

  2. Linux - IP数据报报头及个字段的意义

    IP数据报的格式: IP 数据报的首部长度和数据长度都是可变长的,但总是4字节的整数倍. 对于IPv4 ,4位版本字段是4. (1)版本 占4位,指IP协议的版本.通信双方使用的IP协议版本必须一致. ...

  3. stm32通过电调带动电机(可按键调速)

    这几天在做32通过电调带动电机的实验,上网一查,发现这方面的资料很少,经过自己的亲自实践,总结出以下经验,供大家参考. 论坛上也有很多人说自己在做,但是都遇到了同样的瓶颈.我想他们大多是pwm的频率和 ...

  4. POJ 3261 出现至少K次的可重叠最长子串

    题意就是给一列数字,求最长的一个子串,并且满足子串在原数串中出现至少K次,子串可以重叠. 解法是将问题转为判定性问题,二分子串的长度,判定是否满足重复至少K次.判定方法是经典的根据子串长度将Heigh ...

  5. Linux的NFS配置

    1.NFS简介 (1)什么是NFS? 1)NFS是Net File System的简写,即网络文件系统.NFS是由SUN公司开发,并于1984年推出的一个RPC(远程过程调用)服务系统,它使我们能够达 ...

  6. 关于Integer与int

    integer a=new integer(1); integer b=new integer(1); int c=1; integer d=1; a==b  false因为地址不同: a==c  t ...

  7. Java中的多线程Demo

    一.关于Java多线程中的一些概念 1.1 线程基本概念 从JDK1.5开始,Java提供了3中方式来创建.启动多线程: 方式一(不推荐).通过继承Thread类来创建线程类,重写run()方法作为线 ...

  8. Angular杂谈系列2-Angular2升级Angular4指南

    什么什么?Angualr4都发布了,之前不都才Angualr2的么?又要推翻重来,啊? 那当然不是,Angualr4只是一个版本号而已,本质上还是Angular2:以后,谷歌把新版本的Angualr称 ...

  9. 解决 MySQL 分页数据错乱重复

    前言 一天,小明兴匆匆的在通讯工具上说:这边线上出现了个奇怪的问题,麻烦 DBA 大大鉴定下,执行语句 select xx from table_name wheere xxx order by 字段 ...

  10. ListView在异步加载动态图片时,往往最后一项或几项被遮盖(IM场景居多)

    如果ListView中得默认图片比较小,新图片加载后,撑大ListView中的对应项,导致最后一项或几项被覆盖. 解决思路: 1.默认图片设定和新图大小一样,换句话说,新图加载后转成和默认图片一样的大 ...