美文网首页程序员菜鸟前端工程师
JavaScript学习笔记012-DOM2级事件监听0冒泡-捕

JavaScript学习笔记012-DOM2级事件监听0冒泡-捕

作者: Mr柳上原 | 来源:发表于2018-08-19 13:19 被阅读8次

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();

//  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>

相关文章

  • JavaScript学习笔记012-DOM2级事件监听0冒泡-捕

    Author:Mr.柳上原 付出不亚于任何的努力 愿我们所有的努力,都不会被生活辜负 不忘初心,方得始终 无知者无...

  • 事件

    DOM0级和DOM2级在事件监听使用方式上有什么区别? DOM0级事件监听:用JavaScript指定事件处理程序...

  • 进阶9:事件

    1: DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM0级事件处理程序:通过JavaScript...

  • 进阶9 事件

    1: DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM0级事件处理方式:通过javascript...

  • 事件

    DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM0级事件处理方式:通过javascript制定事...

  • 进阶9 事件

    DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM0级事件处理方式:通过javascript制定事...

  • 事件

    事件 DOM0 事件和DOM2级在事件监听使用方式上有什么区别 DOM0事件:通过JavaScript指定事件处理...

  • zj9 事件

    事件模型、事件冒泡、事件捕获、事件代理、阻止默认事件、事件兼容等 题目1: DOM0 事件和DOM2级在事件监听使...

  • js的事件

    一、DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM0事件:通过JavaScript指定事件处理...

  • 事件应用小记

    DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM0事件 通过JavaScript指定事件处理程序...

网友评论

    本文标题:JavaScript学习笔记012-DOM2级事件监听0冒泡-捕

    本文链接:https://www.haomeiwen.com/subject/dejciftx.html