当前位置：首页 > news >正文

HTML之JavaScript DOM（document）编程处理事件

news 2025/8/17 13:34:53

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>