JavaScript学习笔记012-DOM2级事件监听-代理0冒泡-捕获模式
JavaScript学习笔记012-DOM2级事件监听-代理0冒泡-捕获模式
Mr. 柳上原
发布于 2018-09-05 15:21:53
发布于 2018-09-05 15:21:53
Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
无知者无畏
说的或许就是我们这种前端初学者吧
跑去面试前端
人家问：
会什么框架
Bootstrap，Foundation，Semantic UI，Angular，React Redux，Vue？
我说：
不会，只会原生js，我要做开发
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字：英文 -->
<head> <!-- 网页头部 -->
<meat charset='UTF-8'/> <!-- 网页字符编码 -->
<meat name='Keywords' content='关键词1,关键词2'/>
<meat name='Description' content='网站说明'/>
<meat name='Author' content='作者'/>
<title>前端59期学员作业</title> <!-- 网页标题 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
<style type='text/css'> /*内部样式表*/
</style>
</head>
<body> <!-- 网页主干：可视化区域 -->
<div id="box">
<div id="b1"></div>
<p></p>
</div>
<script>
// 冒泡模式（默认）：同一环境下同一对象执行的事件由内向外执行
// 捕获模式：同一环境下同一对象执行的事件由外向内执行
// DOM0级事件
box.onclick = function ( ){}; // 一个对象只能绑定一个事件，默认使用冒泡，不可以捕获
// 某些情况下，不需要事件冒泡这个特性，就需要取消事件冒泡 / 阻止事件冒泡
// DOM0级事件阻止事件冒泡写法
event.stopPropagation();
event,cancelBubble = true; // 低版本ie兼容写法
// DOM2级事件
// 添加事件监听
obj.addEventListener(type, cb, boolean);
type：事件类型
cb：事件函数
boolean：设置冒泡还是捕获（默认false冒泡）
低版本IE：
obj.attachEvent("on" + type, cb); // 不支持捕获
// 解绑事件监听
obj.removeEventListener(type, cb, boolean);
低版本IE：
obj.detachEvent("on" + type, cb);
box.addEventListener("click", function ( ){
console.log( );
}, false);
box.addEventListener("click", function ( ){
console.log( );
}, false);
document.addEventListener("click", function ( ){
console.log( );
}, true); // 一个对象可以绑定多个事件，默认使用冒泡，第三个值默认为false（冒泡），true（捕获，决定的是对象内部的子元素）
// 事件代理：使用事件的冒泡行为，把对象将来执行的异步事件委托给父级执行
let num = 0;
setInterval(function ( ){
box.innerHTML += `<div>${++num}</div>`;
if (num === 10){
clearInterval(1);
}
}, 1000);
box.onclick = function (e){
console.log(e.target);
}
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.08.19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读