<!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>
