JS事件1

事件

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 } 
     **取消事件默认行为(例如点击一个<a>后不跳转页面而是执行一个函数) **
         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 属性来获取事件源。

<script type="text/javascript">
document.getElementById("demo").onclick=function(e){
    var eve = e || window.event;
    var srcNode = eve.target || eve.srcElement;  // 兼容所有浏览器
    alert(srcNode);
}
</script>
</html>

绑定事件的方法

1 . 在DOM元素中直接绑定

  <button onclick="alert('谢谢支持')">按钮 </button>
   * 分析:这种方式结构不分离,效率低*

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. 及其以下版本不支持该方法,它通过对 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

     //设置cookie
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }
    //获取cookie
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
        }
        return "";
    }
    //清除cookie  
    function clearCookie(name) {  
        setCookie(name, "", -1);  
    }  
    function checkCookie() {
        var user = getCookie("username");
        if (user != "") {
            alert("Welcome again " + user);
        } else {
            user = prompt("Please enter your name:", "");
            if (user != "" && user != null) {
                setCookie("username", user, 365);
            }
        }
    }
    checkCookie(); 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,794评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,050评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,587评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,861评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,901评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,898评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,832评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,617评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,077评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,349评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,483评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,199评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,824评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,442评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,632评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,474评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,393评论 2 352

推荐阅读更多精彩内容

  • ★【知识点】: 1、掌握什么是BOM2、掌握BOM的核心-window对象3、掌握window对象的控制、弹出窗口...
    越IT阅读 2,443评论 0 2
  • Window对象 BOM 的核心对象是 window,它表示浏览器的一个实例。在浏览器中, window 对象有双...
    angelwgh阅读 452评论 0 0
  • BOM--Browser Object Model location 用于获取或这是窗口的URL,并且可以用于解析...
    寒梁沐月阅读 341评论 0 0
  • ECMAScript是JavaScript的核心,但在web使用JavaScript,那么BOM(浏览器对象模型)...
    小小机器人阅读 1,626评论 0 1
  • bom : browser object model 窗口:window对象地址栏:location对象历史记录栏...
    小小机器人阅读 357评论 0 1