事件类型:
     1.界面事件
         onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload
         window.onload = function(){
             //代表图片,dom元素,iframe,css加载完毕以后
             //才触发的事件
         }
         $(function(){
             //dom  css js 初始化就加载事件
             //调用了图片的unload事件
         });

         onunload:移除加载事件
         onabort:XMLHttpRequest
         onerror:文档加载失败,图片加载失败的时候调用事件,XMLHttpRequest
             请求失败是调用的函数
         onresize:一般用于窗口,body,frameset改变窗口大小的时候调用
         onscroll:用户滚动文档触发的事件
         oncontextmenu:右键触发的事件
     2.聚焦事件
         blur:
         focus
         focusin
         focusout
     3.表单事件
         onchange
         onreset
         onsubmit
         onselect
     4.鼠标事件
         onclick
         ondbclick
         onmousedown
         onmousemove
         onmouseover
         onmouseup
         onmouseleave
     5.滚轮事件
         wheel
     6.键盘事件
         onkeydown
         onkeyup
         onpress
     7.触屏事件
         ontouchstart
         ontouchchend
         ontouchmove
         ontouchleave
     8.window,body中的嵌套事件
         onafterprint:文档打印时候立刻会执行方法
         onbeforeprint:打印之前执行事件
         onpagehide:当浏览器即将离开的事件
         onpageshow:当浏览器即将立刻的事件
         onbeforeunload:当浏览器即将立刻的事件
     拖拽事件
         ondrag
         ondragstart
         ondragend
         ondragenter
         ondragleaveover
     文档事件
         onreadystatechange:XMLHttpRequest

 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>

javascript事件有哪些?javascript的监听事件的更多相关文章

  1. 为不具有change事件的html标签设置监听事件

    change事件会在文本内容或选项被更改时触发. 该事件仅适用于<input type="text">和<textarea>以及<select> ...

  2. EventTrigger动态添加监听事件

    在 Unity3D 中,通过拖拽的方式在 EventTrigger 组件中添加监听事件就不多说了,很简单.这里主要说的是通过代码动态往 EventTrigger 组件中添加监听事件,有个很坑的地方,就 ...

  3. JAVAscript学习笔记 js句柄监听事件 第四节 (原创) 参考js使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue 为什么在 HTML 中监听事件?

    为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...

  5. js监听事件 上滑消失下滑出现的效果 触摸与手势事件

    https://www.w3cmm.com/javascript/touch.html //触摸与手势事件连接tinyscrollbar //方法1var _this = $('#fabu');var ...

  6. js中的监听事件总结

    javascript事件与功能说明大全:http://tools.jb51.net/table/javascript_event 1.滚动条监听事件 例1:监听滚动条距离页面顶端距离 <scri ...

  7. Android中Button的五种监听事件

    简单聊一下Android中Button的五种监听事件: 1.在布局文件中为button添加onClick属性,Activity实现其方法2.匿名内部类作为事件监听器类3.内部类作为监听器4.Activ ...

  8. Second Day: 关于Button监听事件的三种方法(匿名类、外部类、继承接口)

    第一种:通过匿名类实现对Button事件的监听 首先在XML文件中拖入一个Button按钮,并设好ID,其次在主文件.java中进行控件初始化(Private声明),随后通过SetOnClickLis ...

  9. js 获取当前焦点所在的元素、给元素和input控件添加键盘监听事件、添加页面级的键盘监听事件

    页面级的键盘监听事件 document.onkeydown = function (event) { var e = event || window.event || arguments.callee ...

随机推荐

  1. WPF内置命令

    <Window x:Class="WpfCommands.MainWindow"         xmlns="http://schemas.microsoft.c ...

  2. PHP文件目录copy

    /**(2) PHP文件目录copy @param string $dirsrc 原目录名称字符串 @param string $dirto 目标目录名称字符串 */ function copyDir ...

  3. linux环境开发私房菜

    1,各种linux 平台GUI开发IDE环境 2,C/C++ 好的编译器 gcc/emcs;

  4. Linux系统date命令的参数及获取时间戳的方法

    date指令相关用法示例 date 用法: date [OPTION]... [+FORMAT]date [-u|--utc|--universal] [MMDDhhmm[[CC]YY][.ss]] ...

  5. html onclick时间传字符串参数

    经常忘记拼html中onclick事件传字符串引号的问题,所以今天记一下! 简单一句话 外面是"",里面就是'',外边是'',里边就是"".   示例: var ...

  6. hadoop2.x源码编译

    转载请标明出处: http://blog.csdn.net/zwto1/article/details/50733753: 介绍 本篇主要会涉及以下内容: 学会编译hadoop2.x源码 编译hado ...

  7. postgresql 添加uuid扩展

    去年用EF Core做数据迁移到psql数据库的时候遇到了缺失uuid的错误,当时帅气的脸蛋突然懵逼了.现记录一下 以备参考. 环境:Centos7.2  psql  Xshell Xshell连接C ...

  8. ActiveMQ-5.15.2下载和启动(windows)

    一.下载和部署 我的ActiveMQ版本是 5.15.2,参照别人家的博客,下载和启动照样成功.别人家的博客地址: http://blog.csdn.net/clj198606061111/artic ...

  9. 【Collection、泛型】

    [Collection.泛型] 主要内容 Collection集合 迭代器 增强for 泛型 第一章 Collection集合 1.1 集合概述 集合:集合是java中提供的一种容器,可以用来存储多个 ...

  10. test20180922 扭动的树

    题意 分析 二叉查找树按照键值排序的本质是中序遍历,每次我们可以在当前区间中提取出一个根,然后划分为两个子区间做区间DP.记\(f(i,j,k)\)表示区间[i, j]建子树,子树根节点的父亲是第k个 ...