1, the flow of events
When an event is triggered from child to parent element or elements from the parent element to trigger the process of becoming a child element of the event flow
stream of events has two modes:
event bubbling from the sub-element of the parent element to trigger
capture events from the parent element to the child element trigger
// measured
2, event bubbling (important)
When an event is triggered, the same events will trigger the parent element, this phenomenon is called event bubbling
stop event bubbling:
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
Onclick onmouseover onkeyup onkeydown: Not all events will have a bubble phenomenon, generally will produce bubbling phenomenon common event
event will not bubble behavior: onload onfocus (get the focus) onblur (losing focus)
// prevent bubbling measured
// use the cascade menu
4, event listeners
Binding of the event: event-added for the element
1: Direct add events on the label
way: inside the script tag to add event
Three ways: addEventListener method to add event listeners using the event as an element
ie678 event listener: attachEvent () detachEvent ()
Element .addEventListener ( "event", function () {
Note: The event here is to remove the ON
}, to true / false) The third parameter determines the default behavior is to capture or bubbling bubbling false
取消事件监听 ：
removeEventListener()
//测试
事件监听方法好处 ：
1、可以为同一个标签添加多次同样的事件 事件均会被触发
2、可以通过事件监听的方法完成冒泡或捕获行为
onclick 与 addEventListener(“click”)两种添加事件的区别 ：
前者同一个元素只能添加一次同样的事件 前者不可以实现捕获效果
事件的取消: 事件源.事件 = null
后者同一个元素可以添加多次同样的事件 后者既可以实现冒泡又可以实现捕获 第三个参数实现
事件的取消: removeEventListener()
5、事件触发过程
事件原理 ： 三个阶段
事件捕获阶段
目标阶段（事件源）
冒泡阶段
6、浏览器的默认行为
右键单击浏览器会弹出来菜单
图片或文字默认会被拖拽
超链接默认跳转或刷新页面
submit按钮和button标签按钮在form标签中默认会刷新页面
7、阻止浏览器的默认行为
兼容写法 ：
e.preventDefault ? e.preventDefault() : e.returnValue = false
或 return false; 各种浏览器都兼容
8、事件委托(重要 )
委托 ：让别人完成
事件委托 ： 当需要为多个同类的标签添加相同的事件时，可以将这个事件添加到这一批同类标签的父级元素上 注意：这里的父级可以是直接父级 也可以是爷爷级 曾爷爷 …
事件委托好处 ：
减少了事件绑定浏览器重绘的次数,提高了程序的执行效率;
减少事件的冗余绑定，节约了事件资源。
可以解决动态添加的元素节点无法绑定事件的问题;
事件委托机制 ：利用事件冒泡或捕获机制完成的 不能冒泡的事件也就不能使用事件委托
事件委托两个核心步骤 ：
获取事件源：
e.target || e.srcElement
明确事件源：
可以通过标签名 tagName/nodeName
可以通过 类名 className
可以通过 id
可以通过 自定义属性 getAttribute()
// Test
9, json objects javascript Object Notation
is a lightweight data storage format javascript object notation
role: to store data
definitions and data acquisition json json object
json object is a key-value pairs
stringent json object keys must use double quotes
strict json object value can not be a function of
the acquired json object data:
. json, or json key [ "key"]
traverse json object: for ... in
// practice
// dynamically create forms
