韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程

时间:2022-08-26 16:59:47

dom对象详解----window对象3

window 的 status 属性可以控制状态栏的信息
实现下面的案例:

韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程


案例代码:

<html>
<head>
<script type="text/javascript">

var space_num=0;
var dir=1;
function myScroll(){

var space_my=" ";
space_num = space_num + 1 * dir;
if(space_num>50 || space_num<0){

dir = dir * -1;
}

for(var i=0;i<space_num;i++){
space_my = space_my + " ";
}

window.status = space_my + "世界你好!";
}


function startIt(){
setInterval("myScroll()",100);
}
</script>

</head>
<body onload="startIt()">
</body>
</html>


dom对象详解----history对象

History 对象实际上是javascript对象,而不是Html DOM对象。
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
注释:没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。

韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程


dom对象详解----location对象

Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程


location对象的属性和方法如下:

韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程


dom对象详解----navigator对象

Navigator 对象包含有关浏览器的信息。
注释:没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象。

韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程


navigator对象的属性和方法

韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程


<html><body>
<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
document.write("浏览器名称:"+ browser);
document.write("<br />");
document.write("浏览器版本:"+ version);
document.write("<p>平台:");
document.write(navigator.platform + "</p>");
</script>
</body>
</html>



dom对象详解----screen对象

Screen 对象
Screen 对象包含有关客户端显示屏幕的信息。
注释:没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象。

韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程


screen对象的属性:

韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程


dom对象详解----event对象



韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程


韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程

event事件在前面都已经讲过了,这里就不再详细讲了

重点:关于绑定事件的细节

1. 直接和某个html控件绑定
2. 通过getElementById()获取到元素后,再绑定
3. 通过addEventListener() 或者是 attachEvent() 来绑定

韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程



案例1:

<html>
<head>
<script type="text/javascript">
function test(){

window.alert("绑定成功");
}

</script>
</head>
<body>
<input type="button" id = "but1" value="绑定">
<script type="text/javascript">
document.getElementById("but1").onclick=test;
</script>
</body>
</html>


案例2:

<html>
<head>
<script type="text/javascript">
function test(){

window.alert("你投了一次票,投票成功");
//解除这个事件绑定
document.getElementById("but1").removeEventListener('click',test);
}

</script>
</head>
<body>
<input type="button" id = "but1" value="投票">
<script type="text/javascript">
document.getElementById("but1").addEventListener("click",test);//注意这里是 click ,而不是 onclick
</script>
</body>
</html>


特别强调:
addEventListener() 方法的浏览器支持:

韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程


Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,Opera 7.0 及 Opera 更早版本也不支持。

如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。
以下实例演示了跨浏览器的解决方法:

<!DOCTYPE html>
<html>
<body>

<p> 所有主流浏览器都支持addEventListener()方法,除了 IE 8 及更早 IE 版本。</p>

<p>该实例演示了所有浏览器兼容的解决方案。</p>

<button id="myBtn">点我</button>

<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
x.attachEvent("onclick", myFunction);
}

function myFunction() {
alert("Hello World!");
}
</script>

</body>
</html>


韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程

韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程


<!DOCTYPE html><html>
<head>
<script type="text/javascript">
function test(event){

//用户每按下一个键,就去判断是不是一个数
if(event.keyCode>=48 && event.keyCode<=57){

}else {

window.alert("你输入的不是数");
return false;
//window.event.returnValue=false; //这样也可以
}

}

</script>
</head>
<body>
<input type="text" id = "text1" onkeypress="return test(event)">
<input type="button" id = "but1" value="提交" onclick="test()">
</body>
</html>