javascript事件模型
程序员文章站
2022-06-16 09:14:57
...
JavaScript事件模型通过下面的实例你一定可以搞清楚：
javascript中有两种事件模型：DOM0，DOM2
DOM0：
<body>
<p id = 'click'>click me</p>
</body>
<script>
/**
* javascript中有两种事件模型：DOM0，DOM2
* DOM0中，一个dom对象只能注册一个同类型的函数，
* 因为注册多个同类型的函数的话，就会发生覆盖，之前注册的函数就会无效。
*/
var click = document.getElementById('click');
console.info(click)
click.onclick = function(){
alert('first function');
};
click.onclick = function(){
alert('second function')
}
</script>DOM2：
<body>
<div id='outer' style='margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
<div id="inner" style='margin-left:20px; width: 50px;height:50px; background: green;'></div>
</div>
<script>
/**
* javascript中有两种事件模型：DOM0，DOM2
* 在DOM2级中使用addEventListener和removeEventListener来注册和解除事件
* 一个dom对象可以注册多个相同类型的事件，不会发生事件的覆盖，会依次的执行各个事件函数
*/
/**
* addEventListener('事件名称','事件回调','捕获/冒泡')
* 在父节点中不包含事件的情况下，是捕捉还是冒泡没有分别
*/
var click = document.getElementById('inner');
click.addEventListener('click', function () {
alert('click one');
}, false);
click.addEventListener('click', function () {
alert('click two');
}, false);
</script>
</body>
事件流发生机制：<div id='outer' style='margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
<div id="inner" style='margin-left:20px; width: 50px;height:50px; background: green;'></div>
</div>
<script>
/**
* addEventListener('事件名称','事件回调','捕获/冒泡')
*true代表捕获事件，false代表冒泡事件
*
* 在父元素包含可触发事件时(子元素触发事件时也存在触发父元素可能)，
* 子元素的事件设置为捕捉还是冒泡对事件的最终执行顺序无影响，
* 关键在父元素，如果是捕捉，则父元素事件先执行，如果是冒泡则子元素事件先执行
*/
var click = document.getElementById('inner');
var clickouter = document.getElementById('outer');
click.addEventListener('click', function () {
alert('inner show');
}, false);
clickouter.addEventListener('click', function () {
alert('outer show');
}, false);
/**
* 同一元素注册多个相同事件的执行顺序与捕捉还是冒泡的状态无关，与注册的先后顺序有关
*/
// var click = document.getElementById('inner');
// click.addEventListener('click', function () {
// alert('capture show');
// }, false);
// click.addEventListener('click', function () {
// alert('bubble show');
// }, true);
</script>
</body>
阻止冒泡事件：<body>
<div id='outer' style='margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
<div id="inner" style='margin-left:20px; width: 50px;height:50px; background: green;'></div>
</div>
<script>
/**
*可以使用event.stopPropagation()阻止事件冒泡，
* 在此情况下就不会执行父级冒泡事件
**/
var click = document.getElementById('inner');
var clickouter = document.getElementById('outer');
click.addEventListener('click',function(event){
alert('inner show');
event.stopPropagation();
},true);//子元素设置捕捉或冒泡对事件无影响
clickouter.addEventListener('click',function(){
alert('outer show');
},false);
//父元素若设置为捕捉，则会首先执行，阻止无效果
</script>
</body>
下一篇： SpringBoot-事件模型