第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

什么是事件對(duì)象？在觸發(fā)DOM上的事件時(shí)都會(huì)產(chǎn)生一個(gè)對(duì)象
事件對(duì)象event
①DOM中的事件對(duì)象? 屬性
（1）、type屬性用于獲取事件類(lèi)型
（2）、target屬性用于獲取事件目標(biāo)
（3）、stopPropagation()方法 用于阻止事件冒泡
（4）、preventDefault() 方法 阻止事件的默認(rèn)行為,例如<a href="#" ></a>如果一個(gè)div里面有一個(gè)button，button和div都綁定了click事件，如果是事件冒泡，那么點(diǎn)擊button的時(shí)候，首先觸發(fā)button的處理函數(shù)，然后觸發(fā)div的處理函數(shù)。（由內(nèi)而外）
如果有時(shí)候不想冒泡，也就是不希望div的事件被觸發(fā)，那么需要阻止事件冒泡。stopPropagation()方法
如果需要阻止a標(biāo)簽的默認(rèn)屬性跳轉(zhuǎn)，可以使用阻止事件的默認(rèn)行為preventDefault()方法

事件處理程序：
1，HTML事件處理程序；
2，DOM0級(jí)事件處理程序；
3，DOM2級(jí)事件處理程序；（定義了兩個(gè)方法：用于處理指定和刪除事件處理程序的操作addEventListener()和removeEventListener()。他們都接受三個(gè)參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)、布爾值）
4，IE事件處理程序；（attachEvent()添加事件，DetachEvent()刪除事件。他們接受相同的兩個(gè)參數(shù)：事件處理程序的名稱(chēng)和事件處理程序的函數(shù)）
5，跨瀏覽器的事件處理程序；

恰當(dāng)?shù)倪m用能力檢測(cè)，即如果這個(gè)瀏覽器適合這個(gè)事件處理程序，就用這個(gè)，反之用另外的事件處理程序；

封裝在一個(gè)對(duì)象內(nèi)，把對(duì)象放在變量里面，即var eventuitil={..............這里面編寫(xiě)的是對(duì)象的方法};

.跨瀏覽器檢測(cè)<br>
/*addEventLister兼容性*/<br>

var eventuitil={

????function addHandler(ele, type, handler) {
? ?????if (ele.addEventListener) { // 所有主流瀏覽器，除了 IE 8 及更早版本
? ? ? ?????ele.addEventListener(type, handler, false);
????? ?} else if (ele.attachEvent) { // IE 8 及更早版本
? ? ? ?????ele.attachEvent("on" + type, handler);
? ?????} else {
? ? ? ?????ele["on" + type] = handler;<br>
????? ?}
????}

}

eventuitil.addHandler(btn3,'click',showMes);//調(diào)用上面封裝好的對(duì)象的方法

DOM2級(jí)事件處理程序

DOM2級(jí)事件處理程序

一、定義了兩個(gè)方法：
addEventListener()添加事件
removeEventListener()移除事件
btn3.addEventListener('click',showMes,false);
三個(gè)參數(shù)設(shè)置：事件名稱(chēng)，處理方法(函數(shù))，布爾值-----冒泡（false）或捕獲（true）

二、注意：
1.事件名稱(chēng)全都不加on了，onclickclick——事件名稱(chēng)要加引號(hào)“”
2.處理方法中的函數(shù)只寫(xiě)函數(shù)名，不加括號(hào)——不加括號(hào)才是函數(shù)，加了括號(hào)是運(yùn)行函數(shù)
3.false 兼容所有瀏覽器-----事件冒泡流——布爾值是不需要加引號(hào)“”的
4.通過(guò)addEventListener添加的事件只能通過(guò)removeEventListener來(lái)刪除——參數(shù)要一樣
btn.removeEventListener(參數(shù));//參數(shù)必須和btn.addEventListener的一致，刪除事件

三、其他
dom0級(jí)和dom2級(jí)事件處理程序 可以給一個(gè)事件綁定多個(gè)函數(shù)，事件觸發(fā)的時(shí)候會(huì)按照綁定順序執(zhí)行各個(gè)函數(shù)。
btn3.addEventListener('click',showMes,false);
btn3.addEventListener('click',showMes,function(){alert(this.value）;},false);
//不可以這樣添加兩個(gè)函數(shù)，懷疑其本意為：
//Btn3.addEventListener('click',showmessage1/function(){alert("這是匿名函數(shù)")},false); ?

四、缺點(diǎn)：IE不支持該事件

DOM0級(jí)事件處理程序 （用得比較多）：先把元素取出來(lái)，然后為其屬性添加一個(gè)事件的方法叫DOM0級(jí)處理程序。
它是一種較傳統(tǒng)的方式：把一個(gè)函數(shù)賦值給一個(gè)事件處理程序的屬性。
優(yōu)點(diǎn)：簡(jiǎn)單，跨瀏覽器的優(yōu)勢(shì)
var btn2=document.getElementById("btn2");---先獲取出元素，定義對(duì)象 //取得btn2按鈕對(duì)象
btn2.onclick=function(){alert('這是通過(guò)DOM0級(jí)添加的事件！')}----讓 事件以對(duì)象的屬性 的形式出現(xiàn)。 //給btn2添加onclick屬性

HTML事件處理程序(現(xiàn)在不建議使用了):事件直接加在HTML代碼中
缺點(diǎn)：HTML和js代碼高耦合，如果修改，就要修改兩個(gè)地方--HTML元素內(nèi)和script函數(shù)。

1.事件冒泡：事件由子元素獲取并沿DOM樹(shù)向上傳播
2.事件捕獲：事件由根元素獲取并沿DOM樹(shù)向下分發(fā)

本章內(nèi)容
1、理解事件流
2、使用事件處理程序
3、不同的事件類(lèi)型
一、事件流
事件流描述的是從頁(yè)面中接受事件的順序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流
1、事件冒泡
事件冒泡，即事件最開(kāi)始由最具體的元素(文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn))接收，然后逐級(jí)向上轉(zhuǎn)播至最不具體的節(jié)點(diǎn)(文檔)。
2、事件捕獲
事件捕獲的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件，而最具體的節(jié)點(diǎn)最后接收到事件。
二、事件處理程序
1、HTML事件處理程序
2、DOM0級(jí)事件處理程序
3、DOM2級(jí)事件處理程序
DOM2級(jí)事件定義了兩個(gè)方法：用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()。它們都接收三個(gè)參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個(gè)布爾值。
4、IE事件處理程序
attachEvent()添加事件
detachEvent()刪除事件
這兩個(gè)方法接收相同的兩個(gè)參數(shù)：事件處理程序名稱(chēng)與事件處理函數(shù)
5、跨瀏覽器的事件處理程序
三、事件對(duì)象
事件對(duì)象event
1、DOM中的事件對(duì)象
(1)、type:獲取事件類(lèi)型
(2)、target：事件目標(biāo)
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默認(rèn)行為
2、IE中的事件對(duì)象
(1)、type:獲取事件類(lèi)型
(2)、srcElement：事件目標(biāo)
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默認(rèn)行為

鍵盤(pán)事件

2.在指定區(qū)域（整個(gè)QQ面板）按下——頁(yè)面隨光標(biāo)移動(dòng)，即頁(yè)面的坐標(biāo)與光標(biāo)坐標(biāo)一致——釋放鼠標(biāo)是停止移動(dòng)

3.clientX與clentY能夠獲取鼠標(biāo)的光標(biāo)位置；onmousedown鼠標(biāo)按下事件；移動(dòng)要用到onmousemove事件，當(dāng)鼠標(biāo)指針在元素內(nèi)部移動(dòng)時(shí)重復(fù)的觸發(fā)；clientX與clentY是event這個(gè)對(duì)象的屬性，非ie用event,ie用window.event

QQ面板拖拽效果的制作

1. 在IE10之前的游覽器不支持document.getElementByClassName()。因此為了解決游覽器不兼容的問(wèn)題，首先我們需要封裝一個(gè)獲取類(lèi)名的方法（這個(gè)面板的樣式大部分是用class寫(xiě)的）

2. 
   

IE中的事件對(duì)象

（非IE的事件對(duì)象用event，IE8之前用window.event)

事件對(duì)象

事件冒泡：由最具體的元素開(kāi)始接受逐級(jí)向上冒泡到最不具體的元素

事件的默認(rèn)行為：如a鏈接有個(gè)默認(rèn)行為就是跳轉(zhuǎn)

第二章：事件處理程序<br> 1.HTML事件處理程序：嵌入HTML<br> 2.DOM0事件處理程序：把函數(shù)賦值屬性<br> 3.DOM2事件處理程序：addEventListener()和removeEventListner()參數(shù)：事件名、函數(shù)、布爾；<br> ?element.removeEventLister()刪除時(shí)需要相同的參數(shù)； 4.DOM0和DOM2級(jí)的優(yōu)點(diǎn)：可以為同一個(gè)元素添加多個(gè)事件處理程序（HTML事件就不可以），這些事件處理程序會(huì)依次執(zhí)行； 5.IE不支持DOM事件處理程序，擁有類(lèi)似DOM的方法（IE和Opera支持） ?attachEvent();事件名稱(chēng)、事件處理程序的函數(shù) ?detachEvent(); 備注：IE事件處理函數(shù)attachEvent();detachEvent();參數(shù)：事件名稱(chēng)、函數(shù)，默認(rèn)只支持冒泡；<br> 6.跨瀏覽器檢測(cè)<br> /*addEventLister兼容性*/<br> function addHandler(ele, type, handler) {<br> ? ?if (ele.addEventListener) { // 所有主流瀏覽器，除了 IE 8 及更早版本<br> ? ? ? ?ele.addEventListener(type, handler, false);<br> ? ?} else if (ele.attachEvent) { // IE 8 及更早版本<br> ? ? ? ?ele.attachEvent("on" + type, handler);<<br> ? ?} else {<br><br> ? ? ? ?ele["on" + type] = handler;<br> ? ?}<br> }

跨游覽器的事件處理程序的方法：能力檢測(cè)，把所以有方法封裝在一個(gè)對(duì)象內(nèi)，判斷你支持哪個(gè)方法。

即把添加事件和刪除事件，封裝到一個(gè)“對(duì)象”內(nèi)。

//例子：給按鈕添加點(diǎn)擊事件 ? ?var eventUtil={ ? ? ? ?//添加句柄 ? ? ? ?addHandler: function (element, type, handler) { ? ? ? ? ? ?if(element.addEventListener){ ? ?//判斷能否適用dom 2級(jí)事件 ? ? ? ? ? ? ? ?element.addEventListener(type,handler,false); ? ? ? ? ? ?}else if(element.attachEvent){ ? ? ? ? ? //判斷能否適用IE事件 ? ? ? ? ? ? ? ?element.attachEvent('on'+type,handler); ? ? ? ? ? ?}else{ ? ? ? ? ? ? ? ?element['on'+type]=hafnder; ? //element.onclick===element['onclick']

????????????????????//有些老版本的游覽器前兩種都不支持，所以用DOM0級(jí)事件處理方法 ? ? ? ? ? ?}

?????//調(diào)用

????eventUtil.addHandler(but2,'click',showmess);

JS中，以下兩點(diǎn)是等價(jià)的。 object.property===object[property]? //可以用 . 的地方都可以用[]代替

而變量和字符串作為對(duì)象的屬性時(shí)，不能用.鏈接；這時(shí)候需要用到中括號(hào)[]