0級事件處理
用的最多的就是onload了
<script>
//內嵌模式()
<body onload="alert("工大學子")">
<body onload="hello();">
注意小括號引號這類的 和下面的不同
或者在js里的
</script>
<script>
//傳統模式(推薦)
window.onload=function(){
......
alert(“工大學子”);
}
//window.onload=hello();
</script>
結束function 終止事件
function() doSomething{
return false;
}
提醒一下function name(){。。。}這是function的格式 name的位置還有小括號的位置......
指定多個函數
<body onload="hello();hello2()">
傳統模式
function(){
var helloString="hello you ";
alert(helloString);
hello2();
在這里調用第二個
}
除了onload 還有onmouseover onmouseout onclick
這個好像用的更多 但提醒一下css的偽類hover有時候用的更方便一點
event對象
例:window.event.screenX
我們可以通過event干好多事情
我記住的就screenX還有screenY 指事件觸發時屏幕的x y值;
clientX客戶端當前x
clientY客戶端當前y
有什么區別自己回去查
event的兼容性
ie是
function onmouseover(){
。。。
//小括號里沒有東西 ie默認是通過程序訪問window對象其包含的數據也會相應填充
}
docunment.onmouseover=onmouseover
其他瀏覽器(基于netscape)是:
function onmouseover(theEvent){
//括號里有東西。。。
}
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;
事件冒泡
就是你給一個爺爺輩父親輩兒子輩的三個div分別寫三個一樣的觸發時間假設都是onclick 你會發現當你點擊兒子時爺爺和爸爸的onclick都被觸發
不理解的回去寫三個嵌套的div試試;
取消冒泡機制
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);
//調用上面寫的stopEvent函數;
}
this
經常見
當前調用的函數或方法的所有者
對全局函數就是window
事件捕獲一個用途
在html里你在寫一個id為myid的一個input 就會實現打開網頁 這個input自動獲得焦點。。。。。百度的效果
window.onload=myFunction;
function myFunction(){
document.getElementById(""myid").focus();
}