事件

目录

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);

原文地址：http://www.cnblogs.com/Solitary-Rhyme/p/16849752.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性