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;
        }
    }
 
 
 
 
 
    

js 事件小结的更多相关文章

  1. js事件小结

    首先事件绑定分为2种方法 一种为"DOM0级"方法,这里我理解为事件指定 var oDiv = document.getElementById("div1"); ...

  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. CSS3 基础知识

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  2. 使用json常用到的包有以下六个

    使用json常用到的包有以下六个 1. commons-logging-1.0.4.jar 2. commons-lang-2.3.jar 3. commons-collections-3.2.jar ...

  3. 生成bundle和移除bundle

    1.命令行生成bundle $ php bin/console generate:bundle --namespace=Acme/TestBundle 2.移除bundle(新的bundle) App ...

  4. MyEclipse8.5自动生成注册码

    package com; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamRe ...

  5. C++ crash 堆栈信息获取(三篇文章)

    最近在做程序异常时堆栈信息获取相关工作,上一篇文章成功的在程序creash时写下了dump文件,而有些情况写dump文件是 不可以的,比如在jni开发时,C++只做底层处理,而整个项目是android ...

  6. MySQL加锁分析

    参考:MySQL 加锁处理分析.该文已经讲的很详尽了,也易懂,下面仅仅是个人做的总结. 一. 背景 1.1 隔离级别 1.2 加锁过程 逐条处理,逐条加锁. 1.3 两阶段锁2PL 1.4 gap锁 ...

  7. Magento How To Display Product Custom Option On list.phtml

    Some time we need to display custom option of product on category list page to achive this task we o ...

  8. Ajax长连接

    所谓的长连接,就是不断去发送请求,把请求阻塞在服务器端,每次超过请求时间就去重新发送请求,保持连接,随时获取服务器端的响应的数据 项目案例: function connection(){       ...

  9. 前Google人谈团队管理:针对不同员工的情境管理法和如何选择合理的团队规模

    本文作者Tomasz Tunguz是Redpoint Ventures的风险投资人,曾在Google担任产品经理并参与过AdSense项目. 我有一个朋友,他创立了一家很成功的公司,而且还在迅速发展. ...

  10. IOS UIImage 模糊

    #import <UIKit/UIKit.h> #import <Accelerate/Accelerate.h> #import <QuartzCore/QuartzC ...