本课我将讲述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. 01.普通抖音新手如何从0开始入门3个月做到粉丝100w+

    普通抖音新手如何从0开始入门3个月做到粉丝100w+ 今年以来,明显感觉抖音很火,大有干掉微信,取代淘宝,京东的感觉,如今年轻人,一周7天有7天要玩抖音,所以说未来不可估量. 如是,2019春节以后, ...

  2. Docker 版rocketmq部署

    rocketmq 部署启动指南-Docker 版   最近学习使用 rocketmq,需要搭建 rocketmq 服务端,本文主要记录 rocketmq 搭建过程以及这个过程踩到的一些坑. 准备工作# ...

  3. linux lnmp环境下 安装apache教程

    linux lnmp环境下 安装apache教程 源码安装 apr ,apr-util 安装apache要用<pre>wget http://mirrors.cnnic.cn/apache ...

  4. 自定义Yaml解析器替换Properties文件

    自定义Yaml解析器替换Properties文件 项目结构 案例代码 配置类SpringConfiguration @Configuration @Import(JdbcCofnig.class) @ ...

  5. Python 发送邮件 and 编辑Excel

    记录一下Python 发送邮件的代码,这是半年前写的,不知道现在有什么类库的改动. 类库 import smtplib from email.mime.text import MIMEText fro ...

  6. [原创]K8tools 20191111/K8工具合集

    K8tools 20191111 声明: 工具仅供安全研究或授权渗透,非法用途后果自负. 下载: https://github.com/k8gege/K8tools PS: 不定期更新,文件比较大,可 ...

  7. Scrum story

    鸡和猪的故事故事: 一天,一只鸡散步时遇见了猪. 鸡对猪说:“嗨,我们合伙开个餐厅吧.” 猪说:“好啊,那准备取什么店名呢?” 鸡说:“要不,就叫火腿和鸡蛋吧.” 猪直接拒绝了:“那可不行.我要割肉, ...

  8. jmeter 生成不重复的手机号

    String account = "${__time(yyyyMMdd,)}"+UUID.randomUUID().toString().split("-")[ ...

  9. web开发-心路历程

    从事web开发已经有几年了,感触颇多,在此记录一下. 对于学习: 几年的经历让我认识到了,学习确实是一个持续永恒的过程.目前的社会发展很快,各种新的思想,新的机会不断刷新我的认知,也让我体会到了自己能 ...

  10. golang学习笔记--包导入及go 常用命令及参数

    包导入:包导入路劲即代码包在工作区的src目录下的相对路径. 同一个源码文件中导入的多个代码包的最后一个元素不能重复,否则引起编译错误,如果只导入不使用,同样会引起编译错误 若想导入最后一个元素名相同 ...