js事件小结
首先事件绑定分为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事件小结的更多相关文章
- js 事件小结
1,事件对象 e || window.event //ie 2, 取鼠标点击坐标 带有滚动条的 var top = document.documentElement.scrollTop | ...
- 深入浅出js事件
深入浅出js事件 一.事件流 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> & ...
- 一文梳理JS事件
JavaScript与HTML的交互是通过事件进行的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间. 事件流 事件捕获 事件冒泡 事件处理程序 事件委托 1. 事件流 如果单机页面上的某个按钮, ...
- dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- 什么是JS事件冒泡?
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
- js 事件大全
Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
随机推荐
- Selenium测试专项三班隆重开班
Selenium测试专项三班隆重开班 应广大测试技术人员要求,以及企业技术需求.Selenium提前一周开课了,只针对合作的每家企业提供1-2个参训名额.预计培训60人次.但报名人数却远远超出我们预期 ...
- 深入学习 DUBBO
1.什么是 RPC 协议? RPC 的全称是 Remote Procedure Call 是一种进程间通信方式.它允许程序调用另一个地址空间(通常是共享网络的另一台机器上)的过程或函数,而不用程序员显 ...
- DUBBO高级配置:多注册中心配置
有时候我们需要的服务不在同一个 zookeeper 注册中心上,此时我们需要在 DUBBO 配置文件中配置多个注册中心. 下面我们在之前创建项目的基础上在 provider 模块中增加一个 IBook ...
- matlab实现可调节占空比的方波
我大概讲一下实现的原理:正弦波移相φ,当使得大于sin(φ)的值为1,其他值为-1,占空比就跟这个φ值之间有联系. 占空比原理图如下所示. 结果上图,可以实现调节占空比,方波频率,方波个数. 下面是函 ...
- 在Caffe中实现模型融合
模型融合 有的时候我们手头可能有了若干个已经训练好的模型,这些模型可能是同样的结构,也可能是不同的结构,训练模型的数据可能是同一批,也可能不同.无论是出于要通过ensemble提升性能的目的,还是要设 ...
- elasticsearch5.3安装插件head
1.下载并配置nodejscd /usr/local/src/wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz & ...
- RHEL7对比RHEL6的主要变化
RHEL7和RHEL6的主要变化 RHEL7和RHEL6的主要变化 RHEL7 RHEL6 文件系统 XFS EXT4 内核版本 3.10.x-x系列 2.6.x-x系列 内核名称 Maipo S ...
- Unity 学习Json篇
介绍 JSON是一个简单的,但功能强大的序列化数据格式.它定义了简单的类型,如布尔,数(int和float)和字符串,和几个数据结构:list和dictionnary.可以在http://JSON.o ...
- Elasticsearch搜索之most_fields分析
顾名思义,most_field就是匹配词干的字段数越多,分数越高,也可设置权重boost. 下面是简易公式(详细评分算法请参考:http://m.blog.csdn.net/article/detai ...
- 简单的利用JS来判断页面是在手机端还是在PC端打开的方法
在移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大,所以展示的内容也有所差别.于是就遇到一个问题,如何判断你的页面是在移动端还是在PC端打开的,很简单的问题,那我们 ...