JavaScript EventListener

js 事件

onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键按下并松开
onkeyup	某个键盘按键被松开

onmousedown	鼠标按钮被按下
onmousemove	鼠标被移动
onmouseup	鼠标按键被松开
onmouseout	鼠标从某元素移开
onmouseover	鼠标移到某元素之上
onmouseenter	鼠标移到某元素之上
onmouseleave	鼠标从某元素移开

mouseenter / mouseleave 不会在子元素上触发，只在作用源上起效果

onreset	重置按钮被点击
onresize	窗口或框架被重新调整大小
onselect	文本被选中
onsubmit	确认按钮被点击
onunload	用户退出页面

onload	一张页面或者一个图片完成加载
onabort	图像的加载被中断

onblur	元素失去焦点
onfocus	元素获得焦点
onscroll	滚动条滚动
onchange	域（元素）的内容被改变

DOM事件流

事件传播的三个阶段是：事件捕获、事件冒泡和目标。

事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。
事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
事件冒泡阶段：事件从事件目标 target 开始，从子元素往冒泡祖先元素冒泡，直到页面的最上一级标签。

addEventListener（高版本浏览器）

    element.addEventListener('click', function () {}, false);

参数解释：

参数1：事件名的字符串(注意，没有on)
参数2：回调函数：当事件触发时，该函数会被执行
参数3：true表示捕获阶段触发，false表示冒泡阶段触发（默认）。如果不写，则默认为false。【重要】

事件捕获

重点：捕获阶段，事件依次传递的顺序是：window --> document --> html–> body -->目标元素。

事件冒泡

事件冒泡: 当一个元素上的事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

通俗来讲，冒泡指的是：子元素的事件被触发时，父元素的同样的事件也会被触发。取消冒泡就是取消这种机制。

不是所有的事件都能冒泡

以下事件不冒泡：blur、focus、load、unload、onmouseenter、onmouseleave。意思是，事件不会往父元素那里传递。

阻止冒泡

   box3.onclick = function (event) {alert("child");//阻止冒泡event = event || window.event;if (event && event.stopPropagation) {event.stopPropagation();} else {event.cancelBubble = true;}}

JavaScript EventListener相关推荐

JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener 是一个非常重要的概念,在前端开发中被广泛使用.它是用来监听 HTML DOM 上的事件,并执行特定的代码块. EventListen ...
吴裕雄--天生自然 JAVASCRIPT开发学习：DOM EventListener
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
「前端面试题系列7」Javascript 中的事件机制（从原生到框架）
前言这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法伪类与伪元素的区别及实战如何实现一个圣杯布局? ...
Web API 接口-JavaScript全部api接口文档
当使用JavaScript编写网页代码时,有很多API可以使用.以下是所有对象.类型等接口的列表,你在开发网页应用程序或站点时使用它们. API文档地址:https://developer.mozil ...
OOJ-面向对象的JAVASCRIPT（二）
本文继上篇文章介绍javascript 匿名函数以及闭包的特性 1.什么叫匿名函数? 匿名函数:就是没有函数名的函数. 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途. 1 ...
Javascript 的addEventListener()及attachEvent()区别分析
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
javascript对XMLHttpRequest异步请求的面向对象封装
对XMLHttpRequest异步请求的面向对象封装,需要的朋友可以参考下 function CallBackObject() { this.XmlHttp = this.GetHttpObject( ...
Javascript的匿名函数与自执行
函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 函数的定义,大致可分为三种方式: 第一种:这也是最常规的一种 1 2 3 function ...
javascript系列之DOM(三)---事件
javascript系列之DOM(三)---事件原文:javascript系列之DOM(三)---事件事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些 ...