首先事件绑定分为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. 【转】Flash字体嵌入方法

    原文链接:http://www.cnblogs.com/ddw1997/archive/2011/11/13/2247546.html 一.如果使用flash cs5.5 1.先新建一个字体fla文件 ...

  2. ubuntu12.04 desktop默认无ssh支持

    sudo apt-get install ssh 安装下即可.

  3. 5w2h分析法则

    5W2H分析法 5W2H分析法又叫七何分析法,是二战中美国陆军兵器修理部首创.简单.方便,易于理解.使用,富有启发意义,广泛用于企业管理和技术活动,对于决策和执行性的活动措施也非常有帮助,也有助于弥补 ...

  4. PIC32MZ Live update bootloader

    PIC32MZ 的 flash memory 支持live update, 这是个全新的特性,在之前的所有PIC不管是8位还是16位的单片机上面都没有这个特性.我写过很多PIC 8位和16位单片机的b ...

  5. Memetic Algorithm(文化基因算法)

    1. 文化进化理论 威尔逊认为,从性质上来讲,文化进化总是以拉马克主义为特征的,即文化进化依赖于获得性状的传递,相对来说速度比较快:而基因进化是达尔文主义式的,依赖于经过几个世代的基因频率的改变,因而 ...

  6. 复杂SQL查询实例-5种普惠产品必须显示...

    复杂SQL需求: 1.查询productCode in (1, 2, 4, 5, 7)五种 2.5种产品必须固定显示,优先显示procuct_status='1'在售产品,在售产品卖完则售罄产品顶上来 ...

  7. MapReduce处理流程

    MapReduce是Hadoop2.x的一个计算框架,利用分治的思想,将一个计算量很大的作业分给很多个任务,每个任务完成其中的一小部分,然后再将结果合并到一起.将任务分开处理的过程为map阶段,将每个 ...

  8. DirectFB 之 实例图像不断右移

    /********************************************** * Author: younger.liucn@gmail.com * File name: imgro ...

  9. 「7天自制PHP框架」第一天:路由与控制器

    我们为什么要使用路由? 原因1:一个更漂亮的URI 1.URI的改进 刚刚开始学PHP时,我们一定写过blog.php?id=1之类的URI,使用GET方式获取参数.这样的URI有两个缺点,一是容易被 ...

  10. 界面底部Tab实现

    现在基本上大部分的手机APP都要实现底部Tab,底部实现Tab的实现方式有很多种,那么有没有好的实现方式呢? 今天我将使用一个开源插件来实现底部Tab 参考自zhangli_的博客:http://bl ...