事件类型：

     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. 监听浏览器tab选项卡选中事件，点击浏览器tab标签页回调事件，浏览器tab切换监听事件

    js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...

  3. EventTrigger动态添加监听事件

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

  4. JAVAscript学习笔记 js句柄监听事件 第四节 （原创） 参考js使用表

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

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

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

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

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

  7. js中的监听事件总结

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

  8. vue v-on监听事件

    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下 ...

  9. DOM初体验（绑定事件，监听事件）

    JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...

随机推荐

  1. text()、html() 以及 val()的区别

    text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 下面的例子演示如何通过 text().htm ...

  2. CSS 样式使用

    [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性和值的元素. [attribute~=value] 用于选取属性值中包含指定词汇的元素. ...

  3. 快速搭建Webservice接口测试环境

    一.必备工具: apache-tomcat.Axis2(WebService引擎).实例类 二.部署步骤: 1.到apache官网 http://apache.org/ 下载apache-tomcat ...

  4. OpenCV（5） 对比度和亮度

      公式: 两个参数 \alpha > 0 和 \beta 一般称作 增益 和 偏置 参数.我们往往用这两个参数来分别控制 对比度 和 亮度 .   #include "stdafx. ...

  5. Wordpress如何开启用户注册功能

    登录你的Wordpress管理员帐号,并进入管理后台,点击左侧菜单栏的"设置"--"常规"   在打开的设置页面,下方找到"允许任何人注册" ...

  6. WPF 2D 碰撞检测

        var intersectionDetail = path1.Data.FillContainsWithDetail(path2.Data); if (intersectionDetail ! ...

  7. MyIsam和InnoDB的区别

    个人见解: 1.最主要的差别就是Innodb 支持事务处理与外键和行级锁.而MyISAM不支持 所以有用到事务处理和外键的,要用Innodb 2. InnoDB 中不保存表的具体行数,也就是说,执行s ...

  8. 建立php开发环境(XAMPP + Xdebug+Zend Studio)

    1. 安装XAMPP和Zend Studio Zend Studio下载地址: http://pan.baidu.com/s/1o6BjvAE XAMPP 下载地址: http://pan.baidu ...

  9. Activiti工作流学习（一）部署对象和流程定义

    一.前言 前一段时间在工作中,使用了流程审批,对api的调用非常不熟悉,都是调用别人写好的接口在界面上进行显示,基本了解了流程审批的主要步骤,现对流程审批进行学习,主要是调用api进行CRUD操作,感 ...

  10. HDU 3072 (强连通分量)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3072 题目大意:为一个有向连通图加边.使得整个图全连通,有重边出现. 解题思路: 先用Tarjan把 ...