網站首頁 編程語言 正文
1.parentNode
事件體執行:在頁面渲染的時候是不執行的，只有當頁面渲染完畢后，通過用戶的操作才會被執行
2.?this:函數體內的一個內置對象,在與事件體連用時代表用戶觸發該事件時的元素。
3.?節點遍歷的屬性
? ?第一點：?父找子
? ? firstElementChild 返回節點的第一個子節點，
? ? 最普遍的用法是訪問該元素的文本節點
? ? lastElementChild 返回節點的最后一個子節點
? ? childNodes:返回父元素的所有子節點(數組),包含dom節點和文本節點
? ? children:返回父元素的所有子節點(數組),只包含dom節點
? ? 第二點：兄弟節點的遍歷
? ? nextElementSibling 下一個節點
? ? previousElementSibling 上一個節點
?第三點：子找父
parentNode
4.各種文本框
? ?① 在JS中常用的文本只有兩個
? ? input value
? ? 標簽 innerHTML
? ? ②outerHTML/innerText/innerHTML
? ? outerHTML：包含自身標簽的所有內容
? ? innerText 只包含文本但不包含標簽
? ? innerHTML 包含除了自身標簽的所有內容
innerHTML:常用來通過字符串拼接來創建頁面
5.dom普通屬性
<body>
? ? <div id="box"></div>
</body>
<script>
? ? var oBox = document.querySelector("#box");
</script>a. 通過點運算符
? ? 讀
? ? 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對象.style.屬性名 = 屬性值
? ? 讀
? ? 只有行內樣式可以dom.style.屬性名的方式讀取數據,非行內樣式不行
? ? 非行內樣式
? ? getComputedStyle(dom對象, false)["屬性名"];
7.offset相關屬性的讀必須用offset讀
? ? //讀出來的數據都是數字
? ? 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 ?
? ? 功能:將目標節點添加至參照節點之前
? ? 參數:dom.insertBefore(目標節點,參照節點)
9.滾動條高度的讀寫，瀏覽器的兼容性，滾動條高度的兼容寫法
window.onscroll = function() {
? ? ? ? // console.log("heihei");
? ? ? ? var sTop = document.body.scrollTop || document.documentElement.scrollTop;
? ? ? ? console.log(sTop);
? ? }
10.事件: 對某個元素的某種操作
事件相關的三要素：事件元素 ? ? ? 事件類型 ? ? ? ? [事件對象]
?事件元素 : 觸發事件的元素
? ? ????????事件類型 : 事件觸發的類型onclick ondblclick onmouseover
? ????????? 事件對象 : 攜帶著相關類型事件的屬性和方法
? ????????? 只有鼠標事件對象和鍵盤事件對象
? 事件對象的兼容寫法
? ? document.onclick = function(evt) {
? ? ? ? var e = evt || event;
? ? }
?注意事項:事件對象的產生必須要有事件
11.鼠標事件對象（坐標相關屬性）
page:針對于整個頁面的左頂點 ?常用
console.log(e.pageX + "," + e.pageY);
client:針對于可視窗口的左頂點 ?不常用
?console.log(e.clientX + "," + e.clientY);
offset:針對于父元素的左頂點 ?用于拖拽
console.log(e.offsetX + "," + e.offsetY);
12.事件流: 當某個元素執行某種事件時， 該事件會向父元素傳遞或向子元素傳遞
? ? 事件流傳遞的方向:
? ? ①冒泡:由子元素向父元素傳遞
? ? onfocus/ onblur/ onload不會產生冒泡問題 ? ? ?
? ? ②捕獲:
13.阻止冒泡：在事件傳播的子元素上，通過事件對象調用函數
第一種寫法：e.stopPropagation();
? ? ? ???????????????? e.cancelBubble = true; ?
?第二種寫法：兼容性阻止冒泡? ?
????????????????if (e.stopPropagation) {
? ? ? ? ? ? ????????????????e.stopPropagation();
? ? ? ? ????????????????} else {
? ? ? ? ? ????????????????? e.cancelBubble = true;
? ? ? ? ????????????????}
第三種寫法：e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
14.阻止瀏覽器的默認行為（a標簽在實現跳轉時，會進行頁面刷新）
第一種：e.preventDefault ? e.preventDefault() : e.returnValue = false;
第二種：?return false;
15.鍵盤事件（注意事項:通常情況下鍵盤事件的事件源都是document）
①鍵盤彈起的時刻觸發onkeyup
②鍵盤按下的時刻觸發onkeydown
③生成一個字符的時刻觸發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()">點擊</button>
</body>
<script>
? ? function fun() {
? ? ? ? console.log("heihei");
? ? }
</script>②通過js對象綁定
<body>
? ? <button id="btn">點擊啊</button>
</body>
<script>
?var oBtn = document.querySelector("#btn");
? ? oBtn.onclick = function() {
? ? ? ? console.log("今天要下雨");
? ? }
</script>? ?以上兩種綁定方式不能完成一些功能:
? ? ? ? 1.不能為相同的元素多次綁定相同的事件
????????2.無法決定事件流的傳遞是冒泡還是捕獲
17.事件監聽（事件綁定的第三種方式）
①好處
? ? ? 1.可以為相同的元素多次綁定相同的事件
? ? ? 2.可以決定事件流的傳遞是冒泡還是捕獲
②語法
? ??事件元素.addEventListener("去掉on的事件類型","事件體回調函數",["捕獲還是冒泡"]);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????????????????????????????????????????????默認不寫或flase為冒泡,true捕獲
③當捕獲和冒泡同時存在于一個元素時，先捕獲后冒泡
18.事件綁定的取消（解綁的核心思想就是去掉原來綁定的函數對象）
①.js方式的解綁
<body>
<button>點擊</button>
</body>
<script>
var oBtn = document.querySelector("button");
oBtn.onclick = function() {
console.log("heihei");
}
oBtn.onclick = null; //取消事件的綁定
</script>②事件監聽的解綁
<body>
<button>點擊</button>
</body>
<script>
var fun = function() {
console.log(123);
}
document.addEventListener("click", fun);
//注意事項:addEventListener和removeEventListener的回調函數必須是同一個
document.removeEventListener("click", fun);
</script>原文鏈接：https://blog.csdn.net/szydqq/article/details/125728723
相關推薦
- 2022-03-07 Android顯示系統SurfaceFlinger分析_Android
- 2022-09-15 圖文詳解在Anaconda安裝Pytorch的詳細步驟_python
- 2022-05-20 Spring注入bean的常用的六種方式
- 2022-06-19 Go語言列表List獲取元素的4種方式_Golang
- 2021-11-27 在Docker容器中使用Arthas的詳細步驟_docker
- 2022-11-18 Python?如何修改程序默認時區_python
- 2023-01-20 .Net執行SQL存儲過程之易用輕量工具詳解_ASP.NET
- 2022-10-03 Python實現自動整理文件的示例代碼_python
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速