JavaScriptAPI的事件总结_js　pinch事件-优快云博客

本文链接：https://blog.youkuaiyun.com/The_over/article/details/129736920

文章详细介绍了JavaScript中的各种事件，包括鼠标事件、键盘事件和浏览器事件。讨论了DOM0级和DOM2级事件的添加与移除方法，并通过示例解释了事件冒泡的概念和如何阻止事件冒泡。此外，还阐述了如何阻止事件的默认行为，给出了链接和表单提交的示例。

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

事件大致分为三种鼠标，键盘，浏览器

鼠标事件

单机事件 onclick 双击事件 ondblclick
移入事件 onmouseover 移出事件 onmouseout
进入事件 onmouseenter 离开事件 onmouseleave
按下事件 onmousedown 抬起事件 onmouseup
移动事件 onmousemove 获取焦点 onfocus 失去焦点 onblur

键盘事件

按下事件 onkeydown 抬起事件 onkeyup

浏览器事件

加载完成事件 onload 滚动事件 onscroll

dom0 事件

dom0 事件源.事件类型 = 事件的处理程序
下面会把上面的给覆盖掉
取消事件事件源.事件类型 = null

dom2事件

dom2 添加监听事件：事件源.addEventListener(‘事件类型’，事件的处理程序)
例如

var btn = document.getElementById('btn')
btn.addEventListener('click', function () {
        console.log('监听事件1');
    })

取消监听事件事件源.removeEventListener(‘事件类型’,‘函数名’)

btn.removeEventListener('click', fn)

事件冒泡

什么是冒泡事件
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
如何阻止事件冒泡
我们可以看一下案例

<style>
    #parent {
        margin: auto;

        width: 600px;
        height: 400px;
        background-color: blanchedalmond;
    }

    #child {
        margin: auto;
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        border-radius: 50%;
    }
</style>

<body>
    <div id="parent">
        <div id="child"></div>
    </div>

</body>
<script>
    var parent = document.getElementById('parent')
    var child = document.getElementById('child')
    //给子元素绑定
    child.onclick = function (event) {
        console.log('儿子');
        // 阻止事件冒泡 event.stopPropagation()  (重点)
        var event = event || window.event
        event.stopPropagation()
    }
    // 给父元素绑定
    parent.onclick = function () {
        console.log('父亲');
    }
    /*
          onmouseover和onmouseout：会触发冒泡
          onmouseenter和onmouseleave: 不会触发冒泡
        */
    // child.onmouseover = function () {
    //     console.log('child');
    // }
    // parent.onmouseover = function () {
    //     console.log('parent');
    // }
    // 事件捕获
    child.onmouseenter = function () {
        console.log('小');
    }
    parent.onmouseenter = function () {
        console.log('大');
    }
</script>

###阻止事件默认行为
什么元素有默认行为呢？如链接，提交按钮
阻止默认事件 event.preventDefault()

<body>
    <a href="https://www.baidu.com" onclick="alert('单击链接了！'); return false">百度一下</a>
    <a href="https://www.baidu.com" onclick="fn1(); return false">百度两下</a>
    <a href="http://www.taobao.com" id="link">淘宝一下</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="登录啦啦" id="submit">
    </form>
</body>
<script>
    function fn1() {
        alert("单击链接了哈")
    }
    /*
        默认事件：a链接的跳转 表单的提交
      */
    var link = document.getElementById('link')
    console.log(link);
    link.onclick = function (event) {
        console.log('测试');
        // 阻止默认事件 event.preventDefault() (重点)
        var event = event || window.event
        event.preventDefault()
        return true
    }
    var submit = document.getElementById('submit')
    submit.addEventListener('click', function (event) {
        console.log('测试');
        var event = event || window.event
        event.preventDefault()
    })
</script>