首先事件绑定分为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. 老李分享:loadrunner用javavuser进行接口测试

    老李分享:loadrunner用javavuser进行接口测试 在这里分享一个poptest培训过程中案例,在日常工作中会遇到被测试系统通讯都是通过加密的数据包,加密算法是公司自己开发的,并且发送的数 ...

  2. Java基础学习(五)—Collection

    一.Collection概述 1.数组和集合的区别 (1)长度区别      数组长度是固定的,集合长度是可变的. (2)存储内容区别      数组只能存放同一种类型的元素(基本类型/引用类型). ...

  3. 应用程序写Xml文档

    主要用到CreateElement.CreateTextNode.CreateComment.AppendChild.InsertAfter方法 代码如下: XmlDocument document ...

  4. Spring+SpringMVC+MyBatis+easyUI整合优化篇(九)数据层优化-jdbc连接池简述、druid简介

    日常啰嗦 终于回到既定轨道上了,这一篇讲讲数据库连接池的相关知识,线程池以后有机会再结合项目单独写篇文章(自己给自己挖坑,不知道什么时候能填上),从这一篇文章开始到本阶段结束的文章都会围绕数据库和da ...

  5. JDBC访问数据库

    一.准备条件 外界条件 在数据库中首先创建表空间 在创建的表中添加数据 代码部分 导入数据库的驱动包(jar) 加载数据库驱动 获取数据库连接 编写sql语句 利用prepareStatement进行 ...

  6. 频繁模式挖掘中Apriori、FP-Growth和Eclat算法的实现和对比

    最近上数据挖掘的课程,其中学习到了频繁模式挖掘这一章,这章介绍了三种算法,Apriori.FP-Growth和Eclat算法:由于对于不同的数据来说,这三种算法的表现不同,所以我们本次就对这三种算法在 ...

  7. Homebrew - macOS 不可或缺的套件管理器

    一.Homebrew 是什么? Unix/Linux 安装软件的时候有个很常见.也很令人头疼的事情,那就是软件包依赖.值得高兴的是,当前主流的 Linux 两大发行版本都自带了解决方案,Red hat ...

  8. CSS预处理语言——less与sass的使用

    我们一般所使用的Less跟Sass一般是将其编译成我们所熟悉的CSS再导入使用,当然不经编译,直接在浏览器使用 我是习惯用Koala来进行编译,简单智能方便,Hbuilder也自带编译功能,不过要手动 ...

  9. 解决IE无法访问localhost问题

    前几天新安装了win10和webstorm16,发现系统是的IE浏览器是IE11,调试时无法正常显示网页: 一开始以为是系统没有写入密钥,无法获得权限,查了一下后发现是局域网设置不正确. 作以下设置可 ...

  10. [PHP] 网盘搜索引擎-采集爬取百度网盘分享文件实现网盘搜索

    标题起的太大了,都是骗人的.最近使用PHP实现了简单的网盘搜索程序,并且关联了微信公众平台.用户可以通过公众号输入关键字,公众号会返回相应的网盘下载地址.就是这么一个简单的功能,类似很多的网盘搜索类网 ...