網(wǎng)站首頁 編程語言 正文
1.parentNode
事件體執(zhí)行:在頁面渲染的時(shí)候是不執(zhí)行的，只有當(dāng)頁面渲染完畢后，通過用戶的操作才會(huì)被執(zhí)行
2.?this:函數(shù)體內(nèi)的一個(gè)內(nèi)置對(duì)象,在與事件體連用時(shí)代表用戶觸發(fā)該事件時(shí)的元素。
3.?節(jié)點(diǎn)遍歷的屬性
? ?第一點(diǎn)：?父找子
? ? firstElementChild 返回節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)，
? ? 最普遍的用法是訪問該元素的文本節(jié)點(diǎn)
? ? lastElementChild 返回節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
? ? childNodes:返回父元素的所有子節(jié)點(diǎn)(數(shù)組),包含dom節(jié)點(diǎn)和文本節(jié)點(diǎn)
? ? children:返回父元素的所有子節(jié)點(diǎn)(數(shù)組),只包含dom節(jié)點(diǎn)
? ? 第二點(diǎn)：兄弟節(jié)點(diǎn)的遍歷
? ? nextElementSibling 下一個(gè)節(jié)點(diǎn)
? ? previousElementSibling 上一個(gè)節(jié)點(diǎn)
?第三點(diǎn)：子找父
parentNode
4.各種文本框
? ?① 在JS中常用的文本只有兩個(gè)
? ? input value
? ? 標(biāo)簽 innerHTML
? ? ②outerHTML/innerText/innerHTML
? ? outerHTML：包含自身標(biāo)簽的所有內(nèi)容
? ? innerText 只包含文本但不包含標(biāo)簽
? ? innerHTML 包含除了自身標(biāo)簽的所有內(nèi)容
innerHTML:常用來通過字符串拼接來創(chuàng)建頁面
5.dom普通屬性
<body>
? ? <div id="box"></div>
</body>
<script>
? ? var oBox = document.querySelector("#box");
</script>a. 通過點(diǎn)運(yùn)算符
? ? 讀
? ? console.log(oBox.id);
? ? 寫
? ? oBox.id = "heihei";
?b. 通過getAttribute/setAttribute
? ? 讀
? ? console.log(oBox.getAttribute("id"));
? ? 寫
? ? oBox.setAttribute("id", "haha");
?//添加自定義屬性
? ? oBox.aaa = 666;
? ? console.log(oBox.aaa);
6.domstyle的讀寫
? ? 寫
? ? dom對(duì)象.style.屬性名 = 屬性值
? ? 讀
? ? 只有行內(nèi)樣式可以dom.style.屬性名的方式讀取數(shù)據(jù),非行內(nèi)樣式不行
? ? 非行內(nèi)樣式
? ? getComputedStyle(dom對(duì)象, false)["屬性名"];
7.offset相關(guān)屬性的讀必須用offset讀
? ? //讀出來的數(shù)據(jù)都是數(shù)字
? ? console.log(oBox.offsetWidth);
? ? console.log(oBox.offsetHeight);
? ? console.log(oBox.offsetLeft);
? ? console.log(oBox.offsetTop);
? ? // 寫
? ? // 加px的字符串
? ? oBox.style.width = "600px";
? ? oBox.style.left = "50" + "px";
8.insertBefore ?
? ? 功能:將目標(biāo)節(jié)點(diǎn)添加至參照節(jié)點(diǎn)之前
? ? 參數(shù):dom.insertBefore(目標(biāo)節(jié)點(diǎn),參照節(jié)點(diǎn))
9.滾動(dòng)條高度的讀寫，瀏覽器的兼容性，滾動(dòng)條高度的兼容寫法
window.onscroll = function() {
? ? ? ? // console.log("heihei");
? ? ? ? var sTop = document.body.scrollTop || document.documentElement.scrollTop;
? ? ? ? console.log(sTop);
? ? }
10.事件: 對(duì)某個(gè)元素的某種操作
事件相關(guān)的三要素：事件元素 ? ? ? 事件類型 ? ? ? ? [事件對(duì)象]
?事件元素 : 觸發(fā)事件的元素
? ? ????????事件類型 : 事件觸發(fā)的類型onclick ondblclick onmouseover
? ????????? 事件對(duì)象 : 攜帶著相關(guān)類型事件的屬性和方法
? ????????? 只有鼠標(biāo)事件對(duì)象和鍵盤事件對(duì)象
? 事件對(duì)象的兼容寫法
? ? document.onclick = function(evt) {
? ? ? ? var e = evt || event;
? ? }
?注意事項(xiàng):事件對(duì)象的產(chǎn)生必須要有事件
11.鼠標(biāo)事件對(duì)象（坐標(biāo)相關(guān)屬性）
page:針對(duì)于整個(gè)頁面的左頂點(diǎn) ?常用
console.log(e.pageX + "," + e.pageY);
client:針對(duì)于可視窗口的左頂點(diǎn) ?不常用
?console.log(e.clientX + "," + e.clientY);
offset:針對(duì)于父元素的左頂點(diǎn) ?用于拖拽
console.log(e.offsetX + "," + e.offsetY);
12.事件流: 當(dāng)某個(gè)元素執(zhí)行某種事件時(shí)， 該事件會(huì)向父元素傳遞或向子元素傳遞
? ? 事件流傳遞的方向:
? ? ①冒泡:由子元素向父元素傳遞
? ? onfocus/ onblur/ onload不會(huì)產(chǎn)生冒泡問題 ? ? ?
? ? ②捕獲:
13.阻止冒泡：在事件傳播的子元素上，通過事件對(duì)象調(diào)用函數(shù)
第一種寫法：e.stopPropagation();
? ? ? ???????????????? e.cancelBubble = true; ?
?第二種寫法：兼容性阻止冒泡? ?
????????????????if (e.stopPropagation) {
? ? ? ? ? ? ????????????????e.stopPropagation();
? ? ? ? ????????????????} else {
? ? ? ? ? ????????????????? e.cancelBubble = true;
? ? ? ? ????????????????}
第三種寫法：e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
14.阻止瀏覽器的默認(rèn)行為（a標(biāo)簽在實(shí)現(xiàn)跳轉(zhuǎn)時(shí)，會(huì)進(jìn)行頁面刷新）
第一種：e.preventDefault ? e.preventDefault() : e.returnValue = false;
第二種：?return false;
15.鍵盤事件（注意事項(xiàng):通常情況下鍵盤事件的事件源都是document）
①鍵盤彈起的時(shí)刻觸發(fā)onkeyup
②鍵盤按下的時(shí)刻觸發(fā)onkeydown
③生成一個(gè)字符的時(shí)刻觸發(fā)onkeypress
④兼容寫法
document.onkeypress = function(evt) {
? ? ? ? var e = evt || event;
? var key = e.keyCode || e.which || e.charCode;
⑤獲取鍵盤按下的字符的ASC碼值
console.log(key, String.fromCharCode(key));
⑥ctrlKey判斷ctrl是否被按下
16事件的綁定
①通過HTML元素直接綁定
<body>
?<button onclick="fun()">點(diǎn)擊</button>
</body>
<script>
? ? function fun() {
? ? ? ? console.log("heihei");
? ? }
</script>②通過js對(duì)象綁定
<body>
? ? <button id="btn">點(diǎn)擊啊</button>
</body>
<script>
?var oBtn = document.querySelector("#btn");
? ? oBtn.onclick = function() {
? ? ? ? console.log("今天要下雨");
? ? }
</script>? ?以上兩種綁定方式不能完成一些功能:
? ? ? ? 1.不能為相同的元素多次綁定相同的事件
????????2.無法決定事件流的傳遞是冒泡還是捕獲
17.事件監(jiān)聽（事件綁定的第三種方式）
①好處
? ? ? 1.可以為相同的元素多次綁定相同的事件
? ? ? 2.可以決定事件流的傳遞是冒泡還是捕獲
②語法
? ??事件元素.addEventListener("去掉on的事件類型","事件體回調(diào)函數(shù)",["捕獲還是冒泡"]);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????????????????????????????????????????????默認(rèn)不寫或flase為冒泡,true捕獲
③當(dāng)捕獲和冒泡同時(shí)存在于一個(gè)元素時(shí)，先捕獲后冒泡
18.事件綁定的取消（解綁的核心思想就是去掉原來綁定的函數(shù)對(duì)象）
①.js方式的解綁
<body>
<button>點(diǎn)擊</button>
</body>
<script>
var oBtn = document.querySelector("button");
oBtn.onclick = function() {
console.log("heihei");
}
oBtn.onclick = null; //取消事件的綁定
</script>②事件監(jiān)聽的解綁
<body>
<button>點(diǎn)擊</button>
</body>
<script>
var fun = function() {
console.log(123);
}
document.addEventListener("click", fun);
//注意事項(xiàng):addEventListener和removeEventListener的回調(diào)函數(shù)必須是同一個(gè)
document.removeEventListener("click", fun);
</script>原文鏈接：https://blog.csdn.net/szydqq/article/details/125728723
相關(guān)推薦
- 2024-01-05 IDEA創(chuàng)建導(dǎo)入Maven工程時(shí)出錯(cuò)Connection refused to host
- 2024-03-01 【Promise】promise關(guān)鍵問題和解決辦法
- 2022-12-14 C++?容器中map和unordered?map區(qū)別詳解_C 語言
- 2022-11-23 詳解如何使用Pytorch進(jìn)行多卡訓(xùn)練_python
- 2023-12-21 npm install 報(bào)錯(cuò)（npm ERR! errno: -4048, npm ERR! c
- 2022-11-11 詳解React?Native項(xiàng)目中啟用Hermes引擎_React
- 2022-10-30 golang基于errgroup實(shí)現(xiàn)并發(fā)調(diào)用的方法_Golang
- 2022-04-18 小程序中文本中間顯示連續(xù)的空格
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版（
- Linux 中運(yùn)行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符，流程控制 Flo
- 1. Int 和Integer 的區(qū)別，Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤：Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動(dòng)態(tài)字符串（SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列，發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支
提供CDN加速