zoukankan      html  css  js  c++  java
  • Event事件2

    1,阻止默认行为;

    2,事件监听

    3,事件流之事件捕获

    4,事件委托

    阻止默认行为

    浏览器中有很多默认行为,比如当点击a标签后,会发生链接的跳转、当点击鼠标的右键时,

    会显示右键菜单等。

    有些时候,浏览器的默认行为会影响到我们的程序,所以我们需要阻止默认行为。

     return false 就是阻止默认行为的解决方案。

    阻止超链接:

      <a href = "1.html" id = "a1">链接</a>

    <script>

      a1.onclick = function(){

      return false; //阻止跳转  

      }

    </script>

    备注:

    1.也可以用event.preventDefault()阻止;但低版本的IE有兼容问题,不推荐使用。

    2.return confirm("您确定要跳转到xxx页面吗?");

    阻止右键菜单:

      <script>

       document.oncontextmenu = function(){

      alert("右键被按下");

      return false ;

    }

    </script>

    阻止文字被选中:

      <script>

      document.onmousedown = function(){

      return false;

      }

    </script>

    阻止粘贴、复制、剪切;

    你可以尝试在该文本域中进行文字上的粘贴,复制,剪切操作。

    <input  type = "text" value = "粘贴,复制,剪切" onpaste = "return false" oncopy = "return false" oncut = "return false"/>

    阻止表单提交,重置:

    <form onsubmit = "return false" onreset = "return false"></form>

    事件监听:
    要想让JavaScript对用户的操作做出响应,首先要对dom元素绑定事件处理函数。
    所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。
    在JavaScript中,有三种绑定事件的方法:
    1:在dom元素中直接绑定;
    2:在JavaScript代码中绑定;
    3:使用事件监听绑定函数;
    在DOM元素中直接绑定;
    示例:<input type="button" name="" onclick="fn()">
    <script type="text/javascript">
    function fn(){
    alert("");
    }
    </script>
    在JavaScript代码中绑定
    示例:<<input type="button" name="" value="" id="btn">
    <script type="text/javascript">
    btn.onclick = function(){
    alert("");
    }
    </script>
    使用事件监听绑定函数
    示例:<<input type="button" name="" value="" id="btn">
    <script type="text/javascript">
    btn.addEventListener("click",function(){
    alert("");
    })
    </script>

    事件监听:w3c规范:
    语法:element.addEventListener(event,function,true);
    参数
    event:必须,指事件名称如:click,keyup,mousemove等;
    function:必须,指事件触发时,执行的函数;
    useCapture:可选,true指捕获阶段,false指冒泡阶段。默认时候为false,冒泡阶段。
    DOM2级事件规定的事件流的三个阶段:捕获,目标,冒泡;
    1.捕获阶段,当我们在DOM树的某个节点发生了一些操作(例如单击、鼠标移动上去),就会有一个事件发射过去,这个事件从window发出,不断经过下级节点直到触发的目标节点,在到达目标节点之前的过程称为捕获阶段(capture Phase)。(所有经过的节点,都会触发这个事件,捕获阶段的任务就是建立这个事件传递路线,以便后面冒泡阶段顺着这条路线返回window。)
    2,目标阶段:当事件不断的传递直到目标节点的时候,最终在目标节点上触发这个事件,就是目标阶段。
    3,冒泡阶段:事件冒泡即事件开始时,由具体的元素接收(也就是事件发生所在的节点),然后逐级传播到较为不具体的节点。
    当浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:

    想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是一组圆。两家公司的开发团队在看待浏览器事件方面还是一致的。如果你单击了某个按钮,那么同时你也单击了按钮的容器元素,甚至整个页面。

    事件流描述的是从页面中接受事件的顺序。但有意思的是,IE和Netscape开发团队居然提出了两个截然相反的事件流概念。IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流。

    <div id="div1" onclick="alert('div1')">
    <div id="div2" onclick="alert('div2')"></div2>
    </div>

    当点击div2时,IE先执行div2,后执行div1;而Netscape先执行div1,后执行div2。

    用js绑定和事件监听绑定的区别和特点:
    1,js绑定的事件会覆盖,但是使用事件监听不会被覆盖。
    2,js绑定的事件不会覆盖事件监听的事件。
    3,事件监听可以改变函数的执行顺序(可以选择冒泡还是捕获)。
    4,js绑定的事件return false可以阻止默认行为;而事件监听中return false无效。
    注意:使用IE事件监听时,函数的this指向的是window对象。而w3c事件监听,函数内this指向的函数所属的对象。
    w3c提供的删除事件处理函数的方法:
    obj.removeElementListener(event,fn,false);//删除时需要看fn函数绑定在冒泡阶段还是捕获阶段。
    无法同时删除多个事件。
    函数的执行顺序:
    某一个元素同时具有冒泡和捕获阶段函数时,在非目标阶段时,先执行捕获函数再执行冒泡函数。如果是目标阶段的函数,要看书写的顺序,依次执行。
    onclick绑定的函数在冒泡阶段触发;如果同时在addEventListener绑定的冒泡阶段的函数,看书写顺序执行。
    IE6、7、8不支持addEventListener所以要用到attachEvent。
    IE提供的事件监听;
    obj.attachEvent("onclick",fn);
    对一个元素绑定多个事件的执行顺序;
    高版本IE:从前到后;// 从IE11开始,不支持这种写法。
    IE6/7/8:从后到前;
    IE提供的删除事件:
    obj.detachEvent("onclick",fn);
    事件监听的封装:
    建立一个函数,解决w3c标准和IE标准的事件监听的兼容。
    移除事件的监听的封装:
    建立一个函数,解决w3c标准和IE标准的事件监听的兼容。
    事件委托也叫事件代理
    事件委托就是利用事件冒泡的原理,把事件加到父元素或根元素上,触发执行效果。
    优点是可以大量节省内存占用,减少事件注册。
    event.target||event.srcElement 获取目标元素
    注:target是w3c规范,但IE6,7,8不支持,仅支持srcElement;

  • 相关阅读:
    THUSC2018退役预定
    TAT
    dsu on tree(CF600E Lomsat gelral)
    Bzoj4784: [Zjoi2017]仙人掌
    [APIO2018] Duathlon 铁人两项
    仙人掌基础
    Bzoj3672: [Noi2014]购票
    CF809E Surprise me!
    虚树(Bzoj3611: [Heoi2014]大工程)
    Bzoj3197: [Sdoi2013]assassin
  • 原文地址:https://www.cnblogs.com/l8l8/p/8778127.html
Copyright © 2011-2022 走看看