1. 绑定事件的区别
2. 移除绑定事件的方式及区别和兼容代码
3. 事件的三个阶段
4. 事件冒泡
5. 为同一个元素绑定多个不同的事件,指向的是同一个事件处理函数
6. 百度的大项目
7. BOM
8. 定时器
9. DOM加强,多个几个好玩的案例
绑定元素的区别
总结绑定事件的区别:
* addEventListener();
* attachEvent()
*
* 相同点: 都可以为元素绑定事件
* 不同点:
* 1.方法名不一样
* 2.参数个数不一样addEventListener三个参数,attachEvent两个参数
* 3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
* attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
* 4.this不同,addEventListener 中的this是当前绑定事件的对象
* attachEvent中的this是window
* 5.addEventListener中事件的类型(事件的名字)没有on
* attachEvent中的事件的类型(事件的名字)有on
*
* 现在遇到的逆境,都是以后成长的阶梯
为元素解绑事件
<input type="button" value="小苏" id="btn"/> <input type="button" value="干掉第一个按钮的事件" id="btn2"/> <script src="common.js"></script> <script> //1 对象.on事件名字=事件处理函数----绑定事件 // my$("btn").onclick=function () { // console.log("我猥琐"); // }; // my$("btn2").onclick=function () { // //1.解绑事件 // my$("btn").onclick=null; // }; // function f1() { // console.log("第一个"); // } // function f2() { // console.log("第二个"); // } // my$("btn").addEventListener("click",f1,false); // my$("btn").addEventListener("click",f2,false); // // //点击第二个按钮把第一个按钮的第一个点击事件解绑 // my$("btn2").onclick=function () { // //解绑事件的时候,需要在绑定事件的时候,使用命名函数 // my$("btn").removeEventListener("click",f1,false); // }; function f1() { console.log("第一个"); } function f2() { console.log("第二个"); } my$("btn").attachEvent("onclick",f1); my$("btn").attachEvent("onclick",f2); my$("btn2").onclick=function () { my$("btn").detachEvent("onclick",f1); }; //解绑事件: /* * 注意:用什么方式绑定事件,就应该用对应的方式解绑事件 * 1.解绑事件 * 对象.on事件名字=事件处理函数--->绑定事件 * 对象.on事件名字=null; * 2.解绑事件 * 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件 * 对象.removeEventListener("没有on的事件类型",函数名字,false); * 3.解绑事件 * 对象.attachEvent("on事件类型",命名函数);---绑定事件 * 对象.detachEvent("on事件类型",函数名字); * * * */ </script>
为元素绑定事件和解绑事件写兼容代码
<input type="button" value="按钮" id="btn1"/> <input type="button" value="干掉第一个按钮的事件" id="btn2"/> <script src="common.js"></script> <script> //绑定事件的兼容 function addEventListener(element,type,fn) { if(element.addEventListener){ element.addEventListener(type,fn,false); }else if(element.attachEvent){ element.attachEvent("on"+type,fn); }else{ element["on"+type]=fn; } } //解绑事件的兼容 //为任意的一个元素,解绑对应的事件 function removeEventListener(element,type,fnName) { if(element.removeEventListener){ element.removeEventListener(type,fnName,false); }else if(element.detachEvent){ element.detachEvent("on"+type,fnName); }else{ element["on"+type]=null; } } function f1() { console.log("第一个"); } function f2() { console.log("第二个"); } addEventListener(my$("btn1"),"click",f1); addEventListener(my$("btn1"),"click",f2); my$("btn2").onclick=function () { removeEventListener(my$("btn1"),"click",f1); }; </script>
事件冒泡
<head> <meta charset="UTF-8"> <title>title</title> <style> #dv1{ width: 300px; height: 200px; background-color: red; } #dv2{ width: 250px; height: 150px; background-color: green; } #dv3{ width: 200px; height: 100px; background-color: blue; } </style> <script> //事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了. </script> </head> <body> <div id="dv1"> <div id="dv2"> <div id="dv3"></div> </div> </div> <script src="common.js"></script> <script> //事件冒泡,阻止事件冒泡, //如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持 // e.stopPropagation(); 谷歌和火狐支持, my$("dv1").onclick=function () { console.log(this.id); }; my$("dv2").onclick=function () { console.log(this.id); //window.event.cancelBubble=true; }; //事件处理参数对象 my$("dv3").onclick=function (e) { console.log(this.id); //阻止事件冒泡 //e.stopPropagation(); console.log(e); }; // document.body.onclick=function () { // console.log("颤抖吧,你们这些愚蠢的标签"); // }; </script> </body>
事件阶段
<script> //事件有三个阶段: /* * * 1.事件捕获阶段 :从外向内 * 2.事件目标阶段 :最开始选择的那个 * 3.事件冒泡阶段 : 从里向外 * * 为元素绑定事件 * addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的) * 事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡---> * window.event.cancelBubble=true;谷歌,IE8支持,火狐不支持 * window.event就是一个对象,是IE中的标准 * e.stopPropagation();阻止事件冒泡---->谷歌和火狐支持 * window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准 * 事件参数e在IE8的浏览器中是不存在,此时用window.event来代替 * addEventListener中第三个参数是控制事件阶段的 * 事件的阶段有三个: * 通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的 * 如果这个属性的值是: * 1---->捕获阶段 * 2---->目标阶段 * 3---->冒泡 * 一般默认都是冒泡阶段,很少用捕获阶段 * 冒泡阶段:从里向外 * 捕获阶段:从外向内 * */ </script> </head> <body> <div id="dv1"> <div id="dv2"> <div id="dv3"></div> </div> </div> <script src="common.js"></script> <script> //事件冒泡:是从里向外 //同时注册点击事件 var objs = [my$("dv3"), my$("dv2"), my$("dv1")]; //遍历注册事件 objs.forEach(function (ele) { //为每个元素绑定事件 ele.addEventListener("click", function (e) { console.log(this.id+"====>"+e.eventPhase); }, true); }); //该属性在事件参数对象中存在 </script>
为同一个元素绑定多个不同事件指向同一个事件处理函数
<script> //为同一个元素绑定多个不同的事件,指向相同的事件处理函数 my$("btn").onclick = f1; my$("btn").onmouseover = f1; my$("btn").onmouseout = f1; function f1(e) { switch (e.type) { case "click": alert("好帅哦"); break; case "mouseover": this.style.backgroundColor = "red"; break; case "mouseout": this.style.backgroundColor = "green"; break; } } // my$("btn").onmouseover=function (e) { // console.log(e); // }; </script>
搜索框
<div id="box"> <input type="text" id="txt" value=""> <input type="button" value="搜索" id="btn"> </div> <script src="common.js"></script> <script> var keyWords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "传说是一个培训机构", "传说在有个很帅很纯洁的小杨", "苹果好吃", "苹果此次召回还是没有中国"]; //获取文本框注册键盘抬起事件 my$("txt").onkeyup = function () { //每一次的键盘抬起都判断页面中有没有这个div if(my$("dv")){ //删除一次 my$("box").removeChild(my$("dv")); } //获取文本框输入的内容 var text = this.value; //临时数组--空数组------->存放对应上的数据 var tempArr = []; //把文本框输入的内容和数组中的每个数据对比 for (var i = 0; i < keyWords.length; i++) { //是否是最开始出现的 if (keyWords[i].indexOf(text) == 0) { tempArr.push(keyWords[i]);//追加 } } //如果文本框是空的,临时数组是空的,不用创建div if (this.value.length == 0 || tempArr.length == 0) { //如果页面中有这个div,删除这个div if (my$("dv")) { my$("box").removeChild(my$("dv")); } return; } //创建div,把div加入id为box的div中 var dvObj = document.createElement("div"); my$("box").appendChild(dvObj); dvObj.id = "dv"; dvObj.style.width = "350px"; //dvObj.style.height="100px";//肯定是不需要的------ dvObj.style.border = "1px solid green"; //循环遍历临时数组,创建对应的p标签 for (var i = 0; i < tempArr.length; i++) { //创建p标签 var pObj = document.createElement("p"); //把p加到div中 dvObj.appendChild(pObj); setInnerText(pObj, tempArr[i]); pObj.style.margin = 0; pObj.style.padding = 0; pObj.style.cursor = "pointer"; pObj.style.marginTop = "5px"; pObj.style.marginLeft = "5px"; //鼠标进入 pObj.onmouseover = function () { this.style.backgroundColor = "yellow"; }; //鼠标离开 pObj.onmouseout = function () { this.style.backgroundColor = ""; }; } }; </script>
DOM
系统对话框
<script> //window.alert("您好啊");//以后不用,测试的时候使用 //window.prompt("请输入帐号"); // var result=window.confirm("您确定退出吗"); // console.log(result); </script>
加载事件
<script> //页面加载的时候,按钮还没出现,页面没有加载完毕 //页面加载完毕了,再获取按钮 //只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件 // window.onload=function () { // document.getElementById("btn").onclick=function () { // alert("您好"); // }; // }; //很重要 // onload=function () { // document.getElementById("btn").onclick=function () { // alert("您好"); // }; // }; //扩展的事件---页面关闭后才触发的事件 // window.onunload=function () { // // }; //扩展事件---页面关闭之前触发的 // window.onbeforeunload=function () { // alert("哈哈"); // }; </script>
location对象
<script> //对象中的属性和方法 //location对象 //console.log(window.location); // //地址栏上#及后面的内容 // console.log(window.location.hash); // //主机名及端口号 // console.log(window.location.host); // //主机名 // console.log(window.location.hostname); // //文件的路径---相对路径 // console.log(window.location.pathname); // //端口号 // console.log(window.location.port); // //协议 // console.log(window.location.protocol); // //搜索的内容 // console.log(window.location.search); onload=function () { document.getElementById("btn").onclick=function () { //设置跳转的页面的地址 //location.href="http://www.jd.com";//属性----------------->必须记住 //location.assign("http://www.jd.com");//方法 //location.reload();//重新加载--刷新 //location.replace("http://www.jd.com");//没有历史记录 }; }; </script>
history对象
<script> //跳转的 my$("btn1").onclick = function () { window.location.href = "15test.html"; }; //前进 my$("btn2").onclick = function () { window.history.forward(); }; //后退 my$("btn").onclick = function () { window.history.back(); }; </script>
navigator对象
<script> 通过userAgent可以判断用户浏览器的类型 console.log(window.navigator.userAgent); //通过platform可以判断浏览器所在的系统平台类型. //console.log(window.navigator.platform); </script>
计时器
<input type="button" value="停止" id="btn"/> <script> //BOM中有两个定时器---计时器 //定时器 //参数1:函数 //参数2:时间---毫秒---1000毫秒--1秒 //执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数..... //返回值就是定时器的id值 var timeId = setInterval(function () { alert("hello");//断言 }, 1000); document.getElementById("btn").onclick = function () { //点击按钮,停止定时器 //参数:要清理的定时的id的值 window.clearInterval(timeId); }; </script>