zoukankan      html  css  js  c++  java
  • 事件流,冒泡,捕获,事件委托

    事件流,从页面中接收事件的顺序,ie的事件流是冒泡,Netscape Communicator的事件流是捕获

    js里怎么去监听一个事件?DOM事件流

      网页中每一个元素都有可以产生某些触发JavaScript函数的事件,事件是可以被JavaScript侦测到的一种行为

      ie8之前不支持dom事件流

      多数智齿dom事件流的浏览器都实现了一种特定行为,即DOM2级事件,规范明确要求捕获阶段不会涉及事件目标,但ie9以及其他都会在捕获阶段触发事件对象上的事件。结果,就是有两个机会在目标对象上面操作事件。

      1,事件捕获阶段,为截获事件提供机会,此阶段不会接收到事件,意味着事件从document到html就停止了

      2,处于目标阶段,事件在div上发生,并在事件处理中被看成冒泡的一部分

      3,冒泡阶段,这个阶段事件作出响应,事件又传播回到文档

    监听方法的参数分别代表什么意思?其中哪些参数关系到js的事件流机制?js事件流机制有哪些工作?工作原理是什么?

      第一个参数是,事件类型,例如onclick

      第二个参数是,响应的时候所执行的函数

      第三个是事件流问题,侦听的三个阶段,捕获阶段 --- 目标阶段 --- 冒泡阶段

      此处的参数确定侦听器是运行于捕获,目标还是冒泡

      如果将useCapture设置为true,则侦听器只在捕获阶段处理事件,如果设置为false,侦听器就只在目标或者冒泡阶段处理事件

      如果想要三个阶段都有侦听事件,请调用两次addEventListener,一次为true,一次为false

      true的顺序总在false之前,如果多个为true,则外层触发多于内层,如多多个为false,则内层触发先于外层

      冒泡:事件从里向外发生(目前IE6,7,8只支持冒泡流)

      捕获:事件从外向里
      false,阻止事件继续往下流

    myBody.addEventListener("click", function() {
         show('body<br>');
    }, true); //若为false则是冒泡事件

    事件移除

      removeEventListener(type, fn, useCapture)

      因为IE678只支持事件冒泡,不支持事件捕获,所以它也不支持addEventListener( )方法,

      IE提供了另一个函数attachEvent( type , fn )

      参数:type---------事件类型,fn-------------事件处理函数,没有第三个参数

      事件移除detachEvent( type , fn )

    var Event=ev||window.event;
    if (Event.stopPropagation){
        Event.stopPropagation();//非IE阻止事件传播
    }else{
        Event.cancelBubble=true;//IE阻止事件冒泡
    }
    var Event=ev||event;
    if (Event.preventDefault) {
        Event.preventDefault(); //非IE阻止默认事件
    } else{
        Event.returnValue=false; //IE阻止默认事件
    };

    普通事件和事件绑定有什么区别?

      普通事件:直接触发,多个事件,后边的事件会覆盖前边的时间

      事件绑定:在一个元素上进行监听事件是否触发,支持多个事件

    事件委托

      定义:利用事件冒泡,只指定一个事件处理程序

       好处:1、节省空间内存性能好,2、对于新增的内容,无需再进行事件绑定,对于动态内容尤为合适

       缺点:如果把所有事件都用事件代理,可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

    <body>
        <div id="box">
            <button val="add">添加</button>
            <button val="del">删除</button>
            <button val="select">选择</button>
        </div>
    </body>
    <script>
        var box=document.getElementById("box");
        box.onclick=function (ev) {
            var ev=ev||window.event;
            var target=ev.target||ev.srcElement;
            if (target.nodeName.toLocaleLowerCase()=='button'){
                var attVal=target.getAttribute('val');
                switch(attVal){
                    case'add':console.log('添加');break;
                    case'del':console.log('删除');break;
                    case'select':console.log('选择');break;
                }
                    
                
            }
        }
    </script>
  • 相关阅读:
    捕捉整个桌面的图片
    在Image控件中绘制文字
    绘图
    Image1.Canvas画图笔刷
    将图片序列保存为GIF文件
    拷贝剪贴板图像到窗体
    显示 png 图片
    将图片以字符串方式保存
    复制图片的一部分
    反转字符串
  • 原文地址:https://www.cnblogs.com/xiaohaha668/p/10700811.html
Copyright © 2011-2022 走看看