分析JS高级绑定事件的几种方式

导语 第一种绑定方式: html绑定 (把事件写在标签属性里)语法: <a href="http: bbs aseoe com "onclick="t();">爱思社区< a>分析:这种方式 行为 结构不分离,效率较低 行为: 方法 结构:

第一种绑定方式: html绑定 (把事件写在标签属性里)

  语法: <a href="http://bbs.aseoe.com/"  onclick="t();">爱思社区</a>

分析:这种方式 行为 结构不分离,效率较低  
              行为: 方法
              结构: div
              样式: css

第二种绑定方式: 对象属性方式

语法:  xxxDomObject.onclick = function(){
}

分析:这种方式 只能绑定一个事件
   如 一个页面中都写了onload事件,则后面的事件会将前面的onload的属性值给覆盖

window.onload = function(){
      alert('bbs.aseoe.com');
}

window.onload = function(){
      alert('爱思社区');
}
最终的结果是爱思社区 会将bbs.aseoe.com 覆盖


第三种绑定方式: addEventListener方式  (W3c中的标准)
  
    语法:xxxDomObject.addEventListener();

    var test = document.getElementById('test');
    test.addEventListener('click', function(){alert('爱思社区');},false);
    test.addEventListener('click', function(){alert('bbs.aseoe.com');},false); 

   注意: 1.事件名,一律不带on   (即 绑在 click,load,change,blur,focus,mouseover.. 等等)
               2.绑定事件函数中的"this"指绑定该事件的对象
               3.执行顺序,是按绑定的顺序来的

 分析JS高级绑定事件的几种方式

http://www.aseoe.com/ true 分析JS高级绑定事件的几种方式 http://www.aseoe.com/show-12-86-1.html report 6609 第一种绑定方式: html绑定 (把事件写在标签属性里)语法: <a href="http: bbs aseoe com "onclick="t();">爱思社区< a>分析:这种方式 行为 结构不分离,效率较低 行为: 方法 结构:
TAG:JS 高级 绑定事件
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-12-86-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)