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的更多相关文章
随机推荐
- python全栈开发day68-ORM操作：一般操作、ForeignKey操作、ManyToManyField、聚合查询和分组查询、F查询和Q查询等
ORM操作 https://www.cnblogs.com/maple-shaw/articles/9403501.html 一.一般操作 1. 必知必会13条 <1> all(): 查询 ...
- BZOJ2120 数颜色 莫队 带修莫队
原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ2120.html 题目传送门 - BZOJ2120 题意 给定一个长度为 $n$ 的序列 $a$ ,有 ...
- 013 mysql中find_in_set()函数的使用
在工作中遇见过,对于新知识,在这里写一写文档. 1.作用 举个例子,也许不理解,在看完后面的SQL示例,再来看就明白了: 有个文章表里面有个type字段,它存储的是文章类型,有 1头条.2推荐.3热点 ...
- 大数据及Hadoop的概述
一.大数据存储和计算的各种框架即工具 1.存储:HDFS:分布式文件系统 Hbase:分布式数据库系统 Kafka:分布式消息缓存系统 2.计算:Mapreduce:离线计算框架 stor ...
- Java 之 CSS
1.CSS a.定义:CSS 指层叠样式表 b.意义:为了解决内容与表现分离的问题 c.特点:多个样式可层叠为一 2.用法: a.行内样式:style <span style="col ...
- 轻松3步设置sublime text2/sublime text3的预览浏览器
转https://www.cnblogs.com/swii/p/5888494.html 1,打开sublime 依次选择 tools > build system > new build ...
- poj 3694 Network 【Tarjan】+【LCA】
<题目链接> 题目大意: 给一个无向图,该图只有一个连通分量.然后查询q次,q < 1000, 求每次查询就增加一条边,求剩余桥的个数. 解题分析: 普通的做法就是在每加一条边后,都 ...
- jupyter notebook不能选择虚拟环境的解决方法
今天使用dlib没有py37版本,因此创建了Version_36虚拟环境.但jupyter notebook默认的内核找不到新建的虚拟环境,解决方法是需要安装两个包: × ipykernel × nb ...
- anaconda源配置
1. 生成配置文件 第一次运行 conda config命令时,将会在用户的home目录创建该文件..condarc配置文件,是一种可选的(optional)运行期配置文件,其默认情况下是不存在的. ...
- 安排~~炒鸡全的JS兼容问题，码上-----【XUEBIG】
如何处理兼容问题 如果两个都是属性,用逻辑||做兼容 如果有一个是方法,用三元做兼容 如果是多个属性或方法,封装函数做兼容 两个小知识点: 1.取消拖拽的默认行为: document.ondragst ...