JS-window事件全集解析-(转载)
javascript window对象用法 -回复

javascript window对象用法-回复JavaScript Window对象用法详解Window对象是JavaScript中最核心的对象之一,它代表了浏览器中的一个窗口或一个框架。
通过Window对象,我们可以操作和控制浏览器窗口的各种属性和方法,以实现更丰富的用户交互和功能。
在本篇文章中,我们将逐步深入地讨论Window对象的各个方面,包括创建新窗口、关闭窗口、窗口大小和位置控制、窗口间的通信以及常见的应用场景等。
一、创建新窗口Window对象提供了打开新窗口的方法,通过调用`window.open()`可以在浏览器中创建一个新的窗口。
这个方法接受多个参数,包括URL、窗口名称、窗口特性等。
具体来说,例如我们可以使用以下代码打开一个新窗口:javascriptvar newWindow = window.open(' '_blank','width=500,height=500');这段代码将打开一个宽度和高度都为500像素的新窗口,并且该窗口的地址为打开的新窗口是一个Window对象,我们可以通过新窗口的变量newWindow来对其进行操作,如:javascriptnewWindow.moveTo(0, 0); 将新窗口移动到左上角newWindow.document.title = '新窗口标题'; 设置新窗口的标题通过这种方式,我们就可以利用Window对象创建和操作新窗口。
二、关闭窗口Window对象提供了关闭当前窗口的方法,通过调用`window.close()`可以立即关闭当前的窗口。
但需要注意的是,这个方法只对通过JavaScript打开的窗口有效,对于用户直接打开的窗口,如浏览器中的标签页,则不起作用。
例如,我们可以使用以下代码关闭当前窗口:javascriptwindow.close();在一些特定的场景下,比如在一个按钮的点击事件中调用该方法,就可以实现用户点击按钮后关闭当前窗口的操作。
js中的window对象的用法

js中的window对象的用法window对象是JavaScript中的顶级对象,它代表了浏览器的窗口或者框架。
通过window对象,我们可以访问和操作浏览器窗口的属性和方法。
下面是关于window对象常用的一些属性和方法的详细解释。
1. window.alert(message): 这个方法用于显示一个带有一条指定信息和一个确认按钮的警告对话框。
当对话框弹出时,脚本的执行将暂停。
2. window.prompt(message, default): 这个方法会显示一个对话框,提示用户输入文本。
message参数是一个字符串,用于指定对话框中要显示的文本。
default参数是一个可选参数,用于指定在文本框中显示的默认值。
3. window.document: 这个属性指向当前窗口中打开的文档对象。
通过document对象,我们可以访问和操作文档的内容,比如创建、修改或删除元素、修改样式等。
4. window.location: 这个属性用于获取或者设置当前窗口的URL地址。
当设置该属性时,浏览器会导航到指定的URL。
5. window.history: 这个属性用于访问浏览器的历史记录。
我们可以使用history对象的方法,比如back(和forward(来后退和前进浏览历史记录。
6. window.navigator: 这个属性提供了关于浏览器的相关信息,比如浏览器的名称、版本和操作系统等。
7. window.innerWidth / window.innerHeight: 这两个属性分别表示窗口的宽度和高度,不包括浏览器的工具栏、滚动条等。
10. window.onload: 这个事件会在整个文档和相关资源(如图像和样式表)都加载完成后触发。
可以通过给这个事件赋值一个函数,来实现在页面加载完成后执行特定的操作。
11. window.onresize: 这个事件会在窗口大小发生变化时触发。
我们可以通过给这个事件赋值一个函数,来在窗口大小发生变化时执行特定的操作。
详述JS中的事件

JS事件的理解什么是事件?事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水。
当我们与浏览器中Web 页面进行某些类型的交互时,事件就发生了。
事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。
事件还可能是Web 浏览器中发生的事情,比如说某个Web 页面加载完成,或者是用户滚动窗口或改变窗口大小。
通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。
今天的事件在漫长的演变史,我们已经告别了内嵌式的事件处理方式(直接将事件处理器放在HTML 元素之内来使用)。
今天的事件,它已是DOM的重要组成部分,遗憾的是,IE继续保留它最早在IE4.0中实现的事件模型,以后的IE版本中也没有做太大的改变,这也就是说IE还是使用的是一种专有的事件模型(冒泡型),而其它的主流浏览器直到DOM 级别3 规定定案后,才陆陆续续支持DOM标准的事件处理模型—捕获型与冒泡型。
历史原因是:W3C 规范在DOM 级别1中并没有定义任何的事件,直到发布于2000 年11 月的DOM 级别2 才定义了一小部分子集,DOM 级别2中已经提供了提供了一种更详细的更细致的方式以控制Web 页面中的事件,最后,完整的事件是在2004年DOM 级别3的规定中才最终定案。
因为IE4是1995推出的并已实现了自己的事件模型(冒泡型),当时根本就没有DOM标准,不过在以后的DOM标准规范过程中已经把IE的事件模型吸收到了其中。
目前除IE浏览器外,其它主流的Firefox, Opera,Safari都支持标准的DOM事件处理模型。
IE仍然使用自己专有的事件模型,即冒泡型,它事件模型的一部份被DOM标准采用,这点对于开发者来说也是有好处的,只有使用DOM标准,IE都共有的事件处理方式才能有效的跨浏览器。
DOM事件流DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程可称为DOM事件流。
浅谈JavaScript的事件(事件处理程序)

浅谈JavaScript的事件(事件处理程序) 事件就是⽤户或者浏览器⾃⾝执⾏的某种动作。
诸如click、load和mouseover,都是事件的名字。
⽽响应某个事件的函数就叫事件处理程序。
事件处理程序的名字以“on”开头,⽐如click事件的事件处理程序是onclick。
为事件指定事件处理程序的⽅式有多种⽅式。
HTML事件处理程序 元素⽀持的事件,都可以使⽤与相应事件处理程序同名的HTML特性来指定。
这个特性的值能⽀持⼀定的JavaScript代码。
例如,在单击按钮的时候执⾏⼀些JavaScript代码。
<div id="aa" onclick="console.log('div')" style="width: 100px;">2222</div> ,当单击这个div的时候,会在浏览器的控制台中输出div。
这个特性是通过JavaScript来实现的,不能在其中使⽤未经转义的HTML语法字符,例如和号(&)、双引号("")、单引号('')、⼩于号(<)或者⼤于号(>)。
在HTML中定义的事件处理程序可以包含要执⾏的具体动作,也可以调⽤定义在其他页⾯的脚本。
1function divClick(e){2var target=e.target;3 console.log("div");4//stopBubble(e);5 }<div id="aa" onclick="divClick(event);" style="width: 100px;">2222</div> 上⾯的代码中,点击div之后就会调⽤divClick函数。
这个函数是单独定义的script脚本中的,当然也可以定义在⼀个外部⽂件中。
js中Window对象及其的方法

js中Window对象及其的⽅法window.location 对象 window.location 对象⽤于获得当前页⾯的地址 (URL),并把浏览器重定向到新的页⾯。
window.location 对象在编写时可不使⽤window 这个前缀。
location.hostname 返回 web 主机的域名 location.pathname 返回当前页⾯的路径和⽂件名 location.port 返回 web 主机的端⼝(80 或 443) window.location.href= "" ; 跳转后有后退功能 window.location.replace("") ; 跳转后没有后退功能 window.open(""); 在新的窗⼝打开链接,⼀般⽤于简单的弹出页⾯,现在基本上都被屏蔽掉 window.location.reload( ); 刷新当前页⾯. parent.location.reload( ); 刷新⽗亲对象(⽤于框架) opener.location.reload( ); 刷新⽗窗⼝对象(⽤于单开窗⼝) top.location.reload( ); 刷新最顶端对象(⽤于多开窗⼝)window.history 对象 window.history 对象包含浏览器的历史。
window.history对象在编写时可不使⽤ window 这个前缀。
window.history.back() - 加载历史列表中的前⼀个 URL,与在浏览器点击后退按钮相同, window.history.forward() -加载历史列表中的下⼀个 URL。
与在浏览器中点击按钮向前相同window.navigator 对象 window.navigator 对象包含有关访问者浏览器的信息,来⾃ navigator 对象的信息具有误导性,不应该被⽤于检测浏览器版本,这是因为:navigator 数据可被浏览器使⽤者更改⼀些浏览器对测试站点会识别错误浏览器⽆法报告晚于浏览器发布的新操作系统 window.navigator 对象在编写时可不使⽤ window 这个前缀。
JavaScript焦点事件、鼠标事件和滚轮事件使用详解

window.onmousemove = function() { clickX = event.clientX; clickY = event.clientY; var div = document.createElement("img"); div.src = "hhh.gif" div.style.position = "absolute"; div.style.width = '100px'; div.style.left = clickX + "px"; div.style.top = clickY + "px"; document.body.appendChild(div);
};
页面坐标位置pageX与pageY;
window.onclick = function() { clickX = event.pageX; clickY = event.pageY; var div = document.createElement("img"); div.src = "ppp.png" div.style.position = "absolute"; div.style.width = '100px'; div.style.left = clickX + "px"; div.style.top = clickY + "px"; document.body.appendChild(div);
// if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { // return false; // } // return true; // } catch (e) { // return false; // } return false; }
JS中window.event事件使用详解

JS中window.event事件使⽤详解⼀.描述event代表事件的状态,例如触发event对象的元素、⿏标的位置及状态、按下的键等等。
event对象只在事件发⽣的过程中才有效。
event的某些属性只对特定的事件有意义。
⽐如:fromElement和toElement属性只对onmouseover和onmouseout有意义。
⼆.例⼦下⾯的例⼦检查⿏标是否在链接上单击,并且如果shift键被按下,就会取消链接的跳转。
<SCRIPT LANGUAGE=”JScript”>function cancelLink() {if (window.event.srcElement.tagName == “A” && window.event.shiftKey)window.event.returnValue = false;}</SCRIPT>三.具体属性1.altKey描述:检查alt键的状态。
语法:event.altKey可能的值:当alt键按下时,值为 TRUE ,否则为 FALSE 。
只读。
2.button描述:检查按下的⿏标键。
语法:event.button可能的值:0 没按键1 按左键2 按右键3 按左右键4 按中间键5 按左键和中间键6 按右键和中间键7 按所有的键这个属性仅⽤于onmousedown, onmouseup, 和 onmousemove 事件。
对其他事件,不管⿏标状态如何,都返回 0(⽐如onclick)。
3.cancelBubble描述:检测是否接受上层元素的事件的控制。
语法:event.cancelBubble[ = cancelBubble]可能的值:这是⼀个可读写的布尔值:TRUE 不被上层原素的事件控制。
FALSE 允许被上层元素的事件控制。
这是默认值。
例⼦:下⾯的代码⽚断演⽰了当在图⽚上点击(onclick)时,如果同时shift键也被按下,就取消上层元素(body)上的事件onclick所引发的showSrc()函数。
js中的window对象的用法

js中的window对象的用法JavaScript 中的 window 对象是浏览器的全局对象,它包含了浏览器窗口的所有内容,可以用来操作和控制浏览器窗口的各种属性和方法。
下面是一些常用的 window 对象的用法和功能介绍。
1.访问和操作浏览器窗口的属性:- window.innerWidth / window.innerHeight:获取浏览器窗口的内部宽度和高度。
- window.outerWidth / window.outerHeight:获取浏览器窗口的外部宽度和高度。
- window.location.href:获取或设置当前页面的 URL。
- window.location.reload(:重新加载当前页面。
- window.location.replace(url):用指定的 URL 替换当前页面。
- window.location.assign(url):加载指定的 URL。
- window.history.back( / window.history.forward(:在浏览器历史记录中后退或前进一页。
2.操作浏览器窗口:- window.close(:关闭当前窗口。
3.弹出对话框:- window.alert(message):显示带有一段消息和一个确认按钮的警告框。
- window.confirm(message):显示带有一段消息、确认按钮和取消按钮的对话框。
- window.prompt(message, defaultText):显示带有一段消息、输入框和确认按钮的对话框。
4.定时器和延时执行:- window.setTimeout(function, delay):在指定的延迟时间后执行给定的函数。
- window.setInterval(function, interval):按照指定的时间间隔重复执行指定的函数。
5.监听和响应用户事件:- window.onclick / window.ondblclick:当用户单击或双击鼠标时触发。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
window对象有以下方法:
open
close
alert
confirm
prompt
setTimeout
clearTimeout
setInterval
clearInterval
moveBy
moveTo
resizeBy
resizeTo
scrollBy
scrollTo
find
功能:弹出一个警告框,在警告框内显示提示字符串文本。 4. confirm方法 语法格式: window.confirm(提示字符串 ) 功能:显示一个确认框,在确认框内显示提示字符串 ,当用户单击“确定”按钮 时该方法返回true,单击“取消”时返回false。 5. prompt方法 语法格式பைடு நூலகம் window.prompt(提示字符串 ,缺省文本) 功能:显示一个输入框,在输入框内显示提示字符串,在输入文本框显示缺省文 本,并等待用户输入,当用户单击“确定”按钮时,返回用户输入的字符串 ,当 单击“取消”按钮时,返回null值。 6. setTimeout方法 语法格式: window.setTimeout(代码字符表达式,毫秒数) 功能:定时设置,当到了指定的毫秒数后,自动执行代码字符表达式。 7. clearTimeout方法 语法格式: window.clearTimeout(定时器) 功能:取消以前的定时设置,其中的参数是用setTimeout设置时的返回值。 8. setInterval方法 语法格式: window.setInterval(代码字符表达式,毫秒数) 功能:设定一个时间间隔 后(第 二个参数),反复执行“代码字符表达式”的内容 9. clearInterval方法 语法格式: window.clearInterval(时间间隔 器) 功能:取消setInterval设置的定时。其中的参数是setInterval方法的返回值。 10. moveBy方法
back
forward home stop print blur focus captureEvent enableExternalCapture disableExternalCapture handleEvent releaseEvent routeEvent scroll 1. open方法 语法格式: window.open(URL,窗口名称,窗口风格) 功能:打开一个新的窗口,并在窗口中装载指定URL地址的网页。 说明: open方法用于打开一个新的浏览 器窗口,并在新窗口中装入一个指定的URL地址; open方法在打开一个新的浏览 器窗口时,还可以指定窗口的名称(第 二个参数); open方法在打开一个新的浏览 器窗口时,还可以指定窗口的风格(第 三个参数), 窗口风格有以下选项,这些选项可以多选,如果多选,各选项之间用逗号分隔: toolbar:指定窗口是否有标准工具栏。当该选项的值为1或yes时,表示有标准工具栏,当该选项 的值为0或no时,表示没有标准工具栏; location:指定窗口是否有地址工具栏,选项的值及含义与toolbar相同; directories:指定窗口是否有链接工具栏,选项的值及含义与toolbar相同; status:指定窗口是否有状态栏,选项的值及含义与toolbar相同; menubar:指定窗口是否有菜单,选项的值及含义与toolbar相同; scrollbar:指定当前窗口文档大于窗口时是否有滚动条,选项的值及含义与toolbar相同; resizable:指定窗口是否可改变大小,选项的值及含义与toolbar相同;
JS window事件全集解析 (转载)
js-window对象的方法和属性资料
hxpd 发表于 2007-05-08 21:58:18 熟练window对象的open、close、alert、confirm、prompt、 setTimeout、clearTimeout、 setInterval、clearInterval、moveBy、resizeBy、scrollBy方法的使用
width:以像素为单位指定窗口的宽度,已被innerWidth取代; height:以像素为单位指定窗口的高度,已被innerHeight取代; outerWidth:以像素为单位指定窗口的外部宽度; outerHeight:以像素为单位指定窗口的外部高度; left:以像素为单位指定窗口距屏幕左边的位置; top:以像素为单位指定窗口距屏幕顶端的位置; alwaysLowered:指定窗口隐藏在所有窗口之后,选项的值及含义与toolbar相同; alwaysRaised:指定窗口浮在所有窗口之上,选项的值及含义与toolbar相同; dependent:指定打开的窗口为当前窗口的一个子窗口,并随着父窗口的关闭而关闭,选项的值及 含义与toolbar相同; hotkeys:在没有菜单栏的新窗口中设置安全退出的热键,选项的值及含义与toolbar相同; innerHeight:设定窗口中文档的像素高度; innerWidth:设定窗口中文档的像素宽度; screenX:设定窗口距离屏幕左边界的像素长度; screenY:设定窗口距离屏幕上边界的像素长度; titleBar:指明标题栏是否在新窗口中可见,选项的值及含义与toolbar相同; z-look:指明当窗口被激活时,不能浮在其它窗口之上,选项的值及含义与toolbar相同。 open方法返回的是该窗口的引用。 小技巧:该方法经常用于在打开一个网页时自动打开另一个窗口。 例6-2-1:编制一个小程序,它用于在打开当前窗口时自动打开另一个窗口,要 求该窗没有标准工具栏、地址栏、链接工具栏、菜单栏,但有状态栏,窗口中打 开的网页地址为:。 2. close方法 语法格式: window.close() 功能:close方法用于自动关闭浏览 器窗口。 3. alert方法 语法格式: window.alert(提示字符串 )
掌握window对象的moveTo、resizeTo、scrollTo、print方法的使用
熟 练掌握window对象的status、location、name、self、opener属性的使用 Window对象是客户 端javascript最高层对象之一,只要打开浏览 器窗口,不管该窗口中是否有打开的网页,当遇 到BODY、FRAMESET或 FRAME元素时,都会自动建立window对象的实例。另外,该对象的实 例也可由window.open()方法创建。由于window对象是其它大部 分对象的共同祖先,在调 用window对象的方法和属性时,可以省略window对象的引用。例如:window.document.write() 可以 简写成: document.write()。 在窗口中觖发本窗口对象的任何方法和属性时可以省去窗口的 实例名称。例如给当前的myWin窗口设置status属性时,可以只用status而不用 myWin.status。 但是,在事件处理中调用location属性、close()方法或open()方法时必须使用实例名称。
当前页。 22. blur方法 语法格式: window.blur() 功能:从窗口中移出焦点。当与focus方法合用时必须小心,因为可能导致焦点 不断移进移出。 23. focus方法 语法格式: window.focus() 功能:使窗口中得到焦点。当与blur方法合用时必须小心,因为可能导致焦点不 断移进移出。 24. captureEvent方法 语法格式: window.captureEvent(Event) window.captureEvent(事件1|事件2|...|事件n) 功能:捕捉指定参数的所有事件。由于能够捕获哪些由本地程序自己处理的事件 ,所以程序员可以随意定义函数来处理事件。如果有多个事件需要捕捉,各事件 之间用管道符“|”隔 开。可捕捉的事件类型如下: Event.ABORT Event.BLUR Event.CHANGE Event.CLICK Event.DBLCLICK Event.DRAGDROP Event.ERROR Event.FOCUS Event.KEYDOWN Event.KEYPRESS Event.KEYUP
Event.LOAD Event.MOUSEDOWN Event.MOUSUEMOVE Event.MOUSEOUT Event.MOUSEOVER Event.MOUSEUP Event.MOVE Event.RESET Event.RESIZE Event.SELECT Event.SUBMIT Event.UNLOAD 25. enableExternalCapture事件 语法格式: window.enableExternalCapture(event) 功能:enableExternalCapture方法用于捕捉通过参数传入的外部事件。 26. disableExternalCapture事件 语法格式: window.disableExternalCapture() 功能:取消enableExternalCapture方法的设置,终止对外部事件的捕捉。 27. handleEvent事件 语法格式: window.handleEvent(event) 功能:触发指定事件的事件处理器。 28. releaseEvent事件 语法格式: window.releaseEvent(event) window.releaseEvent(事件1|事件2|...|事件n) 功能:释放通过参数传入的已被捕捉的事件,这些事件是由
功能:当触发该方法时,将弹出一个“find”(查找)对话窗口,并允许用户在触 发find方法的页面中查找一个字符串 。 注:该属性在IE5.5及Netscape6.0中都不支持 。 17. back方法 语法格式: window.back() 功能:模拟用户点击浏览 器上的“后退”按钮,将页面转到浏览 器的上一页。 说明:仅当当前页面存在上一页时才能进行该操作。 注:IE5.5不支持 该方法,Netscape6.0支持 。 18. forward方法 语法格式: window.forward() 功能:模拟用户点击浏览 器上的“前进”按钮,将页面转到浏览 器的下一页。 说明:仅当当前页面存在下一页时才能进行该操作。 注:IE5.5不支持 该方法,Netscape6.0支持 。 19. home方法 语法格式: window.home() 功能:模拟用户点击浏览 器上的“主页”按钮,将页面转到指定的页面上。 注:IE5.5不支持 该方法,Netscape6.0支持 。 20. stop方法 语法格式: window.stop() 功能:模拟用户点击浏览 器上的“停止”按钮,终止浏览 器的下载操作。 注:IE5.5不支持 该方法,Netscape6.0支持 。 21. print方法 语法格式: window.print() 功能:模拟用户点击浏览 器上的“打印”按钮,通知浏览 器打开打印对话框打印