js复习二之事件

1、事件的传播
一个事件发生后，会在子元素和父元素之间传播。这种传播分为是三个阶段。

• 第一阶段：从window对象传到到目标对象（上层传到底层），称为“捕获阶段”。
• 第二阶段：在目标节点上触发，称为“目标阶段”。
• 第三阶段：从目标节点传到回window对象（从底层传回上层），称为“冒泡阶段”。

阻止事件传播，使用事件对象的stopPropagation方法。

//html代码
<div id="parent">
        <div id="child"></div>
    </div>
    
   //true  是捕获   false  是冒泡
    parent.addEventListener('click',function(e){
        e.stopPropagation();
        console.log('我是parent22');
    },true)

    child.addEventListener('click',function(e){
        //e.stopPropagation();
        console.log('我是child11');
    },true)

上面代码只会打印“我是parent22“，不会打印“我是child11”。

Event.preventDefault方法取消浏览器对当前事件的默认行为。

//html  代码
// <input type="checkbox" id="my">
 var cb = document.getElementById('my');
 cb.addEventListener('click',function(e){
        e.preventDefault();
    },false)

上面代码中，浏览器的默认行为是单击会选中单选框，取消这个行为，就导致无法选中单选框。

2、鼠标事件

mouseover、mouseout和mouseenter、mouseleave的区别？
mouseover、mouseout会触发多次。mouseenter、mouseleave只触发一次。

3、表单事件
input事件和change事件的区别？
input事件在元素的值发生变化后立即发生，而change在元素失去焦点时发生，而内容此时可能已经变化多次。