一 事件对象(event):与特定事件相关且包含有关该事件详细信息的对象

通过事件可以触发event对象的元素,鼠标的位置及状态,按下的键等等
event对象只在事件发生的过程中才有效
非IE浏览器里的event跟IE里的不同,IE里面的是全局变量,随时都可用
非IE浏览器需要用参数诱导才能使用是运行时的一个局部变量

clientX:鼠标在浏览器窗口中的横向坐标
clientY:鼠标在浏览器窗口中的纵向坐标

二 事件流:描述的是页面中接受事件的顺序

在w3c的标准里面规定了事件的执行顺序要经历两个过程:事件捕获,事件冒泡
事件捕获:由最不具体的节点接收事件,而最具体的节点最后接收---由外到内的过程
最不具体的节点:document或者window
最具体的节点:绑定事件的对象最里层的节点
事件冒泡:由具体的元素接收,然后逐级向外面传播至最不具体的节点---由内到外的过程
整个事件流的顺序:先接收再传播 阻止事件冒泡:因为执行函数是在冒泡阶段执执行的
stopPropagation();
cancelBubble=true;
window.event?window.event.cancelBubble=true:e.stopPropagation(); 阻止事件的默认行为:
preventDefault();
returnValue=false;
window.event?window.event.returnValue=false:e.preventDefault();

三 事件处理程序---事件后面绑定的函数
1 HTML事件处理:
直接添加到HTML结构当中

<tag onclick="funName()"></tag>---HTML的事件属性

2 DOM0级事件处理:
把一个函数赋值给一个事件

DOM.on事件名=function(){---对象的事件属性
程序块;
}

3 DOM2级事件处理:
添加事件句柄:
非IE低版本:

addEventListener("EventType",FunName,Bool);---事件句柄
true:在事件捕获阶段执行事件处理程序
false:在事件冒泡阶段执行事件处理程序 IE低版本:
attachEvent("on事件名",函数名);---只支持事件冒泡的阶段

移除事件句柄:

removeEventListener("EventType",FunName,Bool);
detachEvent("on事件名",函数名);
只能移除没有带参数的事件函数

JS----事件2的更多相关文章

  1. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  2. 什么是JS事件冒泡?

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  3. js事件技巧方法整合

    window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...

  4. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

  5. js 事件大全

    Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...

  6. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  7. JS事件

    JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的 ...

  8. 原生js事件和jquery事件的执行顺序问题

    场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...

  9. 特殊js事件

    1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQ ...

  10. js 事件

    事件:一般用于浏览器与用户操作进行交互 js事件的三种模型:内联模型.脚本模型.DOM2模型 内联模型:事件处理函数是HTML标签的属性 <input type="button&quo ...

随机推荐

  1. orika core工具对实体(Bean)进行深度拷贝

    1. 在pom.xml中添加orika core依赖: <!-- https://mvnrepository.com/artifact/ma.glasnost.orika/orika-core ...

  2. 使用vim时生成的.swp文件

    1. 在使用vim时,退出编辑后,发现生成了swp文件,如下: 发现用vim打开一个文件时,都会产生一个.swp的隐藏文件(即文件名.开头的),这个文件是一个临时交换文件,用来备份缓冲区中的内容,用于 ...

  3. linux安装python3 ,安装IPython ,安装jupyter notebook

    安装python3    下载到 /opt/中 1.下载python3源码,选择3.6.7因为ipython依赖于>3.6的python环境wget https://www.python.org ...

  4. jmeter插件如何协助进行内存监控 之 PerfMon Metrics Collector设置

    参考文章: http://www.cnblogs.com/zhaoxd07/p/5197669.html 当然最重要的是自己的实践,之前试的别人用的老的包 如XXstand.jar,结果并没有成功. ...

  5. SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  6. redis下操作列表list

    list 列表的元素类型为string 按照插入顺序排序 在列表的头部或者尾部添加元素 命令 设置 在头部插入数据 LPUSH key value [value ...] 在尾部插入数据 RPUSH ...

  7. EditText获取焦点

    这三个属性必须同时设置: private EditText passwde = null; passwde.setFocusable(true); passwde.setFocusableInTouc ...

  8. js常用函数的封装

    1://截取url带过来的参数 function getvl(name) { var reg = new RegExp("(^|\\?|&)" + name + " ...

  9. [Flex+JAVA]建立Flex+java项目,并实现基本功能

    1新建JAVA WEB项目 新建后的web文件包截图 3添加Flex项目,右键,添加.更改项目类型,天剑Flex项目类型

  10. android的特点有哪些

    android拥有完善的应用程序框架,支持4大应用组件activity,service,contentProvider,broadcast,可以在任意层次上进行复用和更换: android中java字 ...