JSAP104
1、目标：
2、绑定事件的区别
1）.addEventListener中的this是当前绑定的对象
.attachEventListener是window
2）
3）解绑事件
方法一：例
my$("btn").onclick=null;
方式2：
.removeEventListener(3个参数与addEventListener的一模一样，但是要用命名函数)
方式3：仅对IE8
4、兼容代码
1）绑定事件的
2）解绑事件的
5、事件冒泡
1）多个元素嵌套，有层次关系，这些元素都注册了相同的事件。若里面的元素的事件触发了，外面的元素事件也自动地出发了
body的高度是靠标签撑起来的
2）阻止事件冒泡：
事件处理函数中有一隐藏参数——事件处理参数对象,在ie8中不存在，是window.event
windows.event.cancelBubble=true;
ie,谷歌支持，但火狐不支持
//借助上述的事件处理参数对象
要在function的参数列表内写出来这个参数
my$(“dv3”).onclick=function(e){
e.stopPropagation();
}
3、事件总结
1）事件捕获阶段
从外向内
同时注册事件：
上述代码中第三个参数为真即表明处于事件捕获阶段，为假则是事件冒泡阶段
事件目标阶段
事件冒泡阶段：从里向外
如何判断是哪个阶段？
用事件参数对象的属性判断
.eventPhase
1–捕获阶段
2–目标阶段
3–冒泡阶段
冒泡和捕获时候不可能同时发生的
4、为同一个元素注册不同的事件
用e.type判断事件类型即可
百度项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 450px;
margin: 200px auto;
}
#txt {
width: 350px;
}
#pop {
width: 350px;
border: 1px solid red;
}
#pop ul {
margin: 10px;
padding: 0px;
width: 200px;
list-style-type: none;
}
#pop ul li {
}
</style>
</head>
<body>
<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>
</body>
</html>
5、BOM
Browser Object Model
浏览器对象模型
浏览器中的顶级对象：window
页面中的顶级对象：document
页面中所欲的内容都是属于浏览器的，也都是window的，window是可以省略的
window.name//输出为空，尽量不要用。
window又名top
2）系统对话框
一般我们不使用系统的对话框，一般使用css自制
alert()//一般不用，有断言作用
.prompt()//
3）页面加载的事件
window.onload=function(){
}
页面所有内容加载完毕后才执行的事件函数，window可省略。重要。
4）location对象
地址栏
locallost主机
5）hstory对象
history.forward 前进
history.back 后退
window.navigator.useAgent
window.navigator.platformb
6)定时器
清空定时器：window.clearInterval();
只有一个参数，数字类型，是要清理的定时器的id，返回值就是定时器的id值
//摇起来代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
img {
width: 200px;
height: 352px;
}
div {
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="摇起来" id="btn1"/>
<input type="button" value="别摇了" id="btn2"/>
<div id="dv">
<img src="timg.jpg"/>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg"/>
</div>
<script>
function my$(id) {
return document.getElementById(id)
}
var timeId;
//点击按钮摇起来
my$("btn1").onclick = function () {
timeId = setInterval(function () {
var x = parseInt(Math.random() * 800 + 1);//1~600的随机数
var y = parseInt(Math.random() * 300 + 1);
my$("dv").style.left = x + "px";//拼接
my$("dv").style.top = y + "px";
}, 400
);
};
my$("btn2").onclick = function () {
clearInterval(timeId);
};
</script>
</body>
//星星案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
height: 600px;
width: 600px;
border: 2px solid turquoise;
background-color: black;
position: relative;
}
span {
font-size: 12px;
color: pink;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="点亮" id="btn"/>
<div id="dv"></div>
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick = function () {
setInterval(function () {
my$("dv").innerHTML = "<span>❤</span>";
my$("dv").innerHTML = "<span>❤</span>";
var x = parseInt(Math.random() * 600);
var x2 = parseInt(Math.random() * 600);
var y = parseInt(Math.random() * 600);
var y2 = parseInt(Math.random() * 600);
my$("dv").firstElementChild.style.left = x + "px";
my$("dv").firstElementChild.style.top = y + "px";
my$("dv").lastElementChild.style.left = x2 + "px";
my$("dv").lastElementChild.style.top = y2 + "px";
}, 40);
};
</script>
</body>