本文为大家详细分析了JS绑定事件，供大家参考，具体内容如下
绑定事件有兼容性问题，在IE早期版本中使用的是obj.attachEvent()，而其他浏览器使用的则是addEventListener()。
这两个方法都有三个参数，分别为：事件类型，事件函数，最后一个是布尔值，true或者是false。
true表示在事件捕获阶段执行，false表示在事件冒泡阶段执行。
由于IE只支持事件冒泡，所以同大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，即默认为”false”
这样可以最大限度地兼容各种浏览器。 最好只在需要在是事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。 如果不是特别需要，不建议在事件捕获阶段注册事件处理程序。
兼容各浏览器的事件绑定：
function addEvent(obj, eventType, callback, bubble){
if(obj.addEventListener){
obj.addEventListener(eventType, callback, bubble);
}else{
obj.attachEvent(eventType, callback, bubble);
}
}
调用时，注意callback函数不需要加括号，与setTimeout类似。
这部分都比较容易理解，对于最后一个参数，相信很多人并不是非常理解，总之我还是需要写程序测试一下才真正弄通。
HTML部分内容：
<!doctype html>
<html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="">
<title>Document</title>
<!--css js 文件的引入-->
</head>
<body>
<div id="out">
<p>我是路人甲</p>
<div id="middle">
<div id="inner">最里面的</div>
</div>
<p>我是路人乙</p>
</div>
</body>
</html>
js内容：(第一种情况)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：inner-------middle------out
out.addEventListener('click',function(){alert("我是最外面的");},false);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
js内容：(第二种情况)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out------inner-------middle
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>
js内容：(第三种情况)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out------inner-------middle
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
js内容：(第四种情况)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out-------middle------inner
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
js内容：(第五种情况)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：middle-------inner------out
out.addEventListener('click',function(){alert("我是最外面的");},false);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
js内容：(第六种情况)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out-------inner------middle
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>
看完以上六种情况对应的结果，相信您已经能够深刻理解，最后一个参数为true或false的区别了。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。