简单实用的几个JS事件

事件

JavaScript所支持的事件，可以分为以下几类：

• 窗口事件 (Window Events)
• 表单元素事件 (Form Element Events)
• 键盘事件 (Keyboard Events)
• 鼠标事件 (Mouse Events)

鼠标事件

        鼠标移动到目标元素上的那一刻，首先触发mouseover 
        之后如果光标继续在元素上移动，则不断触发mousemove 
        如果按下鼠标上的设备(左键,右键,滚轮……)，则触发mousedown 
        当设备弹起的时候触发mouseup 
        目标元素的滚动条发生移动时(滚动滚轮/拖动滚动条。。)触发scroll
        滚动滚轮触发mousewheel，这个要区别于scroll 
        鼠标移出元素的那一刻，触发mouseout 
 ##**获取事件对象和事件源(触发事件的元素)
       function eventHandler(e){ 
       //获取事件对象
        e = e || window.event;//IE和Chrome下是window.event FF下是e 
       //获取事件源 
       var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target } 
 **取消事件默认行为(例如点击一个后不跳转页面而是执行一个函数) **
     function eventHandler(e) {
         e = e || window.event; // 防止默认行为 
              if (e.preventDefault) { 
                       e.preventDefault();//IE以外 
                 } else { 
                       e.returnValue = false;
                 //IE //注意：这个地方是无法用return false代替的 
                 //return false只能取消元素
               } 
     } 

窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。事件
说明
onload           当网页被载入时执行脚本。
onunload             当网页被关闭时执行脚本。

表单元素事件(Form Element Events)

    仅在表单元素中有效。
    onchange    当元素（select 、复选框 等）改变时执行脚本   
    onsubmit    当表单（form）被提交时执行脚本   
    onreset 当表单被重置时执行脚本 
    onselect    当元素被选取时执行脚本 
    onblur  当元素失去焦点时执行脚本    
    onfocus 当元素获得焦点时执行脚本    

键盘事件Keyboard Events)/鼠标事件 (Mouse Events)

    在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。

事件源

事件源是指发生事件的DOM节点。
事件源是作为event对象的属性存在的。在W3C规范中，这个属性是 target ；但是 IE8.0 及其以下版本不支持该属性，它使用 srcElement 属性来获取事件源。

    
        
        
        
    
        
点击这里

    
    
    

绑定事件的方法

1 . 在DOM元素中直接绑定
按钮
* 分析:这种方式结构不分离,效率低*
2 . 对象属性方式
DomObject.onclick = function(){}
* 分析:这种方式只能绑定一个时间*
3 . addEventListener方式 （W3c中的标准）

xxxDomObject.addEventListener('click',function(){}); (移除xxxDomObject.removeEventListener("mousedown", mouse, false);)
* 注意： 1.事件名，一律不带on (即 绑在 click，load，change.. 等等）
2.绑定事件函数中的"this"指绑定该事件的对象
3.执行顺序，是按绑定的顺序来的*

取消浏览器默认动作

 对于遵循 W3C 规范的浏览器，使用 event 对香的 **preventDefault()** 方法来取消默认动作；
 但是 IE8.0 及其以下版本不支持该方法，它通过对 event象的 **returnValue** 属性赋值 false 来取消默认动作。

兼容写法
document.getElementById("demo").onclick=function(e){
    var eve = e || window.event;
    try{ // 使用 try...catch 语句避免浏览器出现错误提示
        eve.preventDefault(); // 非 IE 浏览器
    }catch(e){
        eve.returnValue = false; // IE8.0 及其以下版本
    }
}

addEventLIstenner('click',function(){},true) 第三个参数 false(默认):冒泡 true :捕获

事件捕获/事件冒泡

事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

把事件捕获和冒泡的过程统称为事件的传播事件的传播是可以阻止的：
• 在W3C中，使用stopPropagation()方法
• 在IE下设置cancelBubble = true;
在捕获的过程中stopPropagation()后，后面的冒泡过程也不会发生了~
阻止事件的默认行为，例如click 后的跳转~
• 在W3C中，使用preventDefault()方法；
• 在IE下设置window.event.returnValue = false;
注：不是所有的事件都能冒泡，例如：blur、focus、load、unload，

web存储sessionStorage和localStorage

sessionStorage是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

两这个具有相同的操作方法(setItem、getItem和removeItem);
setItem存储value
用途;将value 存储到key字段
用法; .setItem(key,value);
sessionStorage.setItem("key","value"); localStorage.setItem("key", "value");

getItem获取value
用途：获取指定key本地存储的值
用法：.getItem(key)
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");

removeItem删除key
用途：删除指定key本地存储的值
用法：.removeItem(key)
sessionStorage.removeItem("key"); localStorage.removeItem("site");

clear清除所有的key/value
用途：清除所有的key/value
用法：.clear()
sessionStorage.clear(); localStorage.clear();

cookies