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的更多相关文章
随机推荐
- 键盘Hook【Delphi版】
原文:https://www.cnblogs.com/edisonfeng/archive/2012/05/18/2507858.html 一.钩子的基本概念 a) Hook作用:监视windows消 ...
- [LeetCode] Best Time to Buy and Sell Stock 6道合集【DP】
1. Best Time to Buy and Sell Stock 2. Best Time to Buy and Sell Stock II 3. Best Time to Buy and Sel ...
- [转]sqlplus /nolog 出错解决 SP2-0667: Message file sp1<lang>.msb not found SP2-0750: You may need to set ORACLE_HOME to your Oracle software directory
http://techxploration.blogspot.com/2012/01/resolving-sp2-0750-you-may-need-to-set.html Resolving SP2 ...
- javascript小例子：實現四方向文本无缝滚动效果
实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...
- kudu的读取数据流程
当客户端从Kudu的表中读取数据时,必须首先建立需要连接的系列tablet服务器. 通过执行tablet发现过程(如上所述)来确定包含要读取的主关键字范围的tablet的位置(读取不必在领导者tabl ...
- Codeforces 1017F The Neutral Zone 数论
原文链接https://www.cnblogs.com/zhouzhendong/p/CF1017F.html 题目传送门 - CF1017F 题意 假设一个数 $x$ 分解质因数后得到结果 $x=p ...
- datatable 转list ,list转datatable
方法一: public static IList<T> ConvertToModel(DataTable dt) { // 定义集合 ...
- js里面的判断最好做到完全控制
<li class="item"> <div id="zcdz" name="zcdz" class="mini ...
- python爬虫积累（一）--------selenium+python+PhantomJS的使用（转）
阅读目录 一.Selenium介绍 二.爬虫为什么要用selenium? 三.PhantomJS介绍 四.PhantomJS安装 五.操作实战 六.在此推荐虫师博客的学习资料 selenium + p ...
- Django之url路由
Django之url路由 url路由介绍 url路由是关联url及其视图函数关系的过程. 作用就是使views里面处理数据的函数与请求的url建立映射关系 url路由配置 Django的url路由配置 ...