當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

第十章事件event

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

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

outerHtml/innerHTML/innerHTML

簡(jiǎn)單地說innerHTML和outerHTML,innerText的不同之處在于:
- innerHtml將元素中所有的內(nèi)容都獲取到包括HTML標(biāo)簽,但是不包括自身標(biāo)簽innerText
- innerText將元素的內(nèi)容獲取出來不包括HTML標(biāo)簽
- outerHtml將自身以及元素所有的內(nèi)容都獲取出來包括HTML標(biāo)簽包括自身標(biāo)簽
<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("屬性名稱") : 返回屬性名稱對(duì)應(yīng)的屬性值//我們可以通過setAttribute設(shè)置自定義屬性var d = document.getElementById("d");d.setAttribute("heihei",123);document.write(d.getAttribute("heihei"));

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

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

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

insertBefore:添加到一個(gè)節(jié)點(diǎn)前面

父節(jié)點(diǎn).insertBefore(要添加的子節(jié)點(diǎn),參照節(jié)點(diǎn));參照節(jié)點(diǎn)如果為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(){//兼容問題獲取滾動(dòng)條移動(dòng)的垂直距離_top = document.body.scrollTop || document.documentElement.scrollTop;console.log(_top);}function fun(){document.body.scrollTop = document.documentElement.scrollTop = 0;}</script>

事件

事件對(duì)象
- 事件:對(duì)某個(gè)元素的某種操作
- 事件對(duì)象:當(dāng)某個(gè)事件觸發(fā)時(shí)產(chǎn)生的對(duì)象,就是事件對(duì)象.
- event使用前提,必須有事件,不同的事件產(chǎn)生的事件對(duì)象不同.
- 事件對(duì)象的兼容性:var e = evt || event;
- 事件對(duì)象擁有該事件先關(guān)的屬性和方法
//事件對(duì)象 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>
鼠標(biāo)事件對(duì)象的屬性
- 坐標(biāo)屬性:
  pageX/pageY相對(duì)于整個(gè)文檔頂部和左側(cè)的坐標(biāo)
  clientX/clientY相對(duì)于局部窗口的左側(cè)和頂部的坐標(biāo)
  offsetX/offsetY 相對(duì)于內(nèi)部元素的距離左側(cè)和頂部的坐標(biāo) 常用于拖拽 document.onclick = function(evt) {var e = evt || event;console.log("client" + e.clientX + "," + e.clientY); //只記錄當(dāng)前局部頁(yè)面算,用的比較少console.log("page" + e.pageX + "," + e.pageY); //從document頁(yè)面算起...習(xí)慣上用page,比較常用,console.log("offset" + e.offsetX + "," + e.offsetY); //用于拖拽}
  - 案例:圖片跟隨鼠標(biāo)移動(dòng)
  <!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:用戶釋放某一個(gè)按鍵時(shí)發(fā)生,任何一個(gè)按鍵即可發(fā)生事件
- onkeypress:用戶按下按鍵,并且產(chǎn)生一個(gè)字符時(shí)發(fā)生(意思就是說按ctrl這樣的按鍵沒有效果的)
- onkeydown:用戶按下按鍵時(shí)發(fā)生,任何一個(gè)按鍵即可發(fā)生事件
- 事件對(duì)象的屬性:
  keyCode:獲取鍵盤按鍵值字母對(duì)應(yīng)其ASCII值識(shí)別
  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:返回當(dāng)事件被觸發(fā)時(shí)，"Ctrl" 是否被按下,返回值為true or false//【注意】:鍵盤檢測(cè)兼容寫方法var key = e.keyCode || e.which || e.charCode;

總結(jié)

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

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

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