本课我将讲述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. 机器学习实战-logistic回归分类

    基于LR的回归分类实例 概念 前提理解: 机器学习的三个步骤:模型,损失函数(即样本误差),优化求解(通过损失函数,使得模型的样本误差最小或小于阈值,求出满足条件的参数,优化求解包括:最小二乘法,梯度 ...

  2. Keras 入门实例

    使用Keras构建神经网络的基本工作流程主要可以分为 4个部分.(而这个用法和思路,很像是在使用Scikit-learn中的机器学习方法) Model definition → Model compi ...

  3. 关于JavaSE程序的小总结（不分先后顺序 后续继续补充）

    统计字符串中某个字符串出现的次数 package com.jiang.demo01; public class Demo01 { public static void main(String[] ar ...

  4. this指北 (一篇读懂)

    this 关键字 涵义 this关键字是一个非常重要的语法点.毫不夸张地说,不理解它的含义,大部分开发任务都无法完成. 前一章已经提到,this可以用在构造函数之中,表示实例对象.除此之外,this还 ...

  5. Tensorflow2 快速简单安装命令

    使用如下命令 pip3 install numpy pandas matplotlib sklearn tensorflow==2.0.0-alpha0 -i https://pypi.doubani ...

  6. 根据jdk1.8源码整理而得，java集合体系（继承、实现关系）图解，超清晰，一看就懂，方便记忆

    一.前言 1. 该关系图是本人根据JDK1.8 源码整理所得,只整理了常用的.常见的集合,并非全部. 2. 整理逻辑: Collection接口下有两个子接口:List 和 Set 接口. Map是独 ...

  7. 020 文件(图片)上传功能---涉及switchhost和Nginx的使用

    文件的上传并不只是在品牌管理中有需求,以后的其它服务也可能需要,因此我们创建一个独立的微服务,专门处理各种上传. 1.搭建模块 (1)创建模块 (2)依赖 我们需要EurekaClient和web依赖 ...

  8. 7. Scala面向对象编程(中级部分)

    7.1 包 7.1.1 看一个应用场景 现在有两个程序员共同开发一个项目,程序员xiaoming希望定义一个类取名Dog,程序员xiaohong也想定一个类也叫Dog,两个程序员还为此吵了起来,该怎么 ...

  9. 【leetcode-22】括号生成

    给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: [ "((()))", "(()())& ...

  10. 用RD,GR,BL三个方法内代码生成一张图片(非原创,我只是完整了代码)

    我公开以下图片的源代码,,是ppm格式的,,自己找到能打开的工具.. (非原创,我加工的代码,可直接执行运行输出,缩略图能看到效果)  这是原博客 http://news.cnblogs.com/n/ ...