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的若干属性和方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安卓推送这件小事
- 下一篇： 4GCPE工业路由器使用方法 4G转Wi