编写事件过程（函数）的4种方法： 1，标记中实现 2，js对象添加方法 3，将事件看作是元素节点的标准属性（事件本质） 4，动态监听
1、冒泡事件原理，由里到外依次执行 2、addEventListener动态绑定监听事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .myClass{ background-color: red; } body{ font-size: 40px; } .text{ font-size: 40px; background-color: yellow ; } </style> </head> <body> <div id = "myDiv1" onclick="alert('你点了myDiv1')"> 我在mydiv1中 <p class="myClass" id = "myP1" >我在myP1中</p> <ul id = "ul1"> <li class="myClass" id="li1" onclick="onLi1Click()">1</li> <li id = "li2">2</li> <li id = "li3">3</li> </ul> <input type="text" id="myText1" > <a href="http://www.baidu.com" id="myA1">我是链接</a> <button id="myBtn1">点我</button> </div> <script> /*function onLi1Click(){ alert("你点了li1一下"); }*/ /* var onLi1Click = function (){ alert('你好是点了li1一下'); }*/ //---------------直接使用js对象，元素节点对象 /*var btn = document.getElementById("myBtn1"); btn.onclick = function (){ alert("你点了btn一下"); }*/ //---------------将事件看做标准属性---------- /* var text = document.getElementById("myText1"); text.setAttribute("onChange", "tChange()"); function tChange(){ alert('你输入了'+text.value+"内容"); }*/ //---------------动态监听 var p = document.getElementById("myP1"); p.addEventListener("click", function (){ alert("你点了p标记一下"); }); </script> </body> </html>