HTML之JavaScriptDOM（document）编程处理事件
- 互联网
- 2025-08-30 04:09:01
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标签中再加onload window.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>
HTML之JavaScriptDOM（document）编程处理事件由讯客互联互联网栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“HTML之JavaScriptDOM（document）编程处理事件”
