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

    事件绑定的方式

    1.  DOM  元素行内绑定
    <div onclick="alert(1)"></div>
     
    2. js on+eventType
    document.onclick =function(){alert(2)}
    3. addEventListener
    document.getElementById("myBtn").addEventListener("click", myFunction);
    function myFunction() {
        document.getElementById("demo").innerHTML = "Hello World";
    }
    4.addEvent
    addEvent( document.getElementById('foo'), 'click', doSomething );

     

    5. attachEvent
    document.attachEvent('click',function(){alert(5)});

    特点区别

    DOM  元素行内绑定  js on+eventType attachEvent addEventListener addEvent
    事件处理程序与html结构混杂在一起

    由于该方法的事件函数是全局的,很容易命名冲突
    该方法限制了绑定事件处理的函数的次数
    document.onclick =function(){alert(2)}
     
    document.onclick =function(){alert(3)}
     
    3会覆盖2
    绑定多个不会被覆盖
    可以绑定多个事件但不会被覆盖
     
    回调函数内的this指向target本身
    element.addEventListener(eventfunctionuseCapture)
     
    和addEventListener的却别 回调函数this指向window

    例子

    document.onclick =function(){alert(1)}
     
    document.onclick =function(){alert(2)}
     
    document.onclick =function(){alert(3)}
    document.attachEvent('click',function(){alert(1)})
     
    document.attachEvent('click',function(){alert(2)})
     
    document.attachEvent('click',function(){alert(3)})
    document.addEventListener('click',function(){alert(1)},false)
     
    document.addEventListener('click',function(){alert(2)},false)
     
    document.addEventListener('click',function(){alert(3)},false)
    3 3   2   1 1    2    3
  • 相关阅读:
    python基础——单元测试
    python基础——调试
    python基础——错误处理
    python基础——使用元类
    python基础——多重继承
    python基础——使用@property
    sql server 2000的安装
    [转载]目前流行的缺陷管理工具
    个人工作中ssd、audio python脚本总结
    python Synchronization between processes
  • 原文地址:https://www.cnblogs.com/wpp12345/p/5978187.html
Copyright © 2011-2022 走看看