js 中的事件

最新推荐文章于 2022-09-04 21:15:18 发布

凌晨独舞

最新推荐文章于 2022-09-04 21:15:18 发布

阅读量299

点赞数

分类专栏：读书笔记 Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Merciwen/article/details/74164190

版权

Javascript 同时被 2 个专栏收录

72 篇文章 1 订阅

订阅专栏

读书笔记

11 篇文章 0 订阅

订阅专栏

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
</head>
<body>
    <div id="mydiv">click me</div>
</body>
</html>

点击div，click事件会沿着div,body,html,document 的顺序传播

ie 的事件流

事件捕获

事件捕获的处理办法和事件冒泡正好相反的。

点击div，click事件会沿着document,html, body，div的顺序传播

jquery 不支持事件捕获，也不建议在事件中添加事件捕获。

DOM事件流

DOM事件流包括三个阶段：
事件捕获，处于目标事件，事件冒泡的阶段

事件处理程序

方式一：

<div id="mydiv" onclick="alert('mydiv')">click me</div>

方式二：

<div id="mydiv" >click me</div>
<script>
    var div = document.getElementById('mydiv');
    div.onclick=function(){
        alert('click me ');
    }

</script>

方式三

var body = document.getElementsByTagName('body');
body[0].addEventListener('click',function(){
    alert('body click');
},false)

注意点：
1. 智能通过removeEventListener 函数移除
2. 要移除的是同一个函数，如果添加的是匿名函数，那么无法移除（传一个函数名进去，在外面定义函数）
3. 第三个参数，false代表冒泡阶段，true代表捕获阶段
4.添加两个事件，按添加顺序执行

ie中的方式

body[0].attachEvent('onclick',function(){
            alert('body click');
})

注意点：
1. 事件智能添加到冒泡阶段，
2. 参数onclick,不是click
3. 添加的函数有全局作用域
4. 必须用detachEvent()移除
5. 要移除的是同一个函数，如果添加的是匿名函数，那么无法移除

事件对象

body[0].addEventListener('click',function(event){
        alert('body click');
        alert(event.eventPhase);
},true)

传event，获取事件对象。

preventDefault(),取消事件的默认行为
stopPropagation(),阻止事件流

事件委托

绑定那么多事件在不同的对象上面，处理起来很困难，事件委托，就是为了解决这个问题，只指定一个事件处理程序，就可以管理某一个类型的所有事件。在事件内做判断。

事件移除

如果一个事件绑定在dom上，这个dom被销毁，很可能这个事件还在内存中，所以要在确定事件不用的时候手动消除事件

btn.onclick = null  //就可以

模拟事件

模拟用户的事件，比如form表单的自动提交之类的。模拟用户行为

凌晨独舞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 中的事件

事件冒泡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件流</title></head><body> <div id="mydiv">click me</div></body></html>点击div，click事件会沿着div,body,html,document 的顺
复制链接

扫一扫