JS的事件和JS的阻止事件

最新推荐文章于 2024-05-12 21:38:39 发布

原创最新推荐文章于 2024-05-12 21:38:39 发布 · 463 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js事件 #js阻止事件

本文详细介绍了三种事件绑定的方法：内嵌到HTML标签中的事件处理、使用函数封装响应行为以及完全分离事件与HTML标签；同时讲解了如何使用this关键字获取触发事件的元素，并探讨了如何在不同浏览器环境下阻止事件的默认行为和传播。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、事件的绑定方式
(1)将事件和响应行为都内嵌到html标签中
<input type="button" value="button" onclick="alert('xxx')"/>
(2)将事件内嵌到html中而响应行为用函数进行封装
<input type="button" value="button" onclick="fn()" />
<script type="text/javascript">
function fn(){
alert("yyy");
}
</script>
(3)将事件和响应行为与html标签完全分离
<input id="btn" type="button" value="button"/>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("zzz");
};
</script>

****this关键字
this经过事件的函数进行传递的是html标签对象
<input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
<script type="text/javascript">
function fn(obj){
alert(obj.name);
}
</script>

2、阻止事件的默认行为
IE：window.event.returnValue = false;
W3c: 传递过来的事件对象.preventDefault();
//ie：window.event.returnValue = false;
//W3c：传递过来的事件对象.preventDefault();
//W3c标准
if(e&&e.preventDefault){
alert("w3c");
e.preventDefault();
//IE标签
}else{
alert("ie");
window.event.returnValue = false;
}

//通过事件返回false也可以阻止事件的默认行为
<a href="demo11.html" onclick="return false">点击我吧</a>

3、阻止事件的传播
IE：window.event.cancelBubble = true;
W3c: 传递过来的事件对象.stopPropagation();
if(e&&e.stopPropagation){
alert("w3c");
e.stopPropagation();
//IE标签
}else{
alert("ie");
window.event.cancelBubble = true;
}