JavaScript基础（七）DOM（四）

本文链接：https://blog.youkuaiyun.com/ld705454682/article/details/104692212

总结绑定事件区别

* 总结绑定事件的区别:
* 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").οnclick=function () {
// console.log("我猥琐");
// };
// my$("btn2").οnclick=function () {
// //1.解绑事件
// my$("btn").οnclick=null;
// };

// function f1() {
// console.log("第一个");
// }
// function f2() {
// console.log("第二个");
// }
// my$("btn").addEventListener("click",f1,false);
// my$("btn").addEventListener("click",f2,false);
//
// //点击第二个按钮把第一个按钮的第一个点击事件解绑
// my$("btn2").οnclick=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").οnclick=function () {
my$("btn").detachEvent("onclick",f1);
};

//解绑事件:
/*
* 注意:用什么方式绑定事件,就应该用对应的方式解绑事件
* 1.解绑事件
* 对象.on事件名字=事件处理函数--->绑定事件
* 对象.on事件名字=null;
* 2.解绑事件
* 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
* 对象.removeEventListener("没有on的事件类型",函数名字,false);
* 3.解绑事件
* 对象.attachEvent("on事件类型",命名函数);---绑定事件
* 对象.detachEvent("on事件类型",函数名字);
*

---------------------------------------------------------------------------------------------------------

绑定事件和解绑事件的兼容代码

//绑定事件的兼容
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").οnclick=function () {
removeEventListener(my$("btn1"),"click",f1);
};

------------------------------------------------------------------------------------------------------------------------------

事件冒泡和阻止事件冒泡

//事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.
</script>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>

//事件冒泡,阻止事件冒泡,
//如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

// e.stopPropagation(); 谷歌和火狐支持,

my$("dv1").οnclick=function () {
console.log(this.id);
};
my$("dv2").οnclick=function () {
console.log(this.id);
//window.event.cancelBubble=true;
};
//事件处理参数对象
my$("dv3").οnclick=function (e) {
console.log(this.id);
//阻止事件冒泡
//e.stopPropagation();

console.log(e);
};

// document.body.οnclick=function () {
// console.log("颤抖吧,你们这些愚蠢的标签");
// };
--------------------------------------------------------------------------------------------------------------------

事件阶段

#dv2 {
width: 250px;
height: 150px;
background-color: green;
}

#dv3 {
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<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);

});

---------------------------------------------------------------------------------------------------------------------------

为同一个元素绑定多个不同的事件,指向相同的事件处理函数

<input type="button" value="小苏" id="btn"/>
<script src="common.js"></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").οnmοuseοver=function (e) {
// console.log(e);
// };
</script>

----------------------------------------------------------------------------------------------------------------

BOM介绍

// var num=100;
// console.log(window.num);

// function f1() {
// console.log("小苏我也从了");
// }
// window.f1();

//因为页面中的所有内容都是window的,window是可以省略的.

//window.document.write("哈哈");

// var name="您好";
// console.log(window.name);

// console.log(top);
// console.log(window);

</script>

-----------------------------------------------------------------------------------------------------

系统对话框

以下几个对话框以后不用。不美观，无法调样式

//window.alert("您好啊");//以后不用,测试的时候使用
//window.prompt("请输入帐号");
// var result=window.confirm("您确定退出吗");
// console.log(result);

---------------------------------------------------------------------------------------------------------

页面加载事件

//页面加载的时候,按钮还没出现,页面没有加载完毕

//页面加载完毕了,再获取按钮
//只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件
// window.οnlοad=function () {
// document.getElementById("btn").οnclick=function () {
// alert("您好");
// };
// };

//很重要
// οnlοad=function () {
// document.getElementById("btn").οnclick=function () {
// alert("您好");
// };
// };

//扩展的事件---页面关闭后才触发的事件
// window.οnunlοad=function () {
//
// };
//扩展事件---页面关闭之前触发的
// window.οnbefοreunlοad=function () {
// alert("哈哈");
// };

</script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
</body>

---------------------------------------------------------------------------------------------------------------------

location对象

//对象中的属性和方法
//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);

οnlοad=function () {
document.getElementById("btn").οnclick=function () {
//设置跳转的页面的地址
//location.href="http://www.jd.com";//属性----------------->必须记住
//location.assign("http://www.jd.com");//方法
//location.reload();//重新加载--刷新
//location.replace("http://www.jd.com");//没有历史记录

};
};

</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>

-------------------------------------------------------------------------------------------------------------------------------

history对象

<body>
<input type="button" value="跳过去" id="btn1"/>
<input type="button" value="前进" id="btn2"/>
<script src="common.js"></script>
<script>
//跳转的
my$("btn1").onclick = function () {
window.location.href = "15test.html";
};
//前进
my$("btn2").onclick = function () {
window.history.forward();
};
</script>

-------------------------------------------------------------------------------------------------------

navigator对象

通过userAgent可以判断用户浏览器的类型
console.log(window.navigator.userAgent);
//通过platform可以判断浏览器所在的系统平台类型.
//console.log(window.navigator.platform);

--------------------------------------------------------------------------------------------------------------------------

定时器

//BOM中有两个定时器---计时器

</script>
</head>
<body>
<input type="button" value="停止" id="btn"/>
<script>
//定时器
//参数1:函数
//参数2:时间---毫秒---1000毫秒--1秒
//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....
//返回值就是定时器的id值
var timeId = setInterval(function () {
alert("hello");//断言
}, 1000);
document.getElementById("btn").onclick = function () {
//点击按钮,停止定时器
//参数:要清理的定时的id的值
window.clearInterval(timeId);
};
</script>