事件类型:
     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. JAVAscript学习笔记 js句柄监听事件 第四节 (原创) 参考js使用表

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

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

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

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

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

  4. js中的监听事件总结

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

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

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

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

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

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

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

  8. android listview 的监听事件

    今天遇到了一个比较让我头疼的问题,不过追根揭底只是我对listview理解的不够透彻罢了, 闲言少叙,说说我遇到的问题吧: 上篇随笔我写了关于listview的使用,如果你也已经写好了列表那么恭喜这一 ...

  9. Android成长日记-Android监听事件的方法

    1. Button鼠标点击的监听事件 --setOnClickListener 2. CheckBox, ToggleButton , RadioGroup的改变事件 --setOnCheckedCh ...

随机推荐

  1. BOOST_AUTO宏

    在boost中,有个非常不错的宏BOOST_AUTO(),它的作用是自动给var定义类型,适合function()函数返回的值的类型. int function() { ; } main() { BO ...

  2. some useful linux commands

    # best way to see log file less +F /var/log/syslog (equals: less /var/log/syslog, then shift+f) # se ...

  3. Enum

    1.定义时使用enum关键字定义. 2.隐式继承了java.lang.Enum类,所以不能再继承其他类了. 3.隐式的final修饰符,所以不能被其他类继承. package enumTest; pu ...

  4. 真核转录组(denovo/resequencing)及案例分析

    参考: 转录组文章的常规套路 文章解读:<Science>小麦转录组研究文章 转录组数据饱和度评估方法 Paper这个东西是多么的诱人,可以毕业,可以评职称,可以拿绩效. 现在的文章都是有 ...

  5. Rocky4.2下安装金仓v7数据库(KingbaseES)

    1.准备操作系统 1.1 系统登录界面 1.2 操作系统版本信息 jdbh:~ # uname -ra Linux jdbh -x86_64 # SMP Fri Dec :: CST x86_64 G ...

  6. 从BUG工具redmine上获取数据后借助python模块pycha 画出BUG分析类报表

    整体代码比较冗长,但是很好读.写的方法全是按照BUG分类去写的.所以写死了,凑合看吧,画出饼图,树状图和生成对应的数据excel,希望大家举一反三能帮助自己分析BUG #__author__ = 'x ...

  7. cVim—Chrome上更强大的vim插件

    cVim——Chrome上更强大的vim插件 介绍 也许很多人在chrome上都用过类似Vimium, ViChrome的插件,这些插件的目的都差不多,就是在浏览器中提供一些类似vim的操作来提高效率 ...

  8. matlab练习程序(射线法判断点与多边形关系)

    依然是计算几何. 射线法判断点与多边形关系原理如下: 从待判断点引出一条射线,射线与多边形相交,如果交点为偶数,则点不在多边形内,如果交点为奇数,则点在多边形内. 原理虽是这样,有些细节还是要注意一下 ...

  9. 使用JAVA直观感受快速排序与冒泡排序的性能差异

    初学算法,肯定会编写排序算法 其中两个最为有名的就是冒泡排序和快速排序 理论上冒泡排序的时间复杂度为O(N^2),快速排序的时间复杂度为O(NlogN) 下面本门使用JAVA,分别编写三段排序程序 对 ...

  10. HDU 3635 并查集+路径压缩+记录每个点移动次数

    题意: 给定n个点 oper个操作 每个点有1个龙珠 下面2种操作: T u v 把u点所有龙珠搬到v Q u  问u点当前所在城市 u点所在城市有几个龙珠 u点被移动几次 思路: 并查集可以求出 u ...