javascript的冒泡与捕获、定时器

事件

1.绑定事件的区别

2.移除绑定事件的方式及区别和兼容代码

3.事件的三个阶段

4.事件冒泡

5.为同-一个元素绑定多个不同的事件,指向的是同-一个事件处理函数

6.百度的大项目

7. BOM

8.定时器

9. DOM加强, 多个几个好玩的案例

绑定事件的区别

总结绑定事件的区别:addEventListener( );attachEvent()

相同点:都可以为元素绑定事件

不同点:

1.方法名不一样

2.参数个数不一样

addEventListener三个参数,

attachEvent两个参数

3.addEventListener谷歌,火狐,IE11支持,IE8不支持

attachEvent谷歌火狐不支持,IE11不支持,IE8支持

  1. this不同,

  addEventlistener 中的this是当前绑定事件的对象

attachEvent中的this是window

  1. addEventListener中事件的类型(事件的名字)没有on

attachEvent中的事件的类型(事件的名字)有on

解绑事件上

function f1() {

console.log("第-个");

}

function f2() {

console.log("第二个");

my$("btn") . addEventListener("click" ,f1,false);

my$( "btn"). addEventListener("click" ,f2,false);

//点击第二个按钮把第一个按钮的第一一个点击事件解绑

my$("btn2"). οnclick=function () {

//解绑事件的时候, 需要在绑定事件的时候,使用命名函数

my$("btn") .removeEventListener("click" ,f1,false);

};

绑定事件和解绑事件的兼容代码

//1对象.on事件名字=事件处理函数----绑定事件

my$("btn") . οnclick=function () {

console. log( "我");

};

my$( "btn2"). οnclick=function () {

//1.解绑事件

my$("btn"). οnclick=null;

};

//解绑事件:

*注意:用什么方式绑定事件,就应该用对应的方式解绑事件

1.解绑事件

对象.on事件名字=事件处理函数--->绑定事件

对象.on事件名字=null;

2.解绑事件

对象. addEventlistener("没有on的事件类型",命名函数,false);-绑定事件

对象. removeEventListener("没有on的事件类型",函数名字,false);

3.解绑事件

对象. attachEvent( "on事件类型”",命名函数);---绑定事件

对象. deltachEvent("on事件类型!",函数名字);

function f1() {

console.1og("第一个");

function f2() {

console.1og("第二个");

my$("btn") . attachEvent("onclick" ,f1);

my$("btn"). attachEvent("onclick" ,f2);

my$( "btn2"). οnclick=function () {

my$( "btn"). detachEvent("onclick" ,f1);

};

//绑定事件的兼容

function addEventListener(element, type,fn) {

if(element . addEventListener){

element. addEventListener(type, fn, false);

}else if(element. attachEvent){

element. attachEvent("on" +type, fn);

}else{

element[ "on"+type]=fn;

}

}

//解绑事件的兼容

//为任意的一个元素,解绑对应的事件

function removeEventL istener(element , type , fnName) {

if(element . removeEventListener){

element. removeEventListener (type , fnName, false);

}else if(element. detachEvent){

element . detachEvent( "on" +type,fnName);

}else{

element[”on" +type]=nu11;

}

}

事件冒泡

//事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.

my$( " dv1" ) . οnclick=function ( ) {

console.log(this .id);

};

my$(" dv2"). οnclick=function () {

console. log(this . id);

};

my$(" dv3"). onclick-function () {

console. log(this . id);

};

document . body . οnclick=function () {

console. log("颤抖吧,你们这些愚蠢的标签");

};

阻止事件冒泡

//事件冒泡,阻止事件冒泡,

//如何阻止事件冒泡: window. event. canceLBubble=true; IE特有的,谷歌支持,火狐不支持

// e. stopPropagation();谷歌和火狐支持,

my$("dv1"). οnclick=function () {

console.log(this.id);

};

my$("dv2"). οnclick=function () {

console. log(this.id);

//window. event . canceLBubble=true;

};

//事件处理参数对象

my$( "dv3"). οnclick=function (e) {

console.1og(this. id);

//阻止事件冒泡

e.stopPropagation{);

}; 

总结事件

1.事件捕获阶段:从外向内

2.事件目标阶段 :最开始选择的那个

3.事件冒泡阶段: 从里向外

为元素绑定事件

addEventListener(" 没有on的事件类型",事件处理函数,控制事件阶段的)

*事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡--->

window. levent. canceLBubble=true;谷歌,IE8支持,火狐不支持

window.event  就是- -个对象,是IE中的标准

e. stopPropagation();阻止事件冒泡---->谷歌和火狐支持

window. event和e都是事件参数对象,一个是E的标准,一个是火狐的标准

*事件参数e在IE8的浏览器中是不存在,此时用window. event来代替

addEventListener中第三个参数是控制事件阶段的

*事件的阶段有三个:

通过e. eventPhase这个属性可以知道当前的事件是什么阶段你的

如果这个属性的值是:

1---->捕获阶段

2---->目标阶段

3---->冒泡

- -般默认都是冒泡阶段,很少用捕获阶段

百度大项目

//获取文本框注册键盘抬起事件

my$("txt") . οnkeyup=function () {

//获取文本框输入的内容

var text=this . value;

var tempArr=[];// 临时数组--空数组------->存放对应上的数据

//把文本框输入的内容和数组中的每个数据对比

for(var i=0;i<keyWords . length;i++){

//是否是最开始出现的

if(keyWords [i]. indexof(text)==0){

tempArr . push(keyWords [i]);//追加

}

//临时数组有数据

console.log(tempArr);

};

//创建div,把div加入id为box的div中

var dv0bj=document . createElement("div") ;

my$("box"). appendChild(dv0bj);

dv0bj . id="dv";

dv0bj . style. width="350px";

//dv0bj. style. height= "100px";//肯定是不需要的

dv0bj . style . border="1px solid green" ;

//循环遍历临时数组,创建对应的p标签

for(var i=0; i<tempArr . length;i++){

//创建p标签

var p0bj=document. createElement("p");

//把p加到div中

dv0bj . appendChild(p0bj);

setInnerText(pObj, tempArr[i]);

p0bj . style . margin=0;

p0bj. style. padding=0;

pobj. style. cursor=" pointer";

p0bj . style . marginTop=5px;

p0bj. style. marginLeft=5px;

//鼠标进入

pObj . onmouseover = function () {

this. style. backgroundColor = "yellow";

};

//鼠标离开

pObj . onmouseout = function () {

this. style. backgroundcolor = ";

};

}

//获取文本框输入的内容

var text = this. value ;

//临时数组--空数组------->存放对应上的数据

var tempArr = [] ;

//把文本框输入的内容和数组中的每个数据对比

for (var i = 0; i < keyWords.1ength; i++) {...}

//如果文本框是空的,临时数组是空的,不用创建div

if (this . value.1ength == 0|| tempArr.length == 0)

// 如果页面中有这个div,删除这个div

if (my$("dv")) {

my$("box").removeChild(my$("dv"));

}

BOM介绍

JavaScript分三个部分:

1. ECMAScript 标准---基本语法

2. DOM--->Document object ModeL文档对象模型,操作页面元素的

3. BOM--->Browser object ModeL浏览器对象模型,操作浏览器的

浏览器中有个顶级对象:window----皇上

页面中顶级对象:document-----总管太监

页面中所有的内容都是属于浏览器的,页面中的内容也都是window的

BOM的概念

BOM(Browser Object Model)是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的

对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对

象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理,

比如:刷新浏览器、后退、前进、在浏览器中输入URL等

BOM的顶级对象window

window是浏览器的顶级对象,当调用window下的属性和方法时,可以省略window

注意: window 下一个特殊的属性window.name

对话框

alert()

●prompt()

●confirm()

页面加载事件

●onload

window. onload = function () {

//当页面加载完成执行

//当页面完全加载所有内容(包括图像、脚本文件、CSsS 文件等)执行

}

●onunload

window.onunload = function () {

//当用户退出页面时执行

}

定时器

//定时器

//参数1:函数

//参数2:时间---亳秒---1000毫秒--1秒

//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数...

//返回值就是定时器的id值

var timeId= setInterval(function () {

alert("he1lo");

}, 1000);

document . getElementById( "btn") . οnclick=function () {

//点击按钮,停止定时器

//参数:要清理的定时的d的值

window. clearInterval(timeId)| I

};

</script>

setTimeout()和clearTimeout()

在指定的毫秒数到达之后执行指定的函数,只执行- -次

//创建-一个定时器,1000毫秒后执行,返回定时器的标示

var timerId = setTimeout(function () {

console.1og('Hello World');

},1000);

//取消定时器的执行

clearTimeout(timerId);

//创建-一个定时器,每隔1秒调用一-次

var timerId = setInterval(function () {

var date = new Date();

console. log(date . tolocaleTimeString());

}, 1000);

//取消定时器的执行

clearInterval(timerId);

setInterval()和clearInterval()

定时调用的函数,可以按照给定的时间(单位毫秒)周期调用函数

//创建-一个定时器,每隔1秒调用一-次

var timerId = setInterval(function () {

var date = new Date();

console. log(date . tolocaleTimeString());

}, 1000);

//取消定时器的执行

clearInterval(timerId);

location对象

location对象是window对象下的一个属性,时候的时候可以省略window对象

location可以获取或者设置浏览器地址栏的URL

URL

统一资源定位符(Uniform Resource Locator, URL)

URL的组成:

scheme://host:port/ path?query#fragment

scheme :通信协议

常用的http, ftp, maito等

host:主机

服务器(计算机)域名系统(DNS) 主机名或IP地址。

port:端口号

整数,可选,省略时使用方案的默认端口,如http的默认端口为80。

path:路径

由零或多个'/'符号隔开的字符串,-般用来表示主机上的一个目录或文件地址。

query:查询

可选,用于给动态网页传递参数,可有多个参数,用'&'符号隔开,每个参数的名和值用'= '符号隔开。例如: name=Zs

fragment:信息片断

字符串,锚点.

//协议

console. Log(window. Location. protocol);

//搜索的内容

console. Log( window. Location. search);

οnlοad=function () {

document . getElementById("btn") . οnclick=function () {

//设置跳转的页面的地址

//Location. href= "http://wwW. jd. com";//属性

//Location. assign( "http://www. jd. com");//方法

//Location. reLoad();//重新加载--刷新

//Location. replace( "http://www. jd. com");//没有历史记录

};

};

</script>

</head>

<body>

<input type="button"value="显示效果" id="btn"/>

history对象

  • back()
  • forward()
  • go

navigator对象

  • userAgent

通过userAgent可以判断用户浏览器的类型

  • platform

通过platform可以判断浏览器所在的系统平台类型.

通过userAgent可以判断用户浏览器的类型

console. log (window . navigator . userAgent) ;

//通过platform可以判断浏览器所在的系统平台类型.

//console . Log(window. navigator. platform);

案例:

<style>

img{

width: 200px;height:200px;}

div{

position: absolute;]}

</style>

</ head>

<body>

<input type="button" value="摇起来" id="btn1" />

<input type="button" value="停止" id="btn2"/>

<div id="dv">

<img src="images/heihei.jpg" alt=""/>

<img src="images / lym1.jpg" alt=""/>

</div>

<script src=" common.js"></ script>

<script>

//点击按钮摇起来

my$( "btn1").onclick = function () {

setInterval(function (){

//随机数

var x = parseInt(Math.random()* 100 + 1);

var y =parseInt(Math.random() * 100 + 1);

my$( "dv").style.left = x + "px";

my$("dv" ).style.top = y + "px" ;

},10);

};

</script>

案例亮晶晶

div{

width: 600px;height: 600px;

border: 2px solid yellow;background-color: black;}

span{

font-size: 30px;

color: yellow;}

< / style>

</ head>

<body>

<input type="button" value="亮起来" id="btn" /><div id="dv"></div>

<script src="common.js"></script><script>

my$ ( "btn" ).οnclick=function ( {

setInterval(function () {

my$( "dv" ).innerHTML="<span>☆</span>";I

var x = parseInt(Math.random()* 600 + 1);

var y =parseInt(Math.random()* 600 + 1);

my$( "dv" ).firstElementchild.style.left=x+"px";

my$("dv" ).firstElementchild.style.top=y+"px" ;},5);

};

</script>

案例美女时钟

<script src="common.js"></script>

<script>

function f1()i//获取当前时间

var dt = new Date();|

//获取小时

var hour = dt.getHours();//获取秒

var second = dt.getSeconds();

hour = hour < 10 ? "e" + hour : hour;

second = second < 10 ? "O" + second : second;

my$( "im" ).src="meimei/ "+hour+"_"+second+".jpg";}

f1();

//页面加载完毕后,过了1秒才执行函数的代码

setInterval(f1 ,1000) ;