zoukankan      html  css  js  c++  java
  • javascript事件有哪些?javascript的监听事件

     1 事件类型:
     2     1.界面事件
     3         onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload
     4         window.onload = function(){
     5             //代表图片,dom元素,iframe,css加载完毕以后
     6             //才触发的事件
     7         }
     8         $(function(){
     9             //dom  css js 初始化就加载事件
    10             //调用了图片的unload事件
    11         });
    12         
    13         onunload:移除加载事件
    14         onabort:XMLHttpRequest
    15         onerror:文档加载失败,图片加载失败的时候调用事件,XMLHttpRequest
    16             请求失败是调用的函数
    17         onresize:一般用于窗口,body,frameset改变窗口大小的时候调用
    18         onscroll:用户滚动文档触发的事件
    19         oncontextmenu:右键触发的事件
    20     2.聚焦事件
    21         blur:
    22         focus
    23         focusin
    24         focusout
    25     3.表单事件
    26         onchange
    27         onreset
    28         onsubmit
    29         onselect
    30     4.鼠标事件
    31         onclick
    32         ondbclick
    33         onmousedown
    34         onmousemove
    35         onmouseover
    36         onmouseup
    37         onmouseleave
    38     5.滚轮事件
    39         wheel
    40     6.键盘事件
    41         onkeydown
    42         onkeyup
    43         onpress
    44     7.触屏事件
    45         ontouchstart
    46         ontouchchend
    47         ontouchmove
    48         ontouchleave
    49     8.window,body中的嵌套事件
    50         onafterprint:文档打印时候立刻会执行方法
    51         onbeforeprint:打印之前执行事件
    52         onpagehide:当浏览器即将离开的事件
    53         onpageshow:当浏览器即将立刻的事件
    54         onbeforeunload:当浏览器即将立刻的事件
    55     拖拽事件
    56         ondrag
    57         ondragstart
    58         ondragend
    59         ondragenter
    60         ondragleaveover
    61     文档事件
    62         onreadystatechange:XMLHttpRequest
    63     
    64 javascript中一般使用:addEventListener进行监听事件 
    <!doctype html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>js</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        
        <style type="text/css">
            *{margin:0;padding:0;}
            body{font-size:16px;font-family:"微软雅黑";color:#666;
                background:#fff;
            }
            #box{font-size:64px;margin:100px auto;}
        </style>
    </head>
    <body>
        
        
        <div id="box">click me</div>
        <script type="text/javascript">
            /*
                一个元素绑定事件分为两种:一种属性事件和动态绑定事件addEventListener
                可以互相兼容,同一种事件类型是进行覆盖
                
                addEventListener(事件类型,回调函数,cp(true/false))
                true:事件扑捉
                false:事件冒泡
                
                为什么推荐使用冒泡,而不用事件扑捉
                默认就是冒泡行为
                阻止冒泡:event.stopPropagation();
                阻止默认行为:event.preventDefault
                
                有默认行为的标签:a, 输入框,checkbox radio
            */
            
            window.addEventListener("click",function(){
                console.log("window的点击事件");
            },false);
            
            document.addEventListener("click",function(){
                console.log("document的点击事件");
            },false);
            
            document.body.addEventListener("click",function(){
                console.log("body的点击事件");
            },false);
            
            document.querySelector("div").addEventListener("click",function(e){
                console.log("div的点击事件");
                e.stopPropagation();
            },false);
        </script>
    </body>
    </html>
  • 相关阅读:
    开发者使用JasperReport——通过数据源生成报表
    《编程导论(Java)》电子参考文献索引
    QT信号的自定义
    uCOS3空闲任务
    php函数nl2br的反函数br2nl
    PHPstorm相关设置以及快捷键
    phpstorm 左边的文件列表没用了 怎么弄出来
    nl2br()与nl2p()函数,php在字符串中的新行(\n)之前插入换行符
    DNS配置&HTTP 规格严格
    GC与幽灵引用 规格严格
  • 原文地址:https://www.cnblogs.com/sun-rain/p/4894107.html
Copyright © 2011-2022 走看看