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的更多相关文章
随机推荐
- 用jQuery实现Ajax
前置知识:ajax原理,json字符串进行信息传递. Ajax主要的功能是实现了浏览器端 异步 访问服务器:通过浏览器的XMLHttpRequest对象发出小部分数据,与服务端进行交互, 服务端返回小 ...
- mysql把查询结果集插入到表理
把表B的内容插入到表A INSERT INTO 1111_0 SELECT*FROM report_0 把查询结果集插入到表中 insert into A(a,b,c) select from B(a ...
- TypeScript学习笔记 （一）基础特性
一. 字符串新特性 1. 多行字符串 var str = ``; 2. 字符串模板 var world = "world"; var str = `hello ${world}`; ...
- python 进阶读书笔记2 -- python魔法函数
#!/usr/bin/env python# -*- coding: utf-8 -*- class student: def __init__(self, name_list): self.stud ...
- google hacking
Google是一个强大的搜索引擎:而对于黑客而言,则可能是一款绝佳的黑客工具.正因为google的检索能力强大,黑客可以构造特殊的关键字,使用Google搜索互联网上的相关隐私信息.通过Google, ...
- mysql配置utf8_mb4
http://blog.csdn.net/u013145194/article/details/51527389 注:以上是转载,但我实际使用的时候,修改配置文件重启数据库,然后修改表的类型即可 20 ...
- oracle中date数据的转换问题
(TO_NUMBER(TO_CHAR(FP.KPRQ, 'HH24')) >= 18 kprq >= to_DATE ('2017-01-12 18:00:00','yyyy-MM-dd ...
- 初窥Java之一
一.常用的dos命令 打开命令提示符窗口的方式: ① win + R --> 输入cmd --> 回车 ② 开始 --> 搜索程序和文件的框中输入 cmd --> 回车 ③ ...
- hadoop离线计算项目上线配置问题记录
最近上线一个hadoop离线处理项目,因为在低配置(8G,4核)的时候装的CDH,后来集群配置(64G,16核)上来了,但许多参数不会自动修改,需要自己调整,处理过程中遇到的配置问题记录下. 1.hi ...
- RFC2616-HTTP1.1-Methods(方法规定部分—单词注释版)
part of Hypertext Transfer Protocol -- HTTP/1.1RFC 2616 Fielding, et al. 9 Method Definitions The se ...