亚洲AV男人的天堂在线观看_ DOM事件你知道多少

一、基本概念：DOM事件級別

DOM0級：element.onclick=function(event){}
DOM2級：element.addEventListener('click',function(event){},false)冒泡
DOM3級：element.addEventListener('keyup',function(event){},false),新增的鼠標鍵盤(pán)事件
注意dom1級沒(méi)有涉及事件，不是沒(méi)有dom1標準

二、事件模型

事件模型

指捕獲和冒泡

三、事件流

捕獲階段的事件流
冒泡階段反之

事件處于捕獲階段觸發(fā)

 ev.addEventListener('click', function (e) {            console.log('ev captrue');        }, true);        window.addEventListener('click', function (e) {            console.log('window captrue');        }, true);        document.addEventListener('click', function (e) {            console.log('document captrue');        }, true);        document.documentElement.addEventListener('click', function (e) {            console.log('html captrue');        }, true);        document.body.addEventListener('click', function (e) {            console.log('body captrue');        }, true);

四、Event對象常見(jiàn)應用

event.preventDefault():取消事件的默認行為，a標簽設置此方法，不會(huì )打開(kāi)連接
event.stopPropagation():取消事件冒泡或捕獲。
event.stopImmediatePropagation():取消事件冒泡或捕獲，同時(shí)取消其他事件處理程序的調用。
僅打印click1

window.addEventListener('click',function(e){    console.log('click1')    e.stopImmediatePropagation()},true)window.addEventListener('click',function(e){    console.log('click2')},true)

event.currentTarget:范圍大，表示添加事件處理程序的那個(gè)元素
event.target:小范圍，表示真正點(diǎn)擊的目標元素

五、自定義事件

無(wú)參數

  var eve = new Event('test');//定義test事件        ev.addEventListener('test', function () {            console.log('test dispatch');        });        setTimeout(function () {//1s后出發(fā)事件            ev.dispatchEvent(eve);        }, 1000);

var f=document.getElementById('float')var newE=document.createEvent('Event')//創(chuàng  )建新事件newE.initEvent('a')//初始化事件類(lèi)型f.addEventListener('a',function(e){    console.log(5)})   setTimeout(function () {//1s后出發(fā)事件           f.dispatchEvent(newE)        }, 1000);

有參數

var newE=document.createEvent('CustomEvent')newE.initCustomEvent('a',true,false,'hello')//事件類(lèi) 型‘a(chǎn)’,冒泡，事件不可以取消，detail中的值為hellof.addEventListener('a',function(e){    console.log(e.detail)})f.dispatchEvent(newE)

六、IE事件與DOM事件的區別

1、DOM中事件的this指向當前元素，而IE中的this指向window
DOM

var f=document.getElementById('float')f.addEventListener('click',function(e){   console.log(this===f)//true},true)f.onclick=function(e){    console.log(this===f)//true}

IEEdge已經(jīng)不支持attachEvent了

f.attachEvent('onclick',function(){    console.log(this===window)//true})

2、IE中的同一事件類(lèi)型的不同處理程序，按照反添加順序執行，DOM反之。
3、事件對象不同
DOM級別的事件處理程序均會(huì )傳入event對象，在IE中的event對象方式取決于指定的事件處理程序方法。
IE中使用DOM0方法,event對象是window的一個(gè)屬性

f.onclick=function(){    event=window.event    console.log(this===f)//true}

IE中使用attachEvent()方法,會(huì )傳入event對象,同DOM

f.attachEvent('onclick',function(event){    console.log(event.type)})

4、IE中的事件目標是srcElement
event.srcElement,window.event.srcElement

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

一、基本概念：DOM事件級別

二、事件模型

三、事件流

四、Event對象常見(jiàn)應用