當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

第十章事件event

發(fā)布時間：2023/12/18 编程问答 43 豆豆

生活随笔收集整理的這篇文章主要介紹了第十章事件event 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

outerHtml/innerHTML/innerHTML

簡單地說innerHTML和outerHTML,innerText的不同之處在于:
- innerHtml將元素中所有的內容都獲取到包括HTML標簽,但是不包括自身標簽innerText
- innerText將元素的內容獲取出來不包括HTML標簽
- outerHtml將自身以及元素所有的內容都獲取出來包括HTML標簽包括自身標簽
<body><div id="d">老王<span>住你隔壁</span></div></body><script>var x = document.getElementById("d");console.log(x.innerHTML);console.log(x.innerText);console.log(x.outerHTML);</script>

自定義屬性及getAttribute/setAttribute方法

<div id="d"></div>//setAttribute("屬性名稱","屬性值名稱")//getAttribute("屬性名稱") : 返回屬性名稱對應的屬性值//我們可以通過setAttribute設置自定義屬性var d = document.getElementById("d");d.setAttribute("heihei",123);document.write(d.getAttribute("heihei"));

獲取非行內樣式(兼容問題)

行內樣式:行內樣式就是卸載標簽內的樣式:如<div style="color:red;"></div>,在這里color樣式就是行內樣式.
非行內樣式:非行內樣式就是指不是寫在標簽體內的style屬性的樣式.如<style>...</style>內的定義樣式或引用的外部css文件都是非行內樣式.

<div id="box" style="color: red;"> </div>var d = document.getElementById("box");//獲取行內樣式document.write(d.style.color);#box{color: blue;}var d = document.getElementById("box");//獲取非行內樣式document.write(d.style.color); 返回空 ----------------------------------------#box{color: red;font-size: 22px;}//照抄擴展兼容性var d = document.getElementById("box");function getStyle(obj,attr){ //獲取非行間樣式，obj是對象，attr是值if(obj.currentStyle){ //針對ie獲取非行間樣式return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr]; //針對非ie};};document.write(getStyle(d,"color") + "</br>");document.write(getStyle(d,"font-size"));

insertBefore:添加到一個節(jié)點前面

父節(jié)點.insertBefore(要添加的子節(jié)點,參照節(jié)點);參照節(jié)點如果為null那就和appendChild()一樣

<html><head><meta charset="utf-8"><title></title></head><body><ul id="list"><li>槑槑</li><li>晶晶</li><li>叕叕</li></ul></body></html><script>var list = document.getElementById("list");var o = document.createElement("li");o.innerHTML = "淼淼"; //如果參數(shù)2位null，則和appendChild一樣//list.insertBefore(o,null);list.insertBefore(o,list.children[2]);</script>

offsetWidth/offsetHeight/offsetLeft/offsetTop

window.onscroll事件

回到頂部的案例 <body><div id="t"><p>111111111111111</p>....<p>111111111111111</p></div><button onclick="fun()">按鈕</button></body></html><script>var _top = null;window.onscroll = function(){//兼容問題獲取滾動條移動的垂直距離_top = document.body.scrollTop || document.documentElement.scrollTop;console.log(_top);}function fun(){document.body.scrollTop = document.documentElement.scrollTop = 0;}</script>

事件

事件對象
- 事件:對某個元素的某種操作
- 事件對象:當某個事件觸發(fā)時產生的對象,就是事件對象.
- event使用前提,必須有事件,不同的事件產生的事件對象不同.
- 事件對象的兼容性:var e = evt || event;
- 事件對象擁有該事件先關的屬性和方法
//事件對象 event,onkeydown是鍵盤按下的狀態(tài),onkeyup是鍵盤按下跳起來之后的效果.document.onkeydown=function(evt){var e = evt || event;alert(e); }
- 案例:小老虎跳一跳
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box {height: 100px;width: 100px;background: url(img/1.png);background-size: 100px 100px;position: absolute;left: 200px;top: 600px;}</style></head><body><div id="box" onclick="jump()"></div></body></html><script>var d = document.getElementById("box");function jump() {d.style.top = d.offsetTop - 200 + "px";setTimeout(function() {d.style.top = "600px";}, 2000);}</script>
鼠標事件對象的屬性
- 坐標屬性:
  pageX/pageY相對于整個文檔頂部和左側的坐標
  clientX/clientY相對于局部窗口的左側和頂部的坐標
  offsetX/offsetY 相對于內部元素的距離左側和頂部的坐標常用于拖拽 document.onclick = function(evt) {var e = evt || event;console.log("client" + e.clientX + "," + e.clientY); //只記錄當前局部頁面算,用的比較少console.log("page" + e.pageX + "," + e.pageY); //從document頁面算起...習慣上用page,比較常用,console.log("offset" + e.offsetX + "," + e.offsetY); //用于拖拽}
  - 案例:圖片跟隨鼠標移動
  <!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#tiger{height: 100px;width: 100px;background-image: url(img/3.jpg);background-size: 100px 100px;position: absolute;left: 200px;top:500px;}</style></head><body><div id="tiger"></div></body></html><script>var oTiger = document.querySelector("#tiger");document.onmousemove = function(evt){var e = evt || event;oTiger.style.left = e.pageX - oTiger.offsetWidth/2 + "px";oTiger.style.top = e.pageY - oTiger.offsetHeight/2 + "px";}</script>
鍵盤事件
- onkeyup:用戶釋放某一個按鍵時發(fā)生,任何一個按鍵即可發(fā)生事件
- onkeypress:用戶按下按鍵,并且產生一個字符時發(fā)生(意思就是說按ctrl這樣的按鍵沒有效果的)
- onkeydown:用戶按下按鍵時發(fā)生,任何一個按鍵即可發(fā)生事件
- 事件對象的屬性:
  keyCode:獲取鍵盤按鍵值字母對應其ASCII值識別
  A:65 a:97 0:48 回車:13
  注意:keyPress的ctrl+回車返回值為10 document.onkeypress = function(evt){var e = evt || event;if(e.keyCode == 13 || e.keyCode == 10 && e.ctrlKey){alert("send");}}// ctrlKey:返回當事件被觸發(fā)時，"Ctrl" 是否被按下,返回值為true or false//【注意】:鍵盤檢測兼容寫方法var key = e.keyCode || e.which || e.charCode;

總結

以上是生活随笔為你收集整理的第十章事件event的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：数据集：CIFAR-10、CIFAR-1
下一篇：计算每年的母亲节日期-C语言代码