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

})
时间: 2024-10-15 20:43:37

js事件小结的相关文章

js 事件小结

1,事件对象   e || window.event //ie   2, 取鼠标点击坐标 带有滚动条的   var top = document.documentElement.scrollTop || document.body.scrollTop;//chorme var x = top + e.clientX; //可视区坐标   3, 获取屏幕坐标 e.screenX e.screenY   4, shiftKey altKey ctrlkey   5,onkeydown/onkeyup

JS事件模型小结

08年年初的一篇blog,转到这个博客上,想想当年跨浏览器真是一座山: 前几天看dojo的文档,其中多次提到DOM2事件模型,以前学习这部分的内容,主要愤慨于IE的不兼容性了,现在对于DOM2事件模型的概念又有些模糊,所以翻出了js权威指南(V4)又复习了一下,简单作一小结.       JS权威指南中将JS事件模型分为四种            1.原始事件模型:属性事件处理模式            2.标准事件模型:DOM2对其作了标准化            3.IE事件模型(IE5.5

js加强小结

一)回顾JavaScript基础 (1)函数的定义方式 *>>正常方式 function add(num1,num2){...} >>构造器方式 var add = new Function("num1","num2","return num1+num2"); *>>匿名/无名方式 var add = function(num1,num2){函数体} (2)window对象是什么 在JS中,window表示整个

深入浅出js事件

深入浅出js事件 一.事件流 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> <p id="inner">Click me!</p> </div> 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎么才能知道哪一个函数会首先被触发呢? 为了解决这个问题微软和网景提出了两种几乎完全相反

js事件冒泡和事件委托

js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: 1 <ul class="clearfix" data-type="cityPick"> 2 <li class="active_sort_opts" data-id="0">全部</li> 3 <li data-id="88">纽约</li> 4 <

特殊js事件

1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQUERY表单ajax提交事件 1):添加js插件 2):添加js事件 function submitForm(){ $.ajax({ url:'${root}/doLogin', data:$('form').serialize(), dataType:'json', cache:false, ty

JS事件(事件冒泡和事件捕获)

事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener().他们都接收三个参数:要处理的事件名.作为事件处理程序的函数和布尔值(事件处理的时候)[true:事件捕获时;false:事件冒泡时] DOM中的事件对象: type属性 用于获取事件类

略谈js事件

 本人是这样从做学的js事件分成以下三个方面: 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级.这里所谓的高级是指,当用户按下shift +

js事件的三个阶段

js事件的三个阶段分别为:捕获.目标.冒泡 1.捕获:事件由页面元素接收,逐级向下,到具体的元素 2.目标:具体的元素本身 3.冒泡:跟捕获相反,具体元素本身,逐级向上,到页面元素 IE5.5:div---body---document IE6.0:   div---body---html---document Mozilla:div---body---html---document---window 事件捕获:当使用事件捕获时,父级元素先触发,子元素后触发 事件冒泡:当使用事件冒泡时,子级元素