本课我将讲述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. 【Gamma】项目展示

    团队成员介绍 大娃 :后端开发人员,主要工作为后端开发,文档撰写. 大娃的个人博客 二娃 PM,主要工作为项目进度把控,例会博客撰写. 二娃的个人博客 三娃* PM,主要工作为项目进度把控,用户需求分 ...

  2. Salesforce LWC学习(八) Look Up组件实现

    本篇参考https://www.salesforcelwc.in/2019/10/lookup-in-lwc.html,感谢前人种树. 我们做lightning的时候经常会遇到Look up 或者MD ...

  3. SyntaxError: Non-ASCII character ‘\xe5’ in file 的解决办法

    在Python脚本中包含中文的时候,会遇到编码错误.例如: 出现SyntaxError: Non-ASCII character ‘\xe5’ in file 的错误. 解决办法:是因为编码有问题,所 ...

  4. [环境部署] Linux搭建SVN服务器之Centos篇

    使用 service iptables stop 关闭防火墙 安装步骤如下: 1.yum install subversion2.输入rpm -ql subversion查看安装位置,如下:rpm - ...

  5. Logstash测试的时候,报Error occurred during initialization of VM,Could not reserve enough space for object heap

    今天配置Logstash的时候,启动输入logstash ‐e 'input { stdin { } } output { stdout {} }'就开始报错了,Error occurred duri ...

  6. 模拟 --- Crashing Robots

    Crashing Robots Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7394   Accepted: 3242 D ...

  7. DEV 总结

    转自:https://www.cnblogs.com/yuerdongni/archive/2012/09/08/2676753.html 1. 如何解决单击记录整行选中的问题 View->Op ...

  8. LATEX 数学公式基本语法

    作者:@houkai本文为作者原创,转载请注明出处:https://www.cnblogs.com/houkai/p/3399646.html TEX 是Donald E. Knuth 编写的一个以排 ...

  9. vmare-Tools重启后也不生效的问题

    这也是一个关于 Tools的问题,如题,既不能互相拷贝文件,也不能调节分辨率,好像是因为 Tools 的版本问题 需要进行的操作: 1:sudo apt-get install open-vm-too ...

  10. maven项目整合SSM配置log4j, 实现控制台打印SQL语句

    在原有项目正常启动的情况下, 实现在控制台打印mapper包下SQL语句. 1.在pom.xml配置文件中添加两个依赖(缺一不可) <!--日志包--> <dependency> ...