JavaScript中的window对象&常用事件

最新推荐文章于 2022-11-20 16:43:45 发布

吴涛_1618

最新推荐文章于 2022-11-20 16:43:45 发布

阅读量698

点赞数

分类专栏： web前端文章标签： JavaScript window 事件

本文链接：https://blog.csdn.net/weixin_43899635/article/details/88326687

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript中的window对象：

Windou对象：

Open Method:用于打开一个新的网页：
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
[sURL]：需要访问的域名，打开的是什么网站；
[, sName]：表示打开网站的属性，_blank表示在新的页面打开网站。
[, sFeatures]：表示打开的网站的高度，宽度，等一系列参数；
[, bReplace])：true即可取代原先的网页，false表示创建一个新的网页，不影响原先的网页

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			
			function showAd(){
				window.open("http:\\www.youku.com", "_blank");
			}
				
		</script>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="下载电影" onclick="showAd()"/>
		
	</body>
</html>
window.setInterval("showAd()",2000);

setInterval方法：接收两个参数：一个是需要执行的函数代码，第二个是执行的时间间隔。会不断的执行。
ClearInterval:接收setInterval返回的id值，然后点击，就可以退出setInterval的循环。

<input type="button" value="停止广告" onclick="stopAd()"/>
function stopAd(){
			window.clearInterval(id);
}

setTimeout(“showAd()”,2000);方法：过两秒就自动调用showAd()方法，并且只会调用一次。
resizeTo(300,200); //相对于原本窗口改变指定的大小。
moveBy(50,0); // 相对于原来的窗口移动指定的x、y值。

小结：javascript组成部分：
EMCAScript（基本语法）
BOM( Browser Object MOdel) 浏览器对象模型.
浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述，如果我们要
操作浏览器的一些属性，我就可以通过浏览器对象模型的对象进行操作。

window  代表了一个新开的窗口
location 代表了地址栏对象。
screen  代表了整个屏幕的对象

window对象常用的方法：

open()   打开一个新的窗口。
resizeTo() 将窗口的大小更改为指定的宽度和高度值。
moveBy()  相对于原来的窗口移动指定的x、y值。 
moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。 

setInterval() 每经过指定毫秒值后就会执行指定的代码。
clearInterval() 根据一个任务的ID取消的定时任务。
setTimeout() 经过指定毫秒值后执行指定 的代码一次。

注意：使用window对象的任何属性与方法都可以省略window对象不写的。

事件的注册：

注册事件的方式一：
在html元素上面注册，当该元素执行完毕的时候，就会调用该事件，从而执行代码：

<body "read()">
	</body>

function read(){
				alert("body的方法执行完毕！！")
}

方式二：获取标签的id属性，从而操纵属性注册：

<body id = "body">
	</body>
var bodyNo = document.getElementById("body");
		bodyNo.onload = function(){
			alert("body的方法被执行完毕了！！！");
		}

获取对象的方法：var bodyNo = document.getElementById必须要放在的后面，不然编译报错，找不到bodyNo；

常用的事件：
常用的事件：

鼠标点击相关：
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关：
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。

焦点相关的：
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。

其他：
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。

ondblclick 当用户双击对象时触发。

<input type="button" value="点我”ondblclick="doubleClick()"/>
function doubleClick(){
			alert("我被双击了！！！")
	}

鼠标移动相关：
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
当前的时间：

function showTime(){
var date = new Date();
var cantent = date.toLocaleString();
var display = document.getElementById("showTime");
display.innerHTML = cantent.fontcolor("green");
}
function closeTime(){
var display = document.getElementById("showTime");
display.innerHTML = "";		
}

当光标移动到当前时间的时候：就会显示当前的时间，吧鼠标一一开，显示时间的的文字就会消失。
焦点相关的：
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
所谓获得焦点：就是鼠标点击的时候出现的东西，比如一个对话框获得光标。
失去焦点：就是鼠标点击对话框以外的地方，

请输入账号：<input type="text" onfocus="getFocus()" onblur="closeFocus()"/><span id = "dispalyFocus"></span>

function getFocus(){
var dispalyFocus = document.getElementById("dispalyFocus");
dispalyFocus.innerHTML = "账号长度为5-12位，不得出现非法字符！！".fontcolor("red");
}
function closeFocus(){
var dispalyFocus = document.getElementById("dispalyFocus");
dispalyFocus.innerHTML = "";
	}

当鼠标指向对话框的时候，会出现提示“账号长度为：5-12位，不得出现非法字符”，当鼠标移开，失去焦点的时候，改文字就会消失。Onfocus:获得焦点。Onblur:失去焦点。

吴涛_1618

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript中的window对象&常用事件

JavaScript中的windou对象：Windou对象：Open Method:用于打开一个新的网页：oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])[sURL]：需要访问的域名，打开的是什么网站；[, sName]：表示打开网站的属性，_blank表示在新的页面打开网站。[, sFeatu...
复制链接

扫一扫