首先了解一下什么是事件?事件是web浏览器通知应用程序发生了什么事情。我们可以通过一些方式注册事件用来监听一些我们需要处理的事件。事件包含一下一些属性:
    事件类型:用来说明是什么类型事件的字符串
    事件处理程序:监听了某个事件想让他做的事情
    事件对象:特定的事件类型,有不同的属性
    事件传播:一般情况下是会经历捕获->目标对象->冒泡的过程,IE8之前的浏览器不支持事件捕获
 
    下面简单介绍一下事件有哪些类型,文档加载和准备就绪事件、鼠标事件、鼠标滚轮事件、拖放事件、键盘事件和文本输入事件。随着web平台的发展,事件集合越来越大,这些新的事件主要来自:html5规范和移动设备的触摸和手势事件。
 
    介绍了事件有哪些类型之后,接着我们聊聊注册事件处理程序。我们知道注册事件处理程序有两种基本方式:第一种出现在web初期,给事件目标对象或文档元素设置属性(0级事件模型);第二种方式是将事件处理程序传递给对象或者是元素(2级事件模型)。
 
    0级事件模型:

//直接写在属性里
<button id="btn" onclick="alert('click me')">clicke me</button>
//通过JS绑定到元素上
document.getElementById('btn').onclick = function() {
alert('click me');
}

  

2级事件模型
function clickHandler = function () {
alert('click me');
}
//非IE浏览器 /*
参数说明:第一个参数是事件类型,第二个参数是处理程序,第三个参数是是否在捕获阶段执行
阻止事件传播:Event.stopPropagation();
阻止默认事件:Event.preventDefault();
*/
document.getElementById('btn').addEventListener('click', clickHandler, false ); //注册
document.getElementById('btn').removeEventListener('click', clickHandler, false ); //清除 //IE浏览器
/*
参数说明:第一个参数是事件类型,第二个参数是处理程序;由于IE不支持捕获,所以没有第三个参数
阻止事件传播:window.event.cancleBuble();
阻止默认事件:window.event.returnValue = false;
*/
document.getElementById('btn').attachEvent('onclick', clickHandler); //注册
document.getElementById('btn').detachEvent('onclick', clickHandler); //解除
    注:
    1.虽然所有的事件都受事件传播的捕获阶段的支配但并非所有事件都冒泡;一般来说原始输入事件冒泡,高级语义事件不冒泡(blur、focus)
    2.addEventListener注册的事件是由顺序的,attachEvent无顺序
 
    利用event.target和冒泡可以实现事件代理。

javascript的事件处理的更多相关文章

  1. 20个优秀的 JavaScript 键盘事件处理库

    键盘事件是 Web 开发中最常用的事件之一,通过对键盘事件的捕获和处理可以提高网站的易用性和交互体验.下面,我们向大家介绍收集的20款优秀的 JavaScript 键盘事件处理库,帮助开发人员轻松处理 ...

  2. 20个优秀的JavaScript 键盘事件处理库

    键盘事件是 Web 开发中最常用的事件之一,通过对键盘事件的捕获和处理可以提高网站的易用性和交互体验.下面,我们向大家介绍收集的20款优秀的 JavaScript 键盘事件处理库,帮助开发人员轻松处理 ...

  3. JavaScript之事件处理详解

    一.事件传播机制 客户端JavaScript程序(就是浏览器啦)采用了异步事件驱动编程模型.当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web浏览器就会产生事件(event).如果Jav ...

  4. javascript IE事件处理及跨浏览器事件处理程序

    一.javascript事件处理中 addEventListener/removeEventListener 用于绑定事件和解除事件,但大多用于chrome/火狐/IE9这些比较高级的浏览器中,IE8 ...

  5. JavaScript中事件处理

    先看看下面一道题目,请评价以下代码并给出改进意见: if (window.addEventListener) {//标准浏览器 var addListener = function(el, type, ...

  6. 二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单

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

  7. 二、JavaScript语言--事件处理--DOM事件探秘

    第一章 事件流 事件:是文档或浏览器窗口中发生的.特定的交互瞬间.JavaScript和HTML之间的交互都是通过事件来实现的. 事件流:描述的是从页面中接受事件的顺序 IE:事件冒泡流 Netsca ...

  8. 关于JavaScript的事件处理一些知识

    <JS事件处理> Event对象详细信息:http://www.w3school.com.cn/jsref/dom_obj_event.asp JS原生支持3中绑定事件方式: 1.以标签属 ...

  9. javascript之事件处理

    一般事件 onclick                       鼠标点击时触发此事件 ondblclick                  鼠标双击时触发此事件 onmousedown    ...

  10. 编写可维护的JavaScript之事件处理

    规则1:隔离应用逻辑 这会让你的代码容易调试 规则2:不要分发事件对象 event对象包含了太多信息 // a good example var handlePopup = { // 事件句柄,处理所 ...

随机推荐

  1. git删除未跟踪文件

    # 删除 untracked files git clean -f   # 连 untracked 的目录也一起删掉 git clean -fd   # 连 gitignore 的untrack 文件 ...

  2. playbin2 成员

    1. playbin2   struct _GstPlayBin {   GstPipeline parent;   GMutex *lock; GstSourceGroup groups[2]; G ...

  3. p标签里面不要放div标签(块元素)

    最好不要在p标签里面嵌套块级元素(如div Ul): <p>我来测试下<div>块元素</div>放在p标签的情况</p> <p>我来测试下 ...

  4. css导航条

    #nav ul { display: none; position: absolute; padding-top: 0px;} #nav li:hover ul { display: block;}

  5. Android入门2:从GridView控件使用到自定义Adapter

    在日常手机app的使用中,出现频率最高的便是ListView和GridView.ListView的例子是微信主界面,而GridView的例子则是支付宝的主界面,不明白的小伙伴打开手机便一目了然.然而这 ...

  6. unity碰撞组件、刚体组件

    游戏导入标准资源包“Character Controllers”后可以为游戏对象添加 character(角色控制器)组件: 添加角色控制器组建以后可以控制游戏对象移动: 角色控制器组件因为与碰撞组件 ...

  7. 简单的批量读取外部insert文并插入DB

    package com.tongxiang.item.base.dao; import java.io.BufferedReader; import java.io.File; import java ...

  8. hdu5322 Hope(dp)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Hope Time Limit: 10000/5000 MS (Java/Othe ...

  9. window.onload,<body onload="function()">, document.onreadystatechange, httpRequest.onreadystatechang

    部分内容参考:http://www.aspbc.com/tech/showtech.asp?id=1256 在开发的过程中,经常使用window.onload和body onload两种,很少使用do ...

  10. jquery select三级联动

    需求:对地区进行选择,选择相应的省,就会出现相应范围的市,然后出现相应的范围的县区:如果县不存在,就不现实,自我要求是自己写个简单的插件,方便以后调用: 逻辑:1.通过div的类名来获取,其下的sel ...