js捕獲事件

0級(jí)事件處理

用的最多的就是onload了


<script>
//內(nèi)嵌模式()
 <body onload="alert("工大學(xué)子")">
 <body onload="hello();">
 注意小括號(hào)引號(hào)這類的  和下面的不同
或者在js里的
</script>

<script>
//傳統(tǒng)模式(推薦)
window.onload=function(){
    ......
    alert(“工大學(xué)子”);
}
//window.onload=hello();
</script>


結(jié)束function 終止事件

function() doSomething{
    return false;
    
}

提醒一下function name(){。。。}這是function的格式 name的位置還有小括號(hào)的位置......

指定多個(gè)函數(shù)

<body onload="hello();hello2()">

傳統(tǒng)模式
function(){
    var helloString="hello you ";
    alert(helloString);
    hello2();
    在這里調(diào)用第二個(gè)
    }

除了onload 還有onmouseover onmouseout onclick
這個(gè)好像用的更多 但提醒一下css的偽類hover有時(shí)候用的更方便一點(diǎn)

event對象

例:window.event.screenX

我們可以通過event干好多事情
我記住的就screenX還有screenY 指事件觸發(fā)時(shí)屏幕的x y值;

clientX客戶端當(dāng)前x
clientY客戶端當(dāng)前y

有什么區(qū)別自己回去查

event的兼容性

ie是

function onmouseover(){
。。。
//小括號(hào)里沒有東西 ie默認(rèn)是通過程序訪問window對象其包含的數(shù)據(jù)也會(huì)相應(yīng)填充
}
docunment.onmouseover=onmouseover

其他瀏覽器(基于netscape)是:

function onmouseover(theEvent){
//括號(hào)里有東西。。。
}
docunment.onmouseover=onmouseover

所以考慮兼容用下面的方法

<script>
function onmousedown(nsEvent){
    var theEvent=nsevent?nsevent:window.event;
    //看看nsEvent是否被定義
    var locString="x="+theEvent.screenX+"y="+theEvent.screenY;
    alert(locString);
}
</script>
document.onmousedown=onmousedown;

事件冒泡

就是你給一個(gè)爺爺輩父親輩兒子輩的三個(gè)div分別寫三個(gè)一樣的觸發(fā)時(shí)間假設(shè)都是onclick 你會(huì)發(fā)現(xiàn)當(dāng)你點(diǎn)擊兒子時(shí)爺爺和爸爸的onclick都被觸發(fā)
不理解的回去寫三個(gè)嵌套的div試試;

取消冒泡機(jī)制
ie:cancelBubble
mozilla:stopPropagation

function stopEvent(evnt){
    if(evnt.stopPropagation){
        evnt.stopPropagation}
    else{
        evnt.cancelBubble=true;
    }
}
document.getElementById("ididid").onmouseover=function(evnt){
    var theEvent=evnt?evnt:window.event;
    alert("鬼一樣的ie");
    stopEvent(theEvent);
    //調(diào)用上面寫的stopEvent函數(shù);
    }

this

經(jīng)常見
當(dāng)前調(diào)用的函數(shù)或方法的所有者
對全局函數(shù)就是window

事件捕獲一個(gè)用途

在html里你在寫一個(gè)id為myid的一個(gè)input 就會(huì)實(shí)現(xiàn)打開網(wǎng)頁 這個(gè)input自動(dòng)獲得焦點(diǎn)。。。。。百度的效果

window.onload=myFunction;
function myFunction(){
    document.getElementById(""myid").focus();
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 聲明:本文來源于http://www.webzsky.com/?p=731我只是在這里作為自己的學(xué)習(xí)筆記整理一下(...
    angryyan閱讀 7,240評論 1 6
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,271評論 0 1
  • 以下文章為轉(zhuǎn)載,對理解JavaScript中的事件處理機(jī)制很有幫助,淺顯易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy閱讀 3,166評論 1 10
  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡單...
    舟漁行舟閱讀 8,118評論 2 17
  • 等了很長時(shí)間,才走進(jìn)電影院,空檔了很久,只是在家里零星翻出過去的經(jīng)典老片瞅瞅,算是慰藉。去看投名狀之前,就有...
    天明懶畫眉閱讀 569評論 0 0

友情鏈接更多精彩內(nèi)容