js事件总结（详解）

最新推荐文章于 2024-04-25 20:29:33 发布

划水的乌贼

最新推荐文章于 2024-04-25 20:29:33 发布

阅读量1.2k

点赞数

分类专栏： js 文章标签： js vue javascript css java

本文链接：https://blog.csdn.net/dergfg/article/details/113780718

版权

js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

保持对代码的热爱并保持怀疑态度

事件源：绑定事件的元素
事件目标：触发事件的元素
事件分类：
- 鼠标类
- 键盘类
- 表单类
- 浏览器类 location href scroll load

事件的绑定方式方式

DOM0级（赋值式）
- 绑定元素.on事件名 = 函数
- 删除 obtn.onclick = null

var obtn=document.getElementById("btn");
    obtn.onclick=function(){
        console.log(1);
    }

DOM2级（监听式）
- 绑定- 绑定：
正常：obox.addEventListener(“事件名”,事件处理函数,布尔)

obtn.addEventListener("click",fn);  //定义一个函数名，方便删除的时候删除

    function fn(){    //定义需要执行的代码
        console.log(2);
    }

- 布尔：
  - false表示冒泡状态，默认值
  - true表示捕获状态，IE不支持

IE：obox.attachEvent(“on事件名”,事件处理函数)
删除
- 正常：obox.removeEventListener(“事件名”,参数2,布尔)
  - 参数2：绑定事件时的事件处理函数的名字

    obtn.addEventListener("click",fn);

    function fn(){
        console.log(2);
    }

    obtn.removeEventListener("click",fn)  //删除

IE：obox.detachEvent(“on事件名”,参数2)
- 参数2：绑定事件时的事件处理函数的名字
监听式绑定事件可以重复绑定，如果用on绑定事件的话会被覆盖
（所以如果封装某个功能需要用到绑定事件都是用监听式事件绑定，防止覆盖）

var obtn=document.getElementById("btn");
    obtn.addEventListener("click",fn);
    function fn(){
        console.log(2);
    }
    obtn.addEventListener("click",fx);
    function fx(){
        console.log(34);
    }

可以切换事件流的状态（IE不支持）

事件处理函数：发生某个行为时，要执行的函数或功能
事件对象：发生某个行为时，用来记录当前事件产生的所有信息的对象。需要主动获取，只有在事件处理函数中才能拿到
事件流
- 事件冒泡：从子元素依次向上触发所有父元素的相同事件
- 事件捕获：从父元素依次向下触发所有关联的子元素的相同事件

经过下面的测试可以得出事件的执行过程，先捕获到目标再冒泡

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{width: 300px;height:300px;background: red}
        #box2{width: 200px;height:200px;background: green}
        #box3{width: 100px;height:100px;background: blue}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
            </div>
        </div>
    </div>
</body>
<script>
    var obox1 = document.getElementById("box1")
    var obox2 = document.getElementById("box2")
    var obox3 = document.getElementById("box3")

    obox2.addEventListener("click",function(){
        alert("冒泡的green")
    },false)
    obox2.addEventListener("click",function(){
        alert("捕获的green")
    },true)

    obox1.addEventListener("click",function(){
        alert("冒泡的red")
    },false)
    obox1.addEventListener("click",function(){
        alert("捕获的red")
    },true)

    obox3.addEventListener("click",function(){
        alert("目标blue")
    })
</script>
</html>

默认事件：没有手动添加，浏览器自动添加的功能或事件
事件委托：将多个子元素的相同事件，绑定给页面上现存的共同的父元素
利用事件冒泡触发父元素的事件，利用事件目标找到真正点击的元素

事件委托的简单测试使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{background: #ccc}
        li{margin: 10px 0;background: #aaa;line-height: 30px;}
    </style>
</head>
<body>
    <ul>
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
        <li>link4</li>
        <li>link5</li>
        <li>link6</li>
    </ul>
</body>
<script>
    // 点击每个li，打印出各自的内容

    // var ali = document.querySelectorAll("ul li");
    // for(var i=0;i<ali.length;i++){
    //     ali[i].onclick = function(){
    //         console.log(this.innerHTML);
    //     }
    // }


    var oul = document.querySelector("ul")  //父类

    oul.onclick = function(eve){
        var e = eve || window.event;  //兼容问题
        var target = e.target || e.srcElement;  //兼容问题

        if(target.nodeName === "LI"){  //是不是li
            console.log(target.innerHTML);
        }
    }
</script>
</html>

事件对象身上的属性（鼠标事件对象）

e.offsetX/Y 相对于事件目标的坐标
e.clientX/Y 相对于可视区域的坐标
e.pageX/Y 相对于页面的坐标
e.button 鼠标的按键
e.type 事件类型
e.target/e.srcElement 事件目标

    obtn.addEventListener("click",fx);
    function fx(eve){
        var e=eve || event;
        console.log(e.offsetX);
    }

事件对象身上的属性（键盘事件对象）

键盘事件添加给谁，怎么触发
键盘事件，需要提前获取，焦点
谁具有焦点，键盘事件就添加给谁，默认情况下document具有焦点
事件对象的属性
- e.keyCode 键码
- e.which
- e.ctrlKey
- e.shiftKey
- e.altKey
- e.metaKey

常用键码

事件流

三个阶段：事件冒泡，目标阶段，事件捕获
顺序：捕获->目标->冒泡
============================================
兼容性

如何获取事件对象（兼容）
btn.onclick = function(eve){
var e = eve || window.event;
}
鼠标事件对象身上的坐标类属性有哪些，分别表示什么坐标
- e.offsetX/Y 相对于事件目标的坐标
- e.clientX/Y 可视区域
- e.pageX/Y 页面
- e.screenX/Y 显示器
如何获取键盘事件对象的键码，并单独判断ctrl，shift，alt和系统键
- var code = e.keyCode || e.which
- e.ctrlKey
- e.shiftKey
- e.altKey
- e.metaKey
如何阻止事件冒泡（兼容）
- e.cancelBubble = true
- e.stopPropagation()
如何阻止默认事件（兼容）
- e.returnValue = false;
- e.preventDefault();
- return false;
监听式绑定事件（兼容）
- btn.addEventListener(“click”,fn,false)
- btn.attachEvent(“onclick”,fn)

划水的乌贼

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
js事件总结（详解）

保持对代码的热爱并保持怀疑态度事件源：绑定事件的元素事件目标：触发事件的元素事件分类：鼠标类键盘类表单类浏览器类 location href scroll load事件的绑定方式方式DOM0级（赋值式）绑定元素.on事件名 = 函数删除 obtn.onclick = nullvar obtn=document.getElementById("btn"); obtn.onclick=function(){ console.log
复制链接

扫一扫