1. 事件处理

1.1. 绑定事件方式

1)行内绑定

语法: //最常用的使用方式

<元素 事件=”事件处理程序”>

2)动态绑定

//结构+样式+行为分离的页面(html+css+js事件)

语法:

对象.事件=事件处理程序

行内绑定和动态绑定的重要区别:

以上程序是不可用的,点击div时,执行test函数,这时,test中的this表示window对象

因为:

我们定义test函数,实际上相应于在window对象下定义了test属性

test(); —> 相当于 window.test();

所以test函数在执行时,里面的this指向window

“谁”调用了函数,this指向“谁”


<html>
<head>
<script> window.onload=function(){
document.getElementById('btnok').onclick=function(){
alert('hello');
};
//2、动态绑定
document.getElementById('div1').onclick=test;
};
</script>
</head>
<body>
<input type='button' id='btnok' value='确定'> <script>
function test(){
this.style.color='red';
}
</script>
<div id='div1'>javascript</div> </body>
</html>

以上程序是可用的,对象.onclick 在执行test函数时,test函数指向div1元素

1.2 事件监听

我们能不能为一个dom对象的同一个事件指定多个事件处理程序?

例1:通过这题,我们发现,如果为一个对象的同一个事件指定多个事件处理程序,那么,后面指定的程序会覆盖前面的。

<body>
<script>
function fn1(){
alert('first');
}
function fn2(){
alert('second');
}
window.onload=function(){
document.getElementById('div1').onclick=fn1;
document.getElementById('div1').onclick=fn2;
};
</script>
<div id='div1'>test</div>
</body>

如果我们想为一个对象的某个事件指定多个事件处理,可以考虑使用事件监听

事件监听语法:

IE:
attachEvent(type,callback)
type:事件名 如:onclick、onsubmit、onchange等
callback:事件处理程序 基于W3C模型:
addEventListener(type,callback,capture)
Type:事件名 ,没有“on”前缀 如:click、submit、change
Callback:事件处理程序
Capture:事件模型 (可选参数) (冒泡模型、捕捉模型) true:捕捉模型
false:冒泡模型 (默认值)

代码示例:

<body>
<script>
function fn1(){
alert('first');
}
function fn2(){
alert('second');
}
window.onload=function(){
document.getElementById('div1').attachEvent('onclick',fn1);
document.getElementById('div1').attachEvent('onclick',fn2);
};
</script>
<div id='div1'>test</div>
</body>

W3c:

<body>
<script>
function fn1(){
alert('first');
}
function fn2(){
alert('second');
}
window.onload=function(){
document.getElementById('div1').addEventListener('click',fn1);
document.getElementById('div1').addEventListener('click',fn2);
};
</script>
<div id='div1'>test</div>
</body>
总结:

IE和W3C事件监听的不同:

  1. 监听方法不同:IE attachEvent 、W3C addEventListener
  2. 监听参数不同:IE 没有模型参数、W3C有模型参数
  3. 触发顺序:IE 8及以下的浏览器触发时是先绑定、后触发 W3C浏览器是先绑定、先触发
  4. 事件名称不同:IE事件需要”on”前缀,W3C不需要’on’前缀

解决事件监听的兼容性问题:

2. 事件流

2.1 事件模型

事件模型(事件的触发顺序)分为两种:Body嵌套div1,div1嵌套div2,div2嵌套div3

1)冒泡模型

2)捕捉模型

目前,IE只支持冒泡模型

冒泡模型

事件冒泡是指事件响应时会上水冒一样上升至最顶级元素

<div>
<div>
<div>click</div>
</div>
<div>

  <style>
#div1{width:400px;height:400px;background:red}
#div2{width:300px;height:300px;background:green}
#div3{width:200px;height:200px;background:blue}
</style>
</head>
<body>
<script language='javascript' src='public.js'></script>
<script>
window.onload=function(){
document.getElementById('div1').onclick=function(){
alert('div1');
};
document.getElementById('div2').onclick=function(event){
alert('div2');
stopBubble(event);
};
document.getElementById('div3').onclick=function(){
alert('div3'); };
};
</script>
<div id='div1'>
<div id='div2'>
<div id='div3'>
</div>
</div>
</div>
</body>

大多数情况下,程序需要对事件冒泡进行取消?

取消事件冒泡

IE:

window.event.cancelBubble=true;

W3C:

function(event){
event.stopPropagation();
}

解决兼容性问题: public.js

3. 事件对象

1)什么是事件对象

事件对象就是事件发生时系统自动产生的对象,这个对象包含了这个事件发生时所有的信息

如:鼠标移动,那么,鼠标所在的横、纵坐标就保存到了这个事件对象中

2)如何获得事件对象

IE9及以上版本、W3C:

  • function(event){}

IE8及以下:

  • window.event

默认行为





有些html元素,有自己的行为,如,提交按钮、超链接

有些时候,我们需要对默认行为进行取消,如表单按钮点击时,用户资料添写不完整,我们这时需要将按钮的默认行为取消。

代码示例:

解决兼容性:

-4. 事件类型

Web 浏览器中可能发生的事件有很多类型,常用的事件流

  • onLoad :页面加载完毕后 一般用于body元素
  • onUnload :页面关闭后 一般用于body元素
  • onBlur :失去焦点
  • onFocus :获得焦点
  • onClick :点击
  • onMouseOver :当鼠标经过时
  • onMouseOut :当鼠标离开时
  • onMouseDown :当鼠标按下时
  • onMouseUp :当鼠标抬起时
  • onMouseMove :当鼠标移动时
  • onChange :当内容改变时
  • onSelect :当内容被选中时
  • onkeypress :当键盘点击时
  • onkeydown :当键盘按下时
  • onkeyup :当键盘抬起时
    • 触发顺序:onkeydown、onkeypress、onkeyup
    • Onkeypress事件无法捕获功能键
  • onSubmit :当表单提交时
  • onReset :当表单重置时
    1. 事件委托(事件代理)

对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡,只指定一个事

件处理程序,就可以管理某一类型的所有事件。例如,click 事件会一直冒泡到document 层次。也就

是说,我们可以为整个页面指定一个onclick 事件处理程序,而不必给每个可单击的元素分别添加事

件处理程序。以下面的HTML 代码为例。

<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say hi</li>
</ul>

其中包含3 个被单击后会执行操作的列表项。按照传统的做法,需要像下面这样为它们添加3 个事

件处理程序。

var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
EventUtil.addHandler(item1, "click", function(event){
location.href = "http://www.wrox.com";
});
EventUtil.addHandler(item2, "click", function(event){
document.title = "I changed the document's title";
});
EventUtil.addHandler(item3, "click", function(event){
alert("hi");
});

如果在一个复杂的Web 应用程序中,对所有可单击的元素都采用这种方式,那么结果就会有数不清的代码用于添加事件处理程序。此时,可以利用事件委托技术解决这个问题。使用事件委托,只需在DOM 树中尽量最高的层次上添加一个事件处理程序,如下面的例子所示。

var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "doSomething":
document.title = "I changed the document's title";
break;
case "goSomewhere":
location.href = "http://www.wrox.com";
break;
case "sayHi":
alert("hi");
break;
}
});

如果可行的话,也可以考虑为document 对象添加一个事件处理程序,用以处理页面上发生的某种特定类型的事件。

版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226

javascript 事件编程之事件(流,处理,对象,类型)的更多相关文章

  1. JavaScript总体的介绍【JavaScript介绍、定义函数方式、对象类型、变量类型】

    什么是JavaScript? 我们可以从几个方面去说JavaScript是什么: 基于对象 javaScript中内置了许多对象供我们使用[String.Date.Array]等等 javaScrip ...

  2. JavaScript进阶内容笔记1:各种对象类型判断

    该文章主要用来介绍JavaScript中常用的一些对象检测判断方法,整理资源来自书本和网络,如有错误或说明不详之处,望评论提出,本菜定提名感谢……(本文章知识比较基础,大牛请提些意见再绕道,三克油^_ ...

  3. 大数据计算引擎之Flink Flink CEP复杂事件编程

    原文地址: 大数据计算引擎之Flink Flink CEP复杂事件编程 复杂事件编程(CEP)是一种基于流处理的技术,将系统数据看作不同类型的事件,通过分析事件之间的关系,建立不同的时事件系序列库,并 ...

  4. JavaScript 函数式编程读书笔记2

    概述 这是我读<javascript函数式编程>的读书笔记,供以后开发时参考,相信对其他人也有用. 说明:虽然本书是基于underscore.js库写的,但是其中的理念和思考方式都讲的很好 ...

  5. JavaScript的事件概述以及事件对象,事件流

    事件处理程序 JavaScript 事件对象是由访问 Web 页面的用户引起的一系列操作,例如:用户点击页面上的某个按钮或者鼠标移动到页面的某个图片上而产生一系列的互动的反馈. 我们通过为指定事件绑定 ...

  6. Javascript高级编程学习笔记(59)—— 事件(3)事件对象

    事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将eve ...

  7. Javascript高级编程学习笔记(57)—— 事件(1)事件流

    事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...

  8. JavaScript的BOM编程,事件-第4章

    目标 BOM编程 window和document对象 window对象的属性和方法 document对象的属性和方法 JavaScript中对象的分类 浏览器对象:window对象 window对象, ...

  9. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

随机推荐

  1. Linux性能监测:监测目的与工具

    Linux性能监测:监测目的与工具介绍 系统优化是一项复杂.繁琐.长期的工作,优化前需要监测.采集.测试.评估,优化后也需要测试.采集.评估.监测,而且是一个长期和持续的过程,不是说现在优化了,测试了 ...

  2. angular4 ionic3 app

    对于angular系列来说,从2到4仅仅是版本号的变更,绝大部分都是兼容的.  如果按照规范编写代码,一般来说是没有问题的. 学习angular4     快速入门参考  https://www.an ...

  3. 【大前端攻城狮之路】JavaScript函数式编程

    转眼之间已入五月,自己毕业也马上有三年了.大学计算机系的同学大多都在北京混迹,大家为了升职加薪,娶媳妇买房,熬夜加班跟上线,出差pk脑残客户.同学聚会时有不少兄弟已经体重飙升,开始关注13号地铁线上铺 ...

  4. word search(二维数组中查找单词(匹配字符串))

    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...

  5. oracle to_date 函数

    update pamsodt0p10 set cursysdate =  to_date('2014-12-29 00:00:00','yyyy-mm-dd hh24:mi:ss') where cu ...

  6. Oracle面试过程中常见的二十个问题

    1.冷备份和热备份的不同点以及各自的优点  解答:热备份针对归档模式的数据库,在数据库仍旧处于工作状态时进行备份.而冷备份指在数据库关闭后,进行备份,适用于所有模式的数据库.热备份的优点在于当备份时, ...

  7. SpringBoot配置拦截器

    [配置步骤] 1.为类添加注解@Configuration,配置拦截器 2.继承WebMvcConfigurerAdapter类 3.重写addInterceptors方法,添加需要拦截的请求 @Co ...

  8. Python小游戏之 - 飞机大战美女 !

    用Python写的"飞机大战美女"小游戏 源代码如下: # coding=utf-8 import os import random import pygame # 用一个常量来存 ...

  9. Java面试与回答技巧(1.如何正确的面试)

    在IT行业中,大部分公司很难用有效的方式招到合适的人.直接暴露出来的问题是:・花重金招了一个人,但实际的战斗力还比不上应届毕业生.・招聘了一个知名企业的高管,引入了一些高大上的技术,结果本来稳定的生产 ...

  10. spring的简单入门

    spring是一个轻量级的JavaEE解决方案,是众多优秀设计模式的整合.spring的核心是:(工厂)容器 1.设计模式:解决一些特定问题的经典代码.共有23中设计模式(工厂,单例,代理,适配,装饰 ...