JavaScript入门到实践（五）

最新推荐文章于 2024-04-17 21:49:28 发布

seperinna

最新推荐文章于 2024-04-17 21:49:28 发布

阅读量83

点赞数

分类专栏：前端开发文章标签： javascript

本文链接：https://blog.csdn.net/u010108076/article/details/107849963

版权

前端开发专栏收录该内容

26 篇文章 0 订阅

订阅专栏

JavaScript事件

在这里插入图片描述

事件流

页面中接受事件的顺序。
事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）
事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件。

事件处理

HTML事件处理：直接添加到HTML结构中
DOM0级事件处理：把一个函数赋值给一个事件处理程序属性
DOM2级事件处理
addEventListener(“事件名”,事件处理函数名,布尔值)；
true:事件捕获
false:事件冒泡
removeEventListener(“事件名”,事件处理函数名,布尔值);
IE事件处理程序(针对含IE8以下处理)
attachEvent(“事件名”,事件处理函数名,布尔值)；
detachEvent(“事件名”,事件处理函数名,布尔值)；

<body>
<button type="button" id="test_button" onclick="demo()">按钮</button>
<script>
button_ele = document.getElementById("test_button")
if(button_ele.addEventListener){   
    button_ele.addEventListener("click",demo);
}else if(button_ele.attachEvent("onclick",demo)){ 
    button_ele.attachEvent("onclick",demo);
}else{
    button_ele.onclick=demo();
}
function demo(){
   alert("hello");
}
</script>
</body>

事件对象

事件对象Event

type: 获取事件类型
target: 获取事件目标
stopPropagation(): 阻止事件冒泡
preventDefault(): 阻止事件默认行为

<body>
<div id="test_div">
<button type="button" id="test_button" onclick="demo()">按钮</button>
<a id="test_a" href="http://www.baidu.com">测试链接</a>
</div>
<script>
button_ele = document.getElementById("test_button");
div_ele = document.getElementById("test_div");
a_ele = document.getElementById("test_a");
if(button_ele.addEventListener){   
    button_ele.addEventListener("click",bt_demo);
    div_ele.addEventListener("click",div_demo);
    a_ele.addEventListener("click",a_demo);
}else if(button_ele.attachEvent("onclick",bt_demo)){ 
    button_ele.attachEvent("onclick",bt_demo);
}else{
    button_ele.onclick=bt_demo();
}
function bt_demo(event){
   alert(event.type);
   alert(event.target);
   event.stopPropagation();
}
function div_demo(){
   alert("事件冒泡")；
}
function a_demo(event){
  event.stopPropagation();
  event.preventDefault();
}
</script>
</body>

seperinna

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门到实践（五）

JavaScript事件事件流页面中接受事件的顺序。事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件。事件处理HTML事件处理：直接添加到HTML结构中DOM0级事件处理：把一个函数赋值给一个事件处理程序属性DOM2级事件处理addEventListener(“事件名”,事件处理函数名,布尔值)；true:事件捕获false:事件冒泡removeEventList
复制链接

扫一扫