<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>myDOM1</title> </head> <style> #box{ width: 100px; height: 100px; background: yellow; } </style> <body> <div id="box" onclick="fun()"> </div> <img src="" alt="" id="im1" onclick="fun()"> <script> var box=document.getElementById("box"); // 获取事件源 var im1=document.getElementById("im1"); // 获取事件源 // box.innerHTML="<h1>事件</h1>"; // 获取这个标签，然后可以进行改变文本; // im1.src="images/2.jpg"; // 上方添加一个图片然后进行获取之后进行事件.对一些固定的东西进行操作 // 点击事件触发这个函数 // box.onclick=function fun() { // 点击一下进行函数内执行，显示事件 // document.write("事件"); // } // 点击事件定义的第一种方法 // im1.onclick=function fun() { // im1.src="images/2.jpg" // } // 点击事件定义的第二种方法 // im1.onclick=fun; // 不需要添括号 // function fun() { // im1.src="images/2.jpg"; // } // 点击事件定义的第三种方法 在上方div中引入点击事件 需要添加括号 function fun() { im1.src="images/2.jpg"; } </script> </body> </html>