这里使用一个图片切换的方法来举例说明,如何通过代码操作事件。

1 通过html属性处理事件

<img id='avatar1' src="http://7u2gej.com1.z0.glb.clouddn.com/123.png" onmouseover="changeImg(this,event)" onmouseleave="changeImg(this,event)" width="100px" height="100px">

<script>
var myImage = [
"http://7u2gej.com1.z0.glb.clouddn.com/123.png",
"http://7u2gej.com1.z0.glb.clouddn.com/blog%28hui2%29.png"
] function changeImg(that, e) {
if (e.type == "mouseleave") {
that.src = myImage[0]
} else {
that.src = myImage[1]
}
}
</script>

使用Event对象的target属性代替this

<img id='avatar1' src="http://7u2gej.com1.z0.glb.clouddn.com/123.png" onmouseover="changeImg(event)"
onmouseleave="changeImg(event)" width="100px" height="100px"> <script>
var myImage = [
"http://7u2gej.com1.z0.glb.clouddn.com/123.png",
"http://7u2gej.com1.z0.glb.clouddn.com/blog%28hui2%29.png"
]
function changeImg(e) {
var el = e.target if (e.type == "mouseleave") {
el.src = myImage[0]
} else {
el.src = myImage[1]
}
}
</script>

缺点:

  • html与js混很容易混在一起,比较难维护修改
  • 不修改html就不能修改事件处理程序
  • 只能为html代码中出现的元素简历事件处理程序,不能动态创建元素

2 通过对象属性处理事件

对象属性处理事件,可以很好的弥补上面两种方法的缺点。

<img id='avatar' src="http://7u2gej.com1.z0.glb.clouddn.com/123.png" width="100px" height="100px">

<script>
var myImage = [
"http://7u2gej.com1.z0.glb.clouddn.com/123.png",
"http://7u2gej.com1.z0.glb.clouddn.com/blog%28hui2%29.png"
]
function changeImg(e) {
var el = e.target if (e.type == "mouseleave") {
el.src = myImage[0]
} else {
el.src = myImage[1]
}
} //执行事件处理程序时,浏览器会自动给处理函数传递Event对象。
document.getElementById("avatar").onmouseover = changeImg;
document.getElementById("avatar").onmouseleave= changeImg; </script>

3 标准事件模型

3.1 标准方式

通过代码连接到事件的标准方式。并且实际项目中一般都使用这种方法:

<script>
var myImage = [
"http://7u2gej.com1.z0.glb.clouddn.com/123.png",
"http://7u2gej.com1.z0.glb.clouddn.com/blog%28hui2%29.png"
]
var img = document.getElementById("avatar") function chgImgMouseover(e) {
var el = e.target
el.src = myImage[1]
} function chgImgMouseleave(e) {
var el = e.target
el.src = myImage[0]
} //不直接使用每个元素的onmouseover/onmouseleave对象,而是通过addEventListener()注册mouseover/mouseleave事件处理程序
//添加一个事件监听器用来监听mouseover事件
img.addEventListener("mouseover", chgImgMouseover)
img.addEventListener("mouseleave", chgImgMouseleave) </script>
img.removeEventListener("mouseover",chgImgMouseover)      //删除监听mouseover事件的监听器
img.removeEventListener("mouseleave", chgImgMouseleave)

标准事件模型的优点是,可以为一个元素的一个事件注册多个事件监听器,在需要用不同、不相关的函数监听元素上同一个事件时,比较有用。

针对同一个所监听的事件也可以调用多个函数,如下:

//这些函数是按顺序执行的
img.addEventListener("click", funOne)
img.addEventListener("click", funTwo)
img.addEventListener("click", funThree)
img.addEventListener("click", funFour)

3.2 使用匿名函数

<script>
var myImage = [
"http://7u2gej.com1.z0.glb.clouddn.com/123.png",
"http://7u2gej.com1.z0.glb.clouddn.com/blog%28hui2%29.png"
]
var img = document.getElementById("avatar") img.addEventListener("click", function (e) {
var el = e.target
el.src = myImage[1]
e.preventDefault() //取消事件的默认动作
}) </script>

javascript事件操作的更多相关文章

  1. 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍

    昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...

  2. 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  3. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  4. 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  5. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  6. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  7. 关于编写性能高效的javascript事件的技术

    如何能做出高效的web前端程序是我每次做前端开发都会不自觉去考虑的问题.几年前雅虎里牛逼的前端工程师们出了一本关于提升web前端性能的书籍,轰动了整个web开发技术界,让神秘的web前端优化问题成为了 ...

  8. 总结JavaScript事件机制

    JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...

  9. 【转】关于编写性能高效的javascript事件的技术

    原文转自:http://blog.jobbole.com/80170/ 如何能做出高效的web前端程序是我每次做前端开发都会不自觉去考虑的问题.几年前雅虎里牛逼的前端工程师们出了一本关于提升web前端 ...

随机推荐

  1. 原生JS实战:写了个一边玩游戏,一边记JS的API的游戏

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...

  2. 利用NetworkExtension库配置VPN

    VPN简单说就是连接局域网的一个通道.Ios8之后苹果增加了一个VPN的接口NEVPNManager,它可以方便的添加VPN连接. 首先在你的Xcode内,TARGETS->Capabiliti ...

  3. github源码学习之UIImage+YYWebImage

    UIImage+YYWebImage是YYWebImage(https://github.com/ibireme/YYWebImage)中的一个分类,这个分类封装了一些image常用的变化方法,非常值 ...

  4. ubuntu自动执行

    一般先写个sh脚本文件---->要执行的语句写入sh文件----->chromd -x ???.sh增加权限即可 crontab -e * * * * * /home/???.sh */1 ...

  5. 关于bundle install 的一点补充

    在第一次运行bundle install之后,生成了Gemfile.lock文件,里面记录gem的具体版本号,按照官方文档说明,以后运行bundle install就不会再依据Gemfile,而是根据 ...

  6. javascript函数setInterval和setTimeout的使用区别详解

    setTimeout和setInterval的使用 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方 法 实际上,setTimeout和setIn ...

  7. [Hadoop]-从数据去重认识MapReduce

    这学期刚好开了一门大数据的课,就是完完全全简简单单的介绍的那种,然后就接触到这里面最被人熟知的Hadoop了.看了官网的教程[吐槽一下,果然英语还是很重要!],嗯啊,一知半解地搭建了本地和伪分布式的, ...

  8. 微软本月将推Win10 望打破Win8所带来差评影响

    系统妈 据香港“文汇报”7月15日报道,美国电脑巨擘微软13日宣布,新视窗系统10(Windows 10)将于7月29日推出.微软高层迈赫迪在网志表示,届时全球将有13个城市举办特别活动,表扬参与Wi ...

  9. H5页面微信分享和手Q分享设置

    RT: 一. 手Q分享: 如下代码所示:设置好 description,name,image,即可,唯一注意的是image最好是200*200,要不然过小不美观,过大加载太慢 <head> ...

  10. Don't repeat yourself

    今天工作上要测试不同版本mysql在不同系统的速度,学习了怎么源码安装mysql后,就开始敲命令安装和编译执行测试程序. 这么走了两遍后,想起一句话——当一件事重复做三遍后,要考虑把它工具化,自动化. ...