JS window的若干属性和方法

window.event

1.窗口坐标
window.event.clientx,//浏览器
window.event.clienty,
window.event.offsetx,//元素
window.event.offsety,
window.event.screenx,//屏幕
window.event.screeny,

window.event在火狐下不支持
window.onload = function () {
this.document.getElementById(‘test’).onmousemove = function (evt) {
var e = window.event || evt; //浏览器能力检测，判断浏览器是否支持window.event
var x = e.clientX;
var y = e.clientY;
document.title = ‘X’+x + ’ Y’ + y;
};
};
简写 var e =window.event || evt;//逻辑运算符，如果第一个条件为true就不会判断第二个条件

2.event的触发事件对象
event.srcElement：永恒的原触发事件对象
兼容性代码
var sourceElement = e.srcElement || e.target;
this与event.srcElement的区别
3.event事件冒泡

3.事件冒泡
取消事件冒泡
window.event.cancelBubble

4.window.event.button 获取鼠标按下的是哪个键

5.操作剪切板
语法
window.clipboardData.getData(‘text’)
window.clipboardData.setData(‘text’,值) //第一个参数值的类型，目前只支持text,第二个参数，值的源（可以是个函数）
练习
1.获取拷贝数据提示 clipboardData.getData
2.后面加一段文字
3.重新赋值给剪切板 clipboardData.setData
//提示
事件 document.body.oncopy //oncopy之后，内存读取需要10ms以上。

获取dom元素
document.getElementByid(id).οnclick=fuction(参数)
document.getElementsByName() //获取元素byName返回一个集合
document.getElementsByTagName(input) //获取页面上所有input标签元素

动态创建元素
document.write()//只适合在页面加载时使用。如果页面加载完再使用，会把整个页面重写。
document.writeln()//只是在源代码中多个换行，浏览器显示出来只是多一个空格。

history操作历史记录
window.history.back()后退，window.history.forward()前进
window.history.go(-1)去到-1

onCopy onPase

练习//获取div1下面的所有input
获取事件源对象(IE srcElement FF target)
获取屏幕分辨率
获取触发事件的元素
触发事件
遍历集合中的每个元素用for循环 //不要用for in 循环。for in循环遍历的是数据的每个属性

DOM练习1
1.点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”
2.十秒钟以后文本协议“同意”按钮可用//注意，js写disabled=false
3.加法计算器
4.美女报时

=--------------------------------------------------------------------------------分割线

event

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><title></title><style type="text/css" >div {width:200px;height:200px;background-color:red;}</style><script type="text/javascript">window.onload = function () {this.document.getElementById('test').onmousemove = function (evt) {var e = window.event || evt; //浏览器能力检测，判断浏览器是否支持window.eventvar x = e.clientX;var y = e.clientY;document.title = 'X'+x + ' Y' + y;};};</script>
</head>
<body><div id="test"></div>
</body>
</html>

事件冒泡

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><title></title><style type="text/css">div {width:200px;height:200px;background-color:red;}span {width:150px;height:150px;background-color:green;}</style><script type="text/javascript">window.onload = function () {this.document.getElementById('div1').onclick = function () {//取消冒泡事件window.event.cancelBubble();alert(event.srcElement);};this.document.getElementById('span1').onclick = function () {window.event.cancelBubble();alert(event.srcElement);}this.document.getElementById('a1').onmousedown = function () {alert(event.button);}};</script>
</head>
<body><div id="div1"><span id="span1"><a id="a1" href="#">content</a></span></div></body>
</html>

网页版加法计算器

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><title></title><script type="text/javascript">window.onload = function () {this.document.getElementById('btnSum').onclick = function () {var n = Number(document.getElementById('text1').value) + Number( document.getElementById('text2').value);document.getElementById('text3').value = n;};};</script>
</head>
<body><input type="text" name="name" value="" id="text1" />+<input type="text" name="name" value="" id="text2"/><input type="button" name="name" value="=" id="btnSum"/><input type="text" name="name" value="" id="text3" />
</body>
</html>

JS window的若干属性和方法相关推荐

第60天：js常用访问CSS属性的方法
一. js 常用访问CSS 属性的方法我们访问得到css 属性,比较常用的有两种: 1. 利用点语法 box.style.width box.style.top 点语法可以得到 ...
JavaScript window.document的属性、方法和事件小结
javascript中window.document的属性.方法和事件的总结,有需要的朋友可参考一下本文章. 属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的 ...
JavaScript 中BOM及window的相关属性及方法
概述:BOM (全称bowser object model) 浏览器对象模型,他是用于操作浏览器相关的内容.BOM是一个缺乏规范的东西,为了保证他的规范性产生了一系列的共用对象来解决这个问题.沿用至今 ...
前端：JS/24/BOM和DOM简介，for...in循环遍历，window对象的属性和方法，延时器，定时器，screen屏幕对象，location地址栏对象，history历史记录对象
BOM 和DOM简介 BOM ,Browser Object Model ,浏览器对象模型: BOM主要提供了访问和操作浏览器各组件的方式: 浏览器组件:window(浏览器容器), location ...
Node.js process 模块常用属性和方法
Node.js是常用的Javascript运行环境,本文和大家发分享的主要是Node.js中process 模块的常用属性和方法,希望通过本文的分享,对大家学习Node.js http://www.m ...
BOM的window对象的属性及其方法
Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY.FRAMESET或 FRAME元素时,都会自动建立window对象的实例. ...
TWebBrowser 与 MSHTML(3): window 对象的属性、方法、事件纵览
这还不是 TWebBrowser 控件的属性.方法.事件; 这和浏览器中 JavaScript 的 window 对象是基本一致的. window 对象是网页脚本中的顶层对象, 它代表网页的窗口.或一 ...
js Dom对象的属性与方法
1.对象集合: (1).all[]; (2).images[]; (3).anchors[]; (4).forms[]; (5).links[]; 2.属性: document.cookie;设置或返 ...
JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问 ...
JS的对象及其属性和方法
在JavaScript中是基于对象的编程,而不是完全的面向对象的编程. 那麽什麽是对象呢?如果你学过一些VB的编程,对这个名词一定不会陌生.通俗的说,对象是变量的集合体,对象提供对于数据的一致的组织手 ...

JS window的若干属性和方法

JS window的若干属性和方法相关推荐

最新文章

热门文章