js-事件1

本课我将讲述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事件方式

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

或者

function play(){

.....

}

</script>

DOM0级事件处理方式：

Object.onclick=function(){

....

}

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

Object.onclick=null;

</script>

DOM2级事件处理方式

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的更多相关文章

dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
什么是JS事件冒泡？
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么 ...
js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
js 事件大全
Js事件大全一般事件事件浏览器支持描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
JS事件
JS事件: 声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event; 所以在下面用到 event 的地方都用 oEvent 代替 1)doucument的 ...
原生js事件和jquery事件的执行顺序问题
场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...
特殊js事件
1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQ ...
js 事件
事件:一般用于浏览器与用户操作进行交互 js事件的三种模型:内联模型.脚本模型.DOM2模型内联模型:事件处理函数是HTML标签的属性 <input type="button&quo ...

随机推荐

Gamma阶段第八次scrum meeting
每日任务内容队员昨日完成任务明日要完成的任务张圆宁 #91 用户体验与优化https://github.com/rRetr0Git/rateMyCourse/issues/91(持续完成) # ...
Hive常见错误
1.root is not allowed to impersonate root 修改etc/hadoop/core-site.xml,增加如下配置: <property> <na ...
Azure DevOps Server (TFS) 修改Git文件大小限制
签入Git的所有文件将永远保留在存储库中,限制大文件签入到代码库,可以增加磁盘使用效率,提高系统备份还原等日常维护的效率. 通过下面的设置,团队项目管理员可以阻止超过特定大小的文件进入存储库.如果推送 ...
python入门之作用域
作用域的分类 1.全局作用域全局可以调用的名字就存在于全局作用域内置名称空间 + 全局名称空间 2.局部作用域局部可以调用的名字就存放于局部作用域局部名称空间 3. global 声明全局变量 ...
javascript 函数的暂停和恢复
javascript 异步编程从来都是一个难题,最开始我们用 callback,但随之触发了回调地狱,于是"发明" Promise 解决 callback 嵌套过深的问题.然而由于 ...
Lab_1：练习2——使用qemu执行并调试lab1中的软件
一.实验内容为了熟悉使用qemu和gdb进行的调试工作,我们进行如下的小练习: (一)从CPU加电后执行的第一条指令开始,单步跟踪BIOS的执行. (二)在初始化位置0x7c00设置实地址断点,测试 ...
Java学习：泛型简介
泛型泛型:是一种未知的数据类型,当我们不知道使用什么数据类型的时候,可以使用泛型泛型也可以看出是一个变量,用来接受数据类型 E e : Element 元素 T t : Type 类型 Array ...
c#十进制转换
1.方法定义 /// <summary> /// 十进制转换 /// </summary> /// <param name="hexChar"> ...
两数相加（C#数据结构和算法练习）
两数相加给出两个非空的链表用来表示两个非负的整数.其中,它们各自的位数是按照逆序的方式存储的,并且它们的每个节点只能存储一位数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表 ...
C# vb .NET读取识别条形码线性条码code39
code39是比较常见的条形码编码规则类型的一种.如何在C#,vb等.NET平台语言里实现快速准确读取该类型条形码呢?答案是使用SharpBarcode! SharpBarcode是C#快速高效.准确 ...

js-事件1

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

随机推荐

热门专题