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