JavaScript事件详细讲解
更新时间：2016年06月27日 11:24:03 作者：yeleven
本文给大家介绍js事件详解，涉及到事件流，事件处理，事件对象等方面的知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
事件的概念
事件：指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。
一、事件流
1.事件流：描述的是在页面中接受事件的顺序
2.事件冒泡:由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）
3.事件捕获：最不具体的节点先接收事件，而最具体的节点应该最后接收事件
二、事件处理
1.HTML事件处理：直接添加到HTML结构中
2.DOM0级事件处理：把一个函数赋值给一个事件处理程序属性
3.DOM2级事件处理：
addEventListener("事件名","事件处理函数",布尔值)
true:事件捕获
false:事件冒泡
removeEventListener();
4.IE事件处理程序
attachEvent
detachEvent
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div">
<button id="btn1">按钮</button>
</div>
<!--<script>
function demo(){
alert("Hello HTML事件处理");
}
</script>-->
<!--<script>
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){alert("Hello DOM0级事件处理程序")};//被覆盖掉
btn1.onclick = function(){alert("Hello DOM0级事件处理程序2")};
btn1.onclick = function(){alert("Hello DOM0级事件处理程序3")};
</script>-->
<!--<script>
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
btn1.addEventListener("click",demo3);
function demo1(){
alert("DOM2级事件处理程序1");
}
function demo2(){
alert("DOM2级事件处理程序2");
}
function demo3(){
alert("DOM2级事件处理程序3");
}
btn1.removeEventListener("click",demo2)
</script>-->
<script>
var btn1 = document.getElementById("btn1");
if(btn1.addEventListener){
btn1.addEventListener("click",demo);
}else if(btn1.attachEvent){
btn1.attachEvent("onclick",demo)
}else{
btn1.onclick = demo();
}
function demo(){
alert("Hello");
}
</script>
</body>
</html>
三、事件对象
1、事件对象：在触发DOM事件的时候都会产生一个对象
2、事件对象event:
type:获取事件类型
target：获取事件目标
stopPropagation():阻止事件冒泡
preventDefault():阻止事件默认行为
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div">
<button id="btn1">按钮</button>
<a href="http://www.baidu.com" id="aid">百度</a>
</div>
<script>
document.getElementById("btn1").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA);
function showType(event){
// alert(event.type);
alert(event.target);
event.stopPropagation();//阻止事件冒泡
}
function showDiv(){
alert("div")
}
function showA(event){
// event.stopPropagation();
// event.preventDefault();
}
</script>
</body>
</html>
相关文章
function声明一些东西,我们都知道function和var一样是预处理的在js里面,但是到底什么是函数声明呢,我们来看几个例子2007-12-12
我们在做小程序支付相关的开发时,总会遇到这些难题,下面这篇文章主要给大家介绍了关于微信小程序实现云支付那些事儿,文中通过图文介绍的非常详细,需要的朋友可以参考下2021-09-09
简单的使用echarts不难,但是在小程序里用echarts可能有些理不清。所以这篇文章主要给大家介绍了关于微信小程序基础教程之echart使用的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要是对利用jQuery实现可收缩展开的级联菜单的实例代码进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
JavaScript reduce和reduceRight详解
这篇文章主要介绍了JavaScript reduce和reduceRight的高级用法详解的相关资料,需要的朋友可以参考下2016-10-10
下面小编就为大家带来一篇基于JavaScript Array数组方法(新手必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
getElementById是JavaScript中的一个DOM方法,用于根据元素的id属性获取HTML文档中的元素,本文给大家介绍js中的getElementById的使用方法,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要为大家介绍了JWT Json Web Token全面详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2022-11-11
跟我学习javascript的函数和构造函数调用，主要包括三方面内容函数调用、方法调用以及构造函数调用，想要了解这些内容的朋友千万不要错过下面的内容。2015-11-11
这篇文章主要介绍了javascript中的some方法使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
最新评论