JS addEventListener(event, function, useCapture) 有关useCapture的学习

useCapture 意为使用捕获,今天学习的时候偶然遇到。
官方文档写的非常清楚,贴上代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div 
{
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>

<p>该实例演示了在添加事件监听时冒泡与捕获阶段的不同。</p>
<div id="myDiv">
	<p id="myP">点击该段落, 我是冒泡</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击该段落, 我是捕获</p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() 
{
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function()
{
    alert("你点击了 DIV 元素!");
}, false);
document.getElementById("myP2").addEventListener("click", function() 
{
    alert("你点击了 P 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() 
{
    alert("你点击了 DIV 元素!");
}, true);
</script>

</body>
</html>

非捕获:
alert("p’);
alert(‘DIV’);

捕获:
alert(‘DIV’);
alert(‘p’);

常见案例:阻止表单提交产生的气泡

在这里插入代码片`  
"forms">
"oneline"> "name" class="sinput" name="name" type="text" required>
"oneline"> "email" class="sinput" name="email" type="email" required>
"oneline"> "submit" id="submits" value="提交">
`
  form.addEventListener("invalid", function(event) {
            event.preventDefault();
        }, true);

        form.addEventListener("submit", function(event) {
            if (!this.checkValidity()) {
                event.preventDefault();
            }
        }, true);

如果不捕获,就会从input冒泡到form,这样就先触发了Input的默认事件,再触发form绑定的回调函数。

你可能感兴趣的:(JS)