首先事件绑定分为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. hdu 1757 A Simple Math Problem (构造矩阵解决递推式问题)

    题意:有一个递推式f(x) 当 x < 10    f(x) = x.当 x >= 10  f(x) = a0 * f(x-1) + a1 * f(x-2) + a2 * f(x-3) + ...

  2. JSP自定义不带属性和标签体的简单标签

    1. 新建HelloTag类 2. 添加额外的Jar包 (1). 右键项目 -> Build Path -> Configure Build Path -> Libraries -& ...

  3. Mysql清理二进制日志的技巧

    1:二进制日志 二进制日志记录了所有的DDL(数据定义语言)语句和DML(数据操作语言)语句,但是不记录包括数据查询的语句.语句以"事件"的形式保存,它描述了数据的更改过程,此日志 ...

  4. Git版本切换

    前面的话 本文将以一个简单实例的形式来介绍Git版本切换 初始版本 首先,在一个自定义的位置,创建目录a,比如在D盘下 [注意]本文会用到一些常用的Linux的Shell命令,详细信息移步至此 先使用 ...

  5. Ranklib源码剖析--LambdaMart

    Ranklib是一套优秀的Learning to Rank领域的开源实现,其中有实现了MART,RankNet,RankBoost,LambdaMart,Random Forest等模型.其中由微软发 ...

  6. ThreadLocal学习笔记

    首先,ThreadLocal是Java语言提供的用于支持线程局部变量的标准实现类.很多时候,ThreadLocal与Synchronized在功能上有一定的共性,都可以用来解决多线程环境下线程安全问题 ...

  7. Java设计模式:工厂模式

    问题提出 Java的工厂模式与现实生活中的工厂的模型是很相似的.工厂是用来做什么?当然是用来生成产品.因此在Java的工厂模式的关键点就是如何描述好产品和工厂这2个角色之间的关系. 下面来仔细描述一下 ...

  8. jasmine 初探(一)

    前言 <敏捷软件开发>这本书由享誉全球的软件开发专家和软件大师Robert C.Martin所著中提到两个开发方式: TDD(Test Driven Development)测试驱动开发 ...

  9. Hibernate启动非常慢问题分析

    项目中使用hibernate3,在启动项目过程中,发现加载显示数据很慢,要多几分钟才显示出数据,没有报其他异常.今天特别慢,过了好久都不加载显示数据. 排查思路有以下几个方面: 1.数据库是否开启.检 ...

  10. 【2017-04-21】Ado.Nte属性扩展

    通过对数据库表的封装,对该表的属性进行扩展. 1.例如:表中的性别是bool类,要实现显示给用户看的为“男.女” 2.通过表中的生日datetime类,来实现显示给用户看的年月日,自动计算年龄. 3. ...