<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #dv1 { width: 300px; height: 300px; background-color: red; } #dv2 { width: 200px; height: 200px; background-color: yellow; } #dv3 { width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <div id="dv1"> <div id="dv2"> <div id="dv3"></div> </div> </div> <script src="common.js"></script> <script> //事件冒泡:多个标签嵌套,有层次关系,绑定相同的事件,当里面的事件触发,外面的事件自动触发 my$("dv1").onclick = function () { console.log(this.id); }; my$("dv2").onclick = function () { console.log(this.id); }; my$("dv3").onclick = function () { console.log(this.id); }; </script> </body> </html>
common.js代码:
/** * Created by Administrator on 2018/7/22. */ function my$(id) { return document.getElementById(id); } //设置任意的标签中间的文本内容 function setInnerText(element, text) { //判断浏览器是否支持该属性 if (typeof element.textContent == "undefined") { element.innerText = text; } else { element.textContent = text; } } //获取任意标签中间的文本内容 function getInnerText(element) { if (typeof element.textContent == "undefined") { return element.innerText; } else { return element.textContent; } } //获取任意一个父级元素的第一个子级元素 function getFirstElementChild(element) { if (element.firstElementChild) {//true 支持 return element.firstElementChild; } else { var node = element.firstChild;//第一个子节点 while (node && node.nodeType != 1) { node = node.nextSibling; } return node; } } //获取任意一个父级元素的最后一个子级元素 function getLastElementChild(element) { if (element.lastElementChild) { return element.lastElementChild; } else { var node = element.lastChild; while (node && node.nodeType != 1) { node = node.previousSibling; } return node; } } //为任意元素绑定任意事件 //参数1:任意元素 //参数2:事件类型 //参数3:事件处理函数 function addEventListner (element, type, fn) { //判断浏览器是否支持该方法 if(element.addEventListener) { element.addEventListener(type,fn, false); }else if(element.attachEvent) { element.attachEvent("on" + type, fn); }else { element["on"+type] = fn; } }