首先事件绑定分为2种方法

一种为"DOM0级"方法,这里我理解为事件指定

            var oDiv = document.getElementById("div1");

             oDiv.onclick = function(){
alert(this.id);
};

第二种为"DOM2级"方法 我理解为绑定

IE8及以下:attachEvent(on+事件名,执行的函数);

其他浏览器(IE9+ FF chrome之类的):addEventListener(事件名,执行函数,为true的时候是在捕获阶段执行函数,但常用的是false,在冒泡阶段执行函数);

兼容写法:

function addEvent(obj,ev,fn){

                if(obj.attachEvent)
{
obj.attachEvent("on"+ev,fn);
}
else
{
obj.addEventListener(ev,fn,false);
} }

值得注意的是:

1、与DOM2 与 DOM0 区别在于

addEvent("click",oDiv,function(){alert(111)});
addEvent("click",oDiv,function(){alert(222)});
//以上2行都有效,也就是可以给oDiv绑定2种不同的click事件;执行2次
//alert(111);alert(222) //而DOM0则不行;最后定义的会覆盖前面;只执行1次 alert(222) oDiv.onclick = function(){alert(111)};
oDiv.onclick = function(){alert(222)};

特别注意IE的坑!!

attachEvent绑定的方法 里面的this==window 而 addEventListener绑定的方法里面的this==绑定的对象

oDiv.attachEvent("onclick",function(){

alert(this==window);//true

})

oDiv.addEventListener("onclick",function(){

alert(this==window);//false
alert(this==oDiv)//true })

js事件小结的更多相关文章

  1. js 事件小结

    1,事件对象   e || window.event //ie   2, 取鼠标点击坐标 带有滚动条的   var top = document.documentElement.scrollTop | ...

  2. 深入浅出js事件

    深入浅出js事件 一.事件流 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> & ...

  3. 一文梳理JS事件

    JavaScript与HTML的交互是通过事件进行的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间. 事件流 事件捕获 事件冒泡 事件处理程序 事件委托 1. 事件流 如果单机页面上的某个按钮, ...

  4. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  5. 什么是JS事件冒泡?

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  6. js事件技巧方法整合

    window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...

  7. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

  8. js 事件大全

    Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...

  9. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

随机推荐

  1. ksum问题

    2sum: Given an array of integers, return indices of the two numbers such that they add up to a speci ...

  2. vuejs学习笔记(2)--属性,事件绑定,ajax

    属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...

  3. WPF自定义控件(2)——图表设计[1]

    0.小叙闲言 除了仪表盘控件比较常用外,还有图表也经常使用,同样网上也有非常强大的图表控件,有收费的(DEVexpress),也有免费的.但我们平时在使用时,只想简单地绘一个图,控件库里面的许多功能我 ...

  4. App forensics

    A friend of mine claimed that someone stole her personal data via hacking certain App. She installed ...

  5. HBase应用快速学习

    HBase是一个高性能.面向列.可伸缩的开源分布式NoSQL数据库,是Google Bigtable的开源实现. HBase的思想和应用和传统的RDBMS,NoSQL等有比较大的区别,这篇文章从HBa ...

  6. 图解函数重载以及arguments

  7. MySQL关于Duplicate entry '1' for key 'PRIMARY'错误

    今天复习MySQL遇到Duplicate entry '1' for key 'PRIMARY'错误. 原因是主键值为'1'的数据已经存在,主键是唯一的,不可重复.

  8. Java 别名(Aliasing)

    别名 (Aliasing) 别名,顾名思义,是有别于现在名字的另一个名字,但指的是不是同一个人或事物呢?比如,你上学的时候同学有没有给你起什么外号?如果有的话,你的名字和同学给你起的外号是不是都指的是 ...

  9. MySQL执行计划总结

    背景 在工作过程中,最近时常对慢查询进行调优.对于MySQL的SQL语句调优,MySQL本身提供了强大的explain关键字用于查询分析执行计划. 本文对explain执行计划进行分析与整理,文中的内 ...

  10. CSAcademy Beta Round #3 a-game

    题目连接 a-game 大意:有一个只包含A和B的字符串,两个人分别取这个串的子串,但是每一次取不能与之前取到过的子串有交集,最后谁取到的所有串中A的总数量少的判为胜.如果一样,则为平手. 给出这样的 ...