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 keyCode  返回的是ASCII码  不区分大小写
 
6,onkeypress 
    
    ff 返回keycode 所有的字符都返回0 
        chorom/ie 返回keycode 支持大小写
        charCode  返回字符编码
 
 
7, 获取事件源
   
    target = e.target || e.srcElement
    
        target.tagName
        
    e.type
 
8, 事件流
 
    ff 先捕获然后再冒泡
    
    ie  冒泡
 
9, 取消冒泡
 
    e.stopPropagation() || e.cancelBubble = true;
 
10, addEventListener
 
    1,解决调用两次,不会被覆盖 (ie倒着弹出)
     window.addEventListener(‘load‘,function(){
             alert(‘lv‘);
     },false);
 
 
     window.addEventListener(‘load‘,function(){
         alert(‘Miss.lv‘);
     },false);
 
 
    ff lv Miss.lv
 
    ie Miss.lv lv
    
    2,解决传递两个相同的函数,只执行一次(ie没有解决,传递相同的两个函数)
 
    window.addEventListener(‘load‘,init,false);
        window.addEventListener(‘load‘,init,false);
 
 
   3,this指向 (ie this 指向window)
    
    window.attachEvent(‘load‘,function(){
            var box = document.getElementById(‘box‘);
 
            box.attachEvent(‘onclick‘,function(){
             alert(this===window);  //true
            })
    })
 
 
 
    function addEvent(obj,type, fn){
            obj.attachEvent(‘on‘+type, function(){
                fn.call(obj,arguments);
        })
    }
 
addEvent(window,‘load‘,function(){
    var box = document.getElementById(‘box‘);
    addEvent(box,‘click‘,function(){
        alert(this === box);
    })
})
 
 
    
   4,添加一个额外的方法,不会不覆盖
 
 
11,    移入  e.ralatedTarget e.fromElement mouseover
    移出  e.ralatedTarget e.toElement   mouseout
 
12, 阻止默认行为
 
    e.preventDefault();
        e.returnValue = false;
 
 
    不能直接用return false;因为return false只能放到前面,后面的就不能执行了
 
 
13, 滚轮事件
 
      非 ff        mousewheel
      ff     DOMMouseScroll
      
 
 
 wD : function(e){
        var e = this.getEvent(e);
        if(e.wheelDelta){
            return e.wheelDelta;
        }else{
            return -e.detail*40;
        }
    }
 
 
 
 
 
    

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

js 事件小结

时间: 2024-11-03 07:35:06

js 事件小结的相关文章

js事件小结

首先事件绑定分为2种方法 一种为"DOM0级"方法,这里我理解为事件指定 var oDiv = document.getElementById("div1"); oDiv.onclick = function(){ alert(this.id); }; 第二种为"DOM2级"方法 我理解为绑定 IE8及以下:attachEvent(on+事件名,执行的函数); 其他浏览器(IE9+ FF chrome之类的):addEventListener(事

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 事件捕获:当使用事件捕获时,父级元素先触发,子元素后触发 事件冒泡:当使用事件冒泡时,子级元素