WEB前端 | JS基础——(9-3)事件冒泡与绑定

来源：互联网发布：zend studio mac 编辑：程序博客网时间：2024/05/22 15:05

<!doctype html><html><head><meta charset="utf-8"/><title>事件冒泡和绑定</title><style type="text/css">#reddiv {width: 600px;height: 400px;background-color: red;}#bluediv {width: 400px;height: 200px;background-color: blue;margin: 100px;}#greendiv {width: 300px;height: 100px;background-color: green;margin: 50px;}</style></head><body><div id="reddiv"><div id="bluediv"><div id="greendiv"></div></div></div></body><script type="text/javascript">// 事件冒泡var reddiv = document.getElementById('reddiv');var bluediv = document.getElementById('bluediv');var greendiv = document.getElementById('greendiv');reddiv.onclick = function() {console.log('点击了红色的div');}bluediv.onclick = function(ev) {ev.cancelBubble = true;console.log('点击了蓝色的div');}greendiv.onclick = function(ev) {//ev.cancelBubble = true;console.log('点击了绿色的div');}//事件绑定 type 不含on (IE 含on)bluediv.addEventListener('click',function() {console.log(1);},false)</script></html>

0 0