JSAP104
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>
JSAP104的更多相关文章
随机推荐
- photoshop CC智能切图
网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.p ...
- IIS异常
http 错误 500.19 - internal server error 今天发布wcf到本地的IIS上,访问时出现了500.19错误.有效解决办法:是因为IIS没有安装完全,把能勾选的全部勾选上 ...
- C语言关于进制转换，补码, 整数的位操作
菜单导航: 1.二进制.八进制.十进制.十六进制的相互转换 2.原码.反码.补码 3.举例证明整数在计算机内是以补码的形式存在(以负数为例) 4.整数的位操作:按位且&.或|.异或^.取反~ ...
- python全栈开发day55-mysql外键的三种变种
一.昨日内容回顾 二.今日内容总结 三.mysql应知必会 你可以通过INFORMATION_SCHEMA.KEY_COLUMN_USAGE 表来查看. select * from INFORMATI ...
- Android SDK离线安装更新方法
直接使用Android SDK Manager进行下载.更新速度很慢,有时候会出现错误.网上查找了不少网友的方法,做个总结. 1.启动Android SDK Manager,并等待reposity加载 ...
- 带你了解zabbix如何监控mysql主从到报警触发
本章博客我们一起来聊一聊如何监控mysql数据库主从状态? 思路梳理: 1)首先我们都知道,判断Mysql主从是否正常,是通过主从上面的SQL和IO线程都为yes状态判断(通过awk取值,grep过滤 ...
- mariadb-半同步复制
半同步复制: 使用插件 对于从节点,有一部分为同步复制,当主节点复制完从节点后才向客户返回ok,同步超时后自动降级为异步 有一部分为异步复制 这样为了与主节点冗余 基于主从的模式上搭建 半同步复制: ...
- js网页下载csv格式的表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 51Nod1868 彩色树 虚树
原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1868.html 题目传送门 - 51Nod1868 题意 给定一颗 $n$个点的树,每个点一个 $[ ...
- VS2017 cdkey
Enterprise:NJVYC-BMHX2-G77MM-4XJMR-6Q8QF ProfessionalKBJFW-NXHK6-W4WJM-CRMQB-G3CDH