本课我将讲述js中的事件及一些浏览器兼容问题

本章主要从以下几个方面讲起：1.事件流  2.事件的浏览器兼容   3.鼠标，键盘事件

1. 事件流

什么叫事件流？

描述的是事件接受的顺序。这句话听起来 还是不怎么容易理解。那么我就 结合两中事件流的方式具体来说一下

事件流有两种方式：冒泡方式, 捕获方式。

对于下面这个页面来说

<!DOCTYPE html>

<html onclick="#">

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link type="text/css" rel="stylesheet" href="index.css"/>

    <script type="text/javascript" src="index1.js" charset="gbk"></script>

</head>

<body onclick="#">

<div id="content" onclick="#">

    <span id="start" onclick="#">开始</span>

    <span id="stop">停止</span>

</div>

</body>

</html>

如果是冒泡方式的话，那么假如你点击的是start这个元素的话，那么会第一响应start这个span的点击事件，但是这个span是在id=content这个div中的，所以你点击这个span其实也就是点击了它的父辈div，以此类推，也就是点击了body，点击了html，所以这几个元素的点击事件都会响应。冒泡方式就是从点击最具体的位置开始响应，然后往父辈元素响应，一层一层的往外冒泡，所以取名叫冒泡方式。

捕获事件就是与冒泡事件恰恰相反，就是它是从最外面的父层开始响应事件，然后慢慢往子元素递进。

一般IE浏览器采取的方式都是冒泡方式的

2.事件兼容问题

其次，就事件的方式来说，有三种事件方式：HTML事件，DOM0,DOM2.三种事件方式。

首先来说一下什么事html事件方式

我们通常给一个按钮附加点击事件，如下所示：

<input type="button" id="input" onclick="function(){.....}"/>

或者

<input type="button" id="input" onclick="play()"/>

<script type="text/javascript" >

function play(){

.....

}

</script>

DOM0级事件处理方式：

<script type="text/javascript">

Object.onclick=function(){

....

}

如果想取消这个点击事件，只需要下面操作

Object.onclick=null;

</script>

DOM2级事件处理方式

<script type="text/javascript">

Object.addEventListener("EventType",function,value);//这种方式给某个元素绑定某个事件，其中EventType是事件类型，比如click，mouseout等，function指的是要调用的事件名，value表是的是布尔值，flase表示的冒泡方式，true表示的是事件捕获方式。

Object.removeEventListener("EventType",function,value);

在IE中DOM2的方式有点不一样

Object.attachEvent("EventType",function),只有两个参数，跟上面一样，没有value这个参数，因为IE中默认的是冒泡形式。

Object.detachEvent("Event TYpe",function)一样的用来解除这个事件。

</script>

其中千万要注意一点。就是不管DOM0级还有DOM2级中的IE中的方式，事件前面都有on例如onclick，onmouseover,等但是在DOM2级中的addEventListener方式中事件前面不要加on，例如click.

js-事件1的更多相关文章

  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. elasticsearch 常用命令 一直红色 重启不稳定 不停的宕机

    persistent (重启后设置也会存在) or transient (整个集群重启后会消失的设置). 查看集群状态和每个indices状态.搜索到red的,没用就删除 GET /_cluster/ ...

  2. 【Activiti学习之四】Activiti API（三）

    环境 JDK 1.8 MySQL 5.6 Tomcat 7 Eclipse-Luna activiti 6.0 一.启动流程 多种方式启动 package com.wjy.pro; import or ...

  3. SpringBoot系列教程web篇Listener四种注册姿势

    java web三要素Filter, Servlet前面分别进行了介绍,接下来我们看一下Listener的相关知识点,本篇博文主要内容为SpringBoot环境下,如何自定义Listener并注册到s ...

  4. 使用Prometheus监控snmp

    获取snmp信息 首先获取需要监控的snmp的基本信息,假设基本信息如下: snmp服务IP: 1.1.1.1 snmp community: public snmp exportor部署地址: 2. ...

  5. Lambda表达式和方法引用

    1 , 为什么用lambda表达式 将重复固定的代码写法简单化 2   ,lambda表达式的实质 对函数式接口的实现(一个接口中只有一个抽象方法的接口被称为函数式接口) package com.mo ...

  6. python selenium IE Firxfor pyinstaller

    以前在python环境下selenium 主要用的是chromdriver,这次发现老是报错(Timeout), 实际又是正确的, 可能是和chrome版本不正确,再加上我程序蹦来就在windows环 ...

  7. 『正睿OI 2019SC Day1』

    概率与期望 总结 老师上午几乎是在讲数学课,没有讲什么和\(OI\)有关的题目,所以我就做了一点笔记. 到了下午,老师讲完了有关知识点和经典模型,就开始讲例题了.前两道例题是以前就做过的,所以没有什么 ...

  8. Java Objective-C AOP

    Java Use an AOP library or byte-code engineering (BCEL, cglib, asm, etc) to create a sub-class on th ...

  9. c#语法复习总结（1）-浅谈c#.net

    出来工作两年,发现自己进步太小了,工作能力是不能混的,想先从基础知识好好复习一下,再深入的学习一些高级框架和先进的理念.找回了博客园的密码账号,好好学习和总结.先从数据类型总结一下,无非就是值类型,引 ...

  10. .net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml)

    .net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml) 首先设置 Startup.cs 文件 配置 ConfigureServices services .Add ...