zoukankan      html  css  js  c++  java
  • 绑定事件的模型

     

    种事件流模型

    1,冒泡事件流模型:从特定的事件到不特定事件,即从Dom树的叶子到根节点
    2,捕获事件流模型:从不特定的事件到特定的事件,即根节点到Dom树的节点
    从冒泡型事件流中click事件流的顺序为:div->body->html->document
    从捕获型事件流中click事件流的顺序为:document->html->body->div;
    DOM2的事件流的顺序
    事件捕获->目标对象->事件冒泡
    3,事件流的案例事件代理-事件委托
    优点:
    1,通过冒泡的思想减少了对子节点绑定的特点,不用使用for循环,
    2,而是对父节点进行绑定,事件处理器要驻流内存,提高了性能

    原生的案例

    捕获事件->目标对象(2次)——>事件冒泡  

    <!DOCTYPE html>
    <html>

    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    </head>
    <style>
    #outer {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-color: deeppink;
    }

    #middle {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
    background-color: deepskyblue;
    }

    #inner {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    ;
    background-color: darkgreen;
    text-align: center;
    line-height: 100px;
    color: white;
    }

    #outer,
    #middle,
    #inner {
    border-radius: 100%;
    }
    </style>

    <body>
    <div id="outer">
    <div id="middle">
    <div id="inner">
    click me!
    </div>
    </div>
    </div>
    <script>
    var innerCircle = document.getElementById("inner");
    innerCircle.addEventListener("click", function () {
    alert("innerCircle的click事件在捕获阶段被触发");
    }, true);
    innerCircle.addEventListener("click", function () {
    alert("innerCircle的click事件在冒泡阶段被触发");
    }, false);
    var middleCircle = document.getElementById("middle");
    middleCircle.addEventListener("click", function () {
    alert("middleCircle的click事件在捕获阶段被触发");
    }, true);
    middleCircle.addEventListener("click", function () {
    alert("middleCircle的click事件在冒泡阶段被触发");
    }, false);
    var outerCircle = document.getElementById("outer");
    outerCircle.addEventListener("click", function () {
    alert("outerCircle的click事件在捕获阶段被触发");
    }, true);
    outerCircle.addEventListener("click", function () {
    alert("outerCircle的click事件在冒泡阶段被触发");
    }, false);
    </script>

    </body>

    </html>

     

    一、原生的写法

      var handleEent = {

    addEventListener: function (element, type, handler) {
    if (element.addEventListener) {
    element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
    element.attachEvent(type, handler);
    } else {
    element['on' + type] = handler;
    }
    },
    removeEentListener: function (element, type, handler) {
    if (element.removeEentListener) {
    element.removeEentListener(type, handler, false);
    } else if (element.deattachEvent) {
    element.deattachEvent(type, handler);
    } else {
    element['on' + type] = handler;
    }
    }
    };

    二、 jquery的绑定事件处理方案jquery的绑定的事件on, bind(), delegate(), live() )的区别

      1bind只能用于存在元素的绑定

    2live采用事件代理绑定到document上
    3,delegate: 采用的是事件代理将元素更加精确小的范围内使用事件代理
    4,on: 集中了以上所有的优点
  • 相关阅读:
    Python——学习笔记
    Ubuntu开发相关环境搭建
    解决联想R720双系统Ubuntu16.04的无线网卡开启问题及信号不稳定
    Win10环境下多JDK切换以及could not find java.dll异常解决
    Java——this关键字总结
    Java——多线程编程学习/01
    Python日常Bug集
    《集体智慧编程学习笔记》——Chapter2:提供推荐
    解决Pycharm无法显示matplotlib绘图问题
    Kettle启动时报错Cannot create java virtual machine & A java exception has occurred
  • 原文地址:https://www.cnblogs.com/yayaxuping/p/9877821.html
Copyright © 2011-2022 走看看