我们先看下默认事件与定制事件的执行顺序:
<a href="javascript: defaultAction();" onclick="customAction()">弹出</a>
<script>
function defaultAction () {
console.log('默认事件');
}
function customAction () {
console.log('定制事件');
alert('定制事件');
}
</script>
执行结果:
从执行结果可以看出,在捕捉事件时,将先捕捉DOM绑定的自定义事件,再捕捉默认事件。
js有两种事件传递方式:事件冒泡
及 事件捕获
在某些老浏览器上(例如IE9以下),事件冒泡
是唯一的事件传递方式;现代浏览器还支持事件捕获
事件传递方式。
事件冒泡
的方法是从下到上,或者说从内到外,总是从event target开始向上一级一级传递。
事件捕获
是从最外层开始向内传递事件。
事件冒泡
<div id="parent">
<a href="javascript: defaultAction();" id="action">弹出</a>
</div>
<script>
function defaultAction () {
console.log('默认事件');
alert('默认事件');
}
function customAction () {
console.log('定制事件');
alert('定制事件');
}
document.getElementById('action').addEventListener('click', function () {
customAction();
});
document.getElementById('parent').addEventListener('click', function () {
console.log('事件通过冒泡方式传递给父元素');
alert('事件通过冒泡传递方式给父元素');
});
</script>
执行结果:
事件捕获
<div id="parent">
<a href="javascript: defaultAction();" id="action">弹出</a>
</div>
<script>
function defaultAction () {
console.log('默认事件');
alert('默认事件');
}
function customAction () {
console.log('定制事件');
alert('定制事件');
}
document.getElementById('action').addEventListener('click', function () {
customAction();
}, true);
document.getElementById('parent').addEventListener('click', function () {
console.log('事件通过捕获方式传递给父元素');
alert('事件通过捕获方式传递给父元素');
}, true);
</script>
执行结果: