common.js
function my$(id) {
return document.getElementById(id);
}
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 300px;
height: 200px;
background-color: red;
}
#div2{
width: 250px;
height: 150px;
background-color: green;
}
#div3{
width: 200px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
<script src="common.js"></script>
<script>
//事件冒泡：多个元素嵌套，有层次关系，这些标签都注册了相同的事件，
// 如果里面元素的事件触发了，外面的元素的该事件自动的触发了
//事件冒泡，阻止事件冒泡
//如何阻止事件冒泡 window.event.cancelBubble=true;火狐不支持
//e.stopPropagation();ie8不支持
my$("div1").οnclick=function () {
console.log(this.id);
};
my$("div2").οnclick=function () {
console.log(this.id);
window.event.cancelBubble=true;
};
//事件处理参数对象 （参数不一定是e） 参数用着的时候写 用不着就不写
// my$("div3").οnclick=function (e) {
// console.log(this.id);
// // console.log(arguments.length); 1
// console.log(e);
// };
my$("div3").οnclick=function (e) {
console.log(this.id);
//阻止事件冒泡
e.stopPropagation();
console.log(e);//ie8不支持e事件处理参数对象
};
// document.body.οnclick=function () {
// console.log("我是body");
// };//body的高度被子盒子撑开，所有body的高大约300px
</script>
</body>
</html>
329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
