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在元素失去焦点时发生,而内容此时可能已经变化多次。