<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--绑定事件的第一种方式，直接在HTML里面绑定事件--> <h1 onclick="createp()">helloworld</h1> <h1 class="h2">第二种方式</h1> <!--<p>这是一个段落</p>--> <script type="text/javascript"> function createp(){ var p = document.createElement('p') p.innerHTML = '这是1个段落' p.style.color = 'skyblue' var body = document.body var h1 = document.querySelector('h1') body.insertBefore(p,h1.nextElementSibling) } //第二种绑定事件的方式，具有局限性，只支持1个监听，1个函数 // var h2 = document.querySelector('.h2') // h2.onclick = createp //// h2.onclick = function(){ // console.log('这是一个匿名函数') // } //第三种，es5新添加事件的方式,同一个事件，支持多个监听，执行多个函数。第二种和第三种方式不冲突 var h2 = document.querySelector('.h2') h2.addEventListener('click',function(){ createp() }) h2.addEventListener('click',function(){ var pList = document.querySelectorAll('p') console.log(pList) if(pList.length>3){ for(var i = 0;i<pList.length;i++){ pList[i].style.background = 'red' } } }) </script> </body> </html>