7.event 对象的常见应用？

最新推荐文章于 2022-11-08 13:31:54 发布

yezi153

最新推荐文章于 2022-11-08 13:31:54 发布

阅读量308

点赞数

文章标签：前端 javascript es6

本文链接：https://blog.csdn.net/yezi153/article/details/121306342

版权

1、event.preventDefault(); // 阻止默认行为,例如阻止 a 链接默认的跳转行为，阻止表单提交

阻止a链接的默认跳转行为阻止表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://www.baidu.com" id="link">点击跳转</a>
    
    <br>
    <form action="1.php">
        <input type="text" />
        <button class="btn">点击提交</button>
    </form>
    <script>
        // 获取元素a链接
        const link=document.querySelector('#link')
        console.log(link);
        // 给a绑定点击事件
        link.addEventListener('click',function jump(e){
           console.log(e);
           e.preventDefault()
        })
        // 获取按钮
        const btn=document.querySelector('.btn')
        // 给按钮绑定点击事件
        btn.addEventListener('click',function submit(e){
           console.log(e);
           e.preventDefault()
        })
    </script>
</body>
</html>

2、event.stopPropagation(); // 阻止冒泡

3、event.stopImmediatePropagation(); // 按钮绑定了 2 个响应函数，依次注册 a,b 两个事件，点击按钮，a 事件中加 event.stopImmediatePropagation()就能阻止 b 事件

4、event.currentTarget // 早期的 ie 不支持，当前绑定的事件

5、event.target

yezi153

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7.event 对象的常见应用？

1、event.preventDefault(); // 阻止默认行为,例如阻止 a 链接默认的跳转行为，阻止表单提交阻止a链接的默认跳转行为阻止表单提交<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name..
复制链接

扫一扫