我的前端入门笔记（11）--事件冒泡、捕获、代理
1.事件冒泡与捕获
冒泡：先触发内部事件，再触发外部事件；
捕获：先触发外部事件，再触发内部事件；
addEventListener(event, function, useCapture);
-
event:事件；
-
function:函数；
-
useCapture:false(冒泡、默认)或true(捕获)
document.getElementById('btn').addEventListener("click", function(){alert(1)},true);
阻止冒泡：e.stopPropagation() 父元素不再监听到事件；
取消默认事件: e.preventDefault();
以下为一个简单的冒泡和阻止冒泡的例子：
//点击按钮modal部分出现，点击页面空白部分modal部分隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>modal 事件冒泡及阻止</title>
<style type="text/css">
#modal{
width: 200px;
height: 200px;
color: white;
text-align:center;
line-height: 200px;
background: rgba(0,0,0,0.7);
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
display: none;
}
</style>
</head>
<body>
<button id = "btn">打开</button>
<div id="modal">我是modal</div>
<script type="text/javascript">
var btn = document.getElementById('btn'),
modal = document.getElementById('modal');
btn.onclick=function(e){
e.stopPropagation();//停止冒泡，只监听按钮事件
modal.style.display = "block";
};
modal.onclick = function(e){
e.stopPropagation();//停止冒泡，防止document监听到此点击事件
};
document.onclick=function(e){
modal.style.display="none";
};
</script>
</body>
</html>
简单效果点击这里......
2.事件代理
需要添加或删除兄弟节点时，可将其委托给父元素。添加的元素不需要再单独绑定事件。
以一小段代码为例：
1.点击添加按钮，弹出对话框，输入要添加的内容即可将该内容添加到最后；
2.点击删除按钮，相应的最后一个节点被删除；
3.点击任意一个节点，对话框弹出该节点的文本内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件代理</title>
<style type="text/css">
a{
text-decoration: none;
}
li{
list-style: none;
}
</style>
</head>
<body>
<ul class="nav">
<li><a class="li" href="#">111</a></li>
<li><a class="li" href="#">222</a></li>
<li><a class="li" href="#">fff</a></li>
</ul>
<button id="add">添加</button>
<button id="remove">删除</button>
<script type="text/javascript">
var lis = document.getElementsByClassName('li'),
ct = document.getElementsByClassName('nav')[0],
btnAdd = document.getElementById('add'),
btnRm = document.getElementById('remove');
btnAdd.addEventListener('click', function(){
var inputTxt = window.prompt("输入内容"),//在窗口中创建一个输入对话框
newLi = document.createElement('li'); //创建一个li标签
newLi.innerHTML = '<a class="li" href="#">'+ inputTxt+'</a></li>';//添加li的元素内容
ct.appendChild(newLi);
}) ;
btnRm.onclick = function(){
var lis = document.getElementsByClassName('li'),
lastLi = lis[lis.length-1];
lastLi.remove();
};
ct.onclick = function(evt){
var target = evt.target;
if(hasClass(target,'li')){
handle(target);
}
};
function handle(el){
alert(el.innerText) ;
}
function hasClass(el, cls){
return el.className.match(new RegExp('\\b'+cls+'\\b'));
}
</script>
</body>
</html>
简单效果点击这里......
3.BOM
获取窗口宽高：window.innerWidth;window.innerHeight;
location.hostname 获取域名；
location.href 获取完整的地址；
location.hash 获取地址中的#极其后面的内容;
location.reload() 刷新当前页面
location.protocol 获取协议
history.back() 浏览器后退
history.forward() 浏览器前进
history.go(n) 前进n步
var isAndroid = /android/i.test(navigator.userAgent);//判断是不是安卓系统
var isIos = /ipad|iphone|mac/i.test(navigator.userAgent);//判断是不是ios系统
navigator.onLine 判断是不是联网，返回true、false；
navigator.geolocation 获取设备地理位置详细......
cookie 是存储于访问者的计算机中的变量.
Cookie对象的属性如下所示：
1、Name：获取或设置Cookie的名称。
2、Value：获取或设置Cookie的Value。
3、Expires：获取或设置Cookie的过期的日期和事件。
4、Version：获取或设置Cookie的符合HTTP维护状态的版本。
5、Path：路径，指定与cookie相连的WEB页；
6、Domain：域，指定关联的web服务器或域；
Cookie对象的方法如下所示：
1、Add：增加Cookie变量。
2、Clear：清除Cookie集合内的变量。
3、Get：通过变量名称或索引得到Cookie的变量值。
4、Remove：通过Cookie变量名称或索引删除Cookie对象。
localStorage：存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
localStorage.setItem("age","100");添加数据localStorage.removeItem("age");删除数据
localStorage.clear() 删除所有
//将对象转化为字符串存储
var obj = {name: 'kevin', age: 100};
localStorage.value = JSON.stringify(obj);
