HTML之JavaScript DOM（document）編程處理事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/*事件：本質是行為，用戶的行為或者瀏覽器的行為；事件發生指的是處罰js函數執行事件的三要素：事件源、事件、事件處理程序事件的綁定：1.通過元素的屬性綁定 on***2.通過DOM編程動態綁定注：1.一個事件可以綁定多個函數；eg：onclick="show(),show1()2.一個元素可以綁定多個事件  eg：onclick="show()" ondblclick="show2()"常見的事件：1.鼠標事件2.鍵盤事件3.表單事件4.頁面加載事件onload ：頁面加載完畢事件事件的觸發1.行為觸發2.DOM編程觸發*/</script><!-- 代碼順序影響瀏覽器執行代碼的時間解決方案：等頁面加載完畢之后再加載js腳本--><script>// 方法一：// function ready() {//     // 通過DOM獲得要操作的元素//     var btn = document.getElementById("btn1"); //返回一個對象//     // 綁定一個單擊事件//     btn.onclick = function () {  //隱函數//         alert("11");//     }// }// 方法二：此方法無需在body標簽中再加onloadwindow.onload = function () {// 通過DOM獲得要操作的元素var btn = document.getElementById("btn1"); //返回一個對象// 綁定一個單擊事件btn.onclick = function () {  //隱函數alert("11");}// 為div1綁定事件var d1 = document.getElementById("div1");d1.onclick = function () {console.log("已點擊")div1.style.backgroundColor = "red"}// 通過按鈕觸發div事件btn.onclick = function () {  //隱函數alert("變色")//通過dom編程觸發事件，相當于觸發了某些事件發生了d1.onclick()}}</script><style>.div1 {width: 100px;height: 100px;background-color: yellow;border: 1px;}</style>
</head><!-- <body onload="ready()">   跟方法一搭配--><body><input type="button" id="btn1" value="按鈕"><div class="div1" id="div1"></div></body></html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/71332.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/71332.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/71332.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！