zoukankan      html  css  js  c++  java
  • js事件委托与键盘事件

     1.fn()与fn的区别?

      fn():执行里面的函数

      fn:  将函数的内容赋给谁

      2.事件委托的解析

      onmouseenter,onmouseleave与onmouseover,onmouseout的区别?

      onmouseenter获取的事件源(target)是元素的本身,所以他没有事件冒泡的机制

      onmouseover获取的事件源(target)是为他的子级,当改变事件源的时候也是改变子级(同时也让自己拥有了父级的事件)从而就会产生冒泡机制;

      3.dom0级与dom2级的区别?

      1.dom2级正常事件,先捕获在冒泡

        dom0级无捕获,直接就冒泡

      (addEventListener() 中的第三个参数  true代表捕获   false代表冒泡)

      2. dom0级事件元素绑定多个onclick,最后值执行最后一个onclick

        dom2级事件绑定多个click,都要执行(注意:当绑定多个事件名,函数,事件发生阶段(捕获或冒泡),三者完全一样时,才执行一个);

      案例:

      div.addEventListener("click","fn1",false)

      div.addEventListener("click","fn1",false)    (这种情况下才执行一个,且事件函数不能使用匿名函数)(因为匿名函数开辟的内存地址不一样,事件函数名相同时,内存地址才一样)

      3.dom0级如果绑定多个相同事件,后者会覆盖前者,dom2级不会

        dom0级只适合普通事件,dom2级需要制定的事件类型如domContentLoaded(当文档结构加载完成之后执行)

      4.事件取消

      dom0级直接赋值:null

      div.onclick=null

      dom2级需要使用removeEventListener()

      div.removeEventListener("click","fn1",true)

      5.键盘事件:

      键盘事件:onkeydown(键盘按下)  onkeyup(键盘抬起)

      document.onkeydown (包括了所有键盘,键盘事件的常用写法)

      键盘事件触发时,浏览器天生自带一个叫keyboardEvent对象,所有键盘信息都在这个对象上

      靠keycode来识别你按哪个键

      我们发现ev有个属性keycode键盘编码

      案例:

      document.onkeydown=function(ev){

        var ev=ev||window.event

        console.log(ev.keycode)

      }

      右击鼠标事件:oncontextmenu

      案例:鼠标右击事件:

      

      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
          .you{
            position:absolute;
            200px;
            height:300px;
            border:red 1px solid;
          }
        </style>
      </head>
      <body>
      </body>
      <script>
        document.oncontextmenu=function(ev){
        var ev=ev||window.event;
        ev.preventDefault()||ev.returnValue;
        var div=document.createElement("div");
        div.className="you";
        div.id="you";
        var you=document.getElementById("you");
          if(you){

            document.body.removeChild(you);
            div.style.left=ev.clientX+5+"px";
            div.style.top=ev.clientY+5+"px";
            document.body.appendChild(div)
          }
          else{
            div.style.left=ev.clientX+5+"px";
            div.style.top=ev.clientY+5+"px";
            document.body.appendChild(div)
          }


        }
        document.onclick=function(){
        var you=document.getElementById("you");
        document.body.removeChild(you)
      }
      </script>

      鼠标拖拽的案例:

      

      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <title></title>
      <style>
        div{
        200px;
        height:200px;
        background:red;
        position:absolute;
        }
      </style>
      </head>
      <body>
        <div id="ha">

        </div>
      </body>
      </html>
      <script>
      var ha=document.getElementById("ha");
      ha.onmousedown=function(ev){
        var ev=ev||window.event;
        var x=ev.clientX-ha.offsetLeft;
        var y=ev.clientY-ha.offsetTop;
        document.onmousemove=function(ev){
          var ev=ev||window.event;
          ha.style.left=ev.clientX-x+"px";
          ha.style.top=ev.clientY-y+"px";
        }
      ha.onmouseup=function(){
        document.onmousemove=null;
        }
      }
      </script>

  • 相关阅读:
    php——验证身份证是否合法的函数
    php——离线执行任务
    代码整洁之道
    js自适应屏幕高度
    SSH Junit4测试
    Java Persistence with Hibernate
    SSH搭建
    js整理
    Hibernate 应用
    对学习的一点感想
  • 原文地址:https://www.cnblogs.com/diwangkaige/p/10078689.html
Copyright © 2011-2022 走看看