Javascript进阶笔记 - 事件

事件

目录

1. 事件相关概念

  • 事件是电脑输入设备与页面进行交互的响应。

  • 注册就是告诉游览器，当事件响应后要执行哪些操作代码，这一过程叫做事件注册或事件绑定

    注册也分为两种：

    • 静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码，这种方式叫静态注册
    • 动态注册事件：先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码。这种方式叫动态注册

  • 事件对象，当事件的响应函数被触发时，游览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息

2. 文档的加载

  • 游览器在加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行

    这就是为什么不能将script标签直接写到head部分，因为在代码执行时，页面和DOM对象都没有加载

  • 根据书写位置，script标签可以分为两种形式

    【方式一】

    <!DOCTYPE html>
<html lang="en">
<head>
    <script>
    	/*onload事件会在整个页面加载完成后才触发
		为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成后执行
		这样就可以确保我们的代码执行时所有的DOM对象已经加载完毕了*/
        window.onload = function(){
            //.....
        }
    </script>
</head>
<body>
</body>
</html>

    【方式二】

    <!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <script>
        //body内随便写
    </script>
</body>
</html>

3. 事件的冒泡

  • 事件冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

    在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡

    • 取消冒泡：event.cancelBubble = true

  • 在下面的例子中，点击span元素则会同时触发三个响应函数，点击div则会同时触发两个响应函数

    //假设有一个div元素"box1"，其内有一个span子元素"s1"

//为s1绑定一个单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function(){
  alert("span单击响应函数")  
};

//为box1绑定一个单击响应函数
var box1 = document.getElementById("box1");
box1.onclick = function(){
  alert("div单击响应函数")  
};

//为body绑定一个单击响应函数
body.onclick = function(){
  alert("body单击响应函数")  
};

4. 事件的委派

  • 事件的委派是指，将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

  • 事件委派就是利用了事件冒泡，通过委派可以减少事件绑定的次数

    <!DOCTYPE html>
<html lang="en">
<head>
    <script>
        window.onload = function(){
            let btn01 = document.getElementById("btn01");
            let ul = document.getElementById("u1");

            btn01.onclick = function(){
                let li = document.createElement("li");
                li.innerHTML = `<li><a href="javascript:;">新的超链接</a></li>`
                ul.append(li);
            }

            ul.onclick = function(event){
                if(event.target.className == "link"){
                    alert("hi")
                };}}
    </script>
</head>
<body>
    <button id="btn01">添加超链接</button>
    <ul id="u1">
        <li><a href="javascript:;" class="link">超链接1</a></li>
        <li><a href="javascript:;" class="link">超链接2</a></li>
        <li><a href="javascript:;" class="link">超链接3</a></li>
    </ul>
</body>
</html>

5. 事件监听绑定

  • 当一个元素需要绑定多个响应函数时，为避免函数之间相互覆盖，需要使用事件监听绑定

    addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定函数执行

  • 语法：

    • addEventListener([事件名],[回调函数],[true/false])
      • 参数1：事件的字符串，一般省略"on"
      • 参数2：回调函数，当事件触发时该函数会被调用
      • 参数3：是否在捕获阶段触发事件，一般为false
    btn01.addEventListener("click",function(){
    alert(1);
},false);
btn01.addEventListener("click",function(){
    alert(2);
},false);
posted @   Solitary-Rhyme  阅读(24)  评论(0)  编辑  收藏  举报
相关博文：
· Javascript进阶笔记 - 常用事件
· Vue笔记 - 自定义事件与事件总线
· JS(DOM事件高级）
· JavaScript学习笔记（事件）
· JavaScript 进阶3
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
历史上的今天：
2021-11-02 《JAVA核心技术 卷I》 第五章 - 继承
点击右上角即可分享
微信分享提示