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支持

this不同,

??addEventlistener 中的this是當前綁定事件的對象

attachEvent中的this是window

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) ;

總結

以上是生活随笔為你收集整理的javascript的冒泡与捕获、定时器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。