js事件
事件
事件 (Event) 是 JavaScript 应⽤跳动的⼼脏 ，进⾏交互，使⽹⻚动起来。当我们与浏览器中 Web ⻚⾯进⾏某些类型的交互时，事件就发⽣了。
事件源: 谁触发的事件
事件名: 触发了什么事件
事件监听: 谁管这个事情，谁监视？
事件处理:发⽣了怎么办
作用:
（1）验证⽤户输⼊的数据。
（2）增加⻚⾯的动感效果。
（3）增强⽤户的体验度
事件类型
JavaScript可以处理的事件类型为：⿏标事件、键盘事件、HTML事件。
常用的几个事件:
onclick 元素发生鼠标点击时触发
onblur 元素失去焦点时运行的脚本
onfocus 元素获得焦点时运行的脚本
onload 页面加载之后触发
onchange 在元素值被改变时运行的脚本
onmouseover 当鼠标指针移动到元素上时触发
onmouseout 当鼠标指针移出元素时触发
onkeyup 当用户释放按键时触发
onkeydown 在用户按下按键时触发
事件流和事件模型
我们的事件最后都有⼀个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当⼀个HTML元 素产⽣⼀个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到 该事件，这个传播过程称为DOM事件流。
事件顺序有两种类型：事件捕获 和 事件冒泡。
IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节 点（⽂档）。
事件捕获的思想是不太具体的节点应该更早接收到事 件，⽽最具体的节点应该最后接收到事件。事件捕获的⽤意在于在事件到达预定⽬标之前捕获它。
BOM对象
BOM的核⼼对象是window，它表示浏览器的⼀个实例。window对象有双重⻆⾊，它既是通过 JavaScript访问浏览器窗⼝的⼀个接⼝，⼜是ECMAScript规定的Global对象。这意味着在⽹⻚中定义的任 何⼀个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等⽅法。如果⻚⾯中 包含框架，则每个框架都拥有⾃⼰的window对象，并且保存frames集合中。在frames集合中，可以通 过数值索引（从0开始，从左⾄右，从上到下）或者框架的名称来访问相应的window对象。
浏览器通过（实际是window对象的⽅法）alert()、confirm()、prompt()⽅法可以调⽤系统对话框向⽤户显示消息。
（1）消息框:alert， 常⽤。
alert() ⽅法⽤于显示带有⼀条指定消息和⼀个 OK 按钮的警告框。
（2）输⼊框:prompt，返回提示框中的值。
prompt() ⽅法⽤于显示可提示⽤户进⾏输⼊的对话框。
参数（可选）：
第⼀个参数：要在对话框中显示的纯⽂本。
第⼆个参数：默认的输⼊⽂本。
（3）确认框:confirm，返回 true/false.
confirm() ⽅法⽤于显示⼀个带有指定消息和 OK 及取消按钮的对话框。
<style type="text/css"> #aa{ border: 1px solid red; height: 100px; } </style> <body> <div id="aa"> This is a div </div> <button onclick="testAlert();">警告</button> <button onclick="testComfirm();">修改</button> <button onclick="testPrompt();">输⼊</button> <script type="text/javascript"> // 1.警告框 function testAlert(){ alert('警告框！！！'); } /* 2.输⼊框 返回值：输⼊的内容 - */ function testPrompt(){ var item = prompt('请输⼊年龄'); // item得到输⼊的值 // console.log(item) // alert(prompt('请输⼊年龄',18)); // 将输⼊的值输出 } /* 3.确认框 返回值：boolean（true|false） - */ function testComfirm(){ var result = confirm('真的要改吗？'); if(result){ var ele = document.getElementById("aa"); ele.style.color="red"; ele.innerHTML="<span>fdsfsd</span>"; }else{ alert("没事别瞎点。。。"); } } </script> </body>
打开窗⼝
window.open()⽅法既可以导航到⼀个特定的URL也可以⽤来打开⼀个新的窗⼝
<script type="text/javascript"> function openBaidu(){ window.open('http://www.baidu.com','_self'); // _self、_blank等 // window.open(); //空⽩窗⼝ } </script> <input type="button" name="open" value="百度" onclick='openBaidu();' />
关闭窗⼝
window.close()：关闭窗⼝。
<input type="button" value="关闭窗⼝" onclick="window.close();" />
时间函数
setTimeout() : 在指定的毫秒数后调⽤函数或计算表达式。返回⼀个唯⼀的标识；也可以通过返回的
clearTimeout(id)： 来清除指定函数的执⾏。
var id = setTimeout(function,times); clearTimeout(id) <script type="text/javascript"> // 延迟3 秒后出现 alert function hello() { alert("对不起, 要你久候"); } setTimeout("hello()", 3000); // 时间显示器 var timeout; function init(){ // 拿到当前时间 var date = new Date(); var time = date.toLocaleString(); // 拿到相应对象 var h1 = document.getElementById('h1'); // 根据需求添加样式 if(0==date.getSeconds()){ // 当时间的秒数变成0时，显示红⾊字体 h1.innerHTML = '<span style="color:red">' + time + '</span>'; } else { h1.innerHTML = time; } /* - 定时操作，只执⾏⼀次 第⼀个参数：执⾏的⽅法；第⼆个参数：定时，单位是毫秒 \* */ setTimeout(init,1000); // 等多少时间来执⾏ } // window.setTimeout(init,1000);// 只执⾏⼀次 // 停⽌操作 function stopShow () { clearTimeout(timeout); } </script> <body onload="init();"> <h1 id="h1"></h1> <button onclick="stopShow()">时间停⽌</button> </body> //**在times毫秒后执⾏function指定的⽅法，执⾏之前也可以取消**
setInteval()
setInterval():可按照指定的周期（以毫秒计）来调⽤函数或计算表达式，也可根据返回的标识⽤来结束。该⽅法会不停地调⽤函数，直到 clearInterval() 被调⽤或窗⼝被关闭。
var id = setInterval(function,times); clearInterval(id); function test(){ console.log("....."); } // window是⼀个全局对象，通过全局对象调⽤setInterval()函数 window.setInterval(test,1000);
history对象
history 对象是历史对象。包含⽤户（在浏览器窗⼝中）访问过的 URL。history 对象是 window 对象的
⼀部分，可通过 window.history 属性对其进⾏访问。
history对象的属性：length，返回浏览器历史列表中的 URL 数量。
history对象的⽅法：
back()：加载 history 列表中的前⼀个 URL。 forward()：加载历史列表中的下⼀个 URL。当⻚⾯第⼀次访问时，还没有下⼀个url。 go(number|URL): URL 参数使⽤的是要访问的 URL。⽽ number 参数使⽤的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上⼀个⻚⾯
location对象
location 对象是window对象之⼀，提供了与当前窗⼝中加载的⽂档有关的信息，还提供了⼀些导航功
能。也可通过 window.location 属性来访问。
location 对象的属性 href：设置或返回完整的 URL
location 对象的⽅法
reload()：重新加载当前⽂档。
replace()：⽤新的⽂档替换当前⽂档。
DOM对象
要实现⻚⾯的动态交互效果，bom 操作远远不够，需要操作 html 才是核⼼.如何操作 html，就是 DOM。简单的说，dom 提供了⽤程序动态控制 html 接⼝。DOM即⽂档对象模型描绘了⼀个层次化的节点树，运⾏开发⼈员添加、移除和修改⻚⾯的某⼀部分。dom 处于javascript 的核⼼地位上。
节点
加载 HTML ⻚⾯时，Web 浏览器⽣成⼀个树型结构，⽤来表示⻚⾯内部结构。DOM 将这种树型结构理 解为由节点组成，组成⼀个节点树。对于⻚⾯中的元素，可以解析成以下⼏种类型的节点：
1.文档节点
2.元素节点
3.属性节点
4.文本节点
5.注释节点
操作元素节点
1.获取节点
方法:
getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()
案例:
<body> <p id="p1" class="para">这是⼀个段落<span>⽂本</span></p> <p id="p1" class="para">这⼜是⼀个段落</p> <input type="text" name="txt" /> <input type="checkbox" name="hobby" value="游泳" />游泳 <input type="checkbox" name="hobby" value="篮球" />篮球 <input type="checkbox" name="hobby" value="⾜球" />⾜球 <hr /> <a href="javascript:void(0)" onclick="testById()">按照id获取</a> <a href="javascript:void(0)" onclick="testByName()">按照name获取</a> <a href="javascript:void(0)" onclick="testByTagName()">按照标签名获取</a> <a href="javascript:void(0);" onclick="testByClass();">按照class获取</a> </body> 12345678910111213141516171819202122232425 <script type="text/javascript"> // 按照id获取元素 function testById() { // 返回单个对象 var p = document.getElementById("p1"); console.log(p); // 表示获取元素开始标签和结束标签之间的html结构 console.log(p.innerHTML); console.log(p.innerText); // 表示获取标签之间的普通⽂本 } // 按照name获取元素 function testByName() { // 对象数组 var ho = document.getElementsByName("hobby"); console.log(ho); for(var i = 0; i <= ho.length - 1; i++) { console.log(ho[i].value); } } // 按照标签名获取元素 function testByTagName() { // 对象数组 var inputArr = document.getElementsByTagName("input"); for(var i = 0; i < inputArr.length; i++) { if(inputArr[i].type == "text") { console.log("text类型"); } else if(inputArr[i].type == "checkbox") { if(inputArr[i].checked) { console.log(inputArr[i].value); } } } } // 按照class属性获取元素 function testByClass() { // 对象数组 var ps = document.getElementsByClassName("para"); console.log(ps[0].innerHTML); ps[0].innerHTML += "这是⼀段新的⽂本"; } </script>
2.创建节点和插⼊节点
创建节点
createElement() 创建⼀个新的节点，需要传⼊节点的标签名称，返回创建的元素对象
createTextNode() 创建⼀个⽂本节点，可以传⼊⽂本内容
innerHTML 也能达到创建节点的效果，直接添加到指定位置了
插入节点
write() 将任意的字符串插⼊到⽂档中
appendChild() 向元素中添加新的⼦节点，作为最后⼀个⼦节点
insertBefore() 向指定的已有的节点之前插⼊新的节点newItem：要插⼊的节点exsitingItem：参 考节点 需要参考⽗节点
<button onclick="add()">添加段落</button> <div id="container"></div> <script type="text/javascript"> function add(){ var container = document.getElementById('container') var paragraph = document.createElement('p'); var txt = document.createTextNode('hello') paragraph.appendChild(txt) container.appendChild(paragraph) } </script>
添加 “段落、图⽚、⽂本框、选项”
<body> <button onclick="addPara();">添加段落</button> <button onclick="addImg();">添加图⽚</button> <button onclick="addTxt();">添加⽂本框</button> <button onclick="addOptions()">添加选项</button> <select name="music"> <option value="-1">你⼼内的⼀⾸歌</option> <option value="0">南⼭南</option> <option value="1">喜欢你</option> </select> <hr /> <div id = "container"></div> </body> <script type="text/javascript"> // 添加p节点 function addPara(){ // 获取容器 var container =document.getElementById("container"); // 创建段落<p></p> var p =document.createElement('p'); // 第⼀种⽅式 // 创建⽂本节点 var txt=document.createTextNode("以后的你会感谢现在努⼒的你"); // 将txt节点追加到p节点中 p.appendChild(txt); // 将p节点追加到container节点中 container.appendChild(p); /* // 第⼆种⽅式 // 向p节点中添加内容 p.innerHTML = "以后的你会感谢现在努⼒的你"; // 将p节点追加到container节点中 container.appendChild(p); */ /* // 第三种⽅式 // 将字符串类型的p标签内容添加到container中，不会添加多次 var str = "<p>以后的你会感谢现在努⼒的你</p>"; container.innerHTML = str; */ } // 添加图⽚ function addImg(){ // 创建图⽚ var img = document.createElement("img") ; /* // 设置属性第⼀种⽅式 // 设置img标签的src属性 // img.src ="http://www.baidu.com/img/bd_logo1.png"; */ // 设置属性第⼆种⽅式 // setAttribute() ⽅法添加指定的属性，并为其赋指定的值。 // 设置img的src属性 img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png'); img.style.width = '300px'; img.style.height = '200px'; // 获取容器 var container =document.getElementById("container"); // 将img节点追加到container中。 container.appendChild(img); } // 添加⽂本框 function addTxt(){ // 创建⽂本框 var txt =document.createElement("input"); /* // 设置类型第⼀种⽅式 txt.type = "text"; txt.value = "添加成功"; */ // 设置类型第⼆种⽅式 txt.setAttribute('type', 'text'); txt.setAttribute('value', '添加成功'); /* \* txt.type = 'password' \* txt.value = '123' */ // 获取容器 var container =document.getElementById("container"); // 将txt节点追加到container中。 container.appendChild(txt); } // 添加下拉框的选项 function addOptions(){ // 第⼀种⽅式 /* // 创建下拉项 var option = document.createElement("option") ; option.value = "2" ; option.text = "油菜花" ; // 获取下拉框 var sel = document.getElementsByTagName("select")[0]; // 添加 下拉项 sel.appendChild(option); */ // 第⼆种⽅式: var option = document.createElement("option") ; option.value = "2" ; option.text = "不该" ; // 获取下拉框 var sel = document.getElementsByTagName("select")[0]; // 添加下拉项 sel.options.add(option); // 第三种⽅式: 添加下拉项 var sel = document.getElementsByTagName("select")[0]; sel.innerHTML += "<option value = '2'>英雄</option>" ; } </script>