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

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. jQuery.ajax(url,[settings])

    概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象. ...

  2. ArcGIS Engine开发之属性查询

    属性查询即基于空间数据的属性数据的查询,通过用户提交SQL语言中的where语句定义的查询条件,对属性数据进行搜索,从而得到查询结果的操作. 相关的类与接口 与属性查询功能相关的类主要有QureyFi ...

  3. 设置这些之后,Google突然可以打开了

    打开的是:https://www.google.com.hk

  4. [原创]Linux-day1

    原创:转发务必注明出处http://www.cnblogs.com/0zcl/p/6077298.html 一.Linux的基本原则 由目的单一的小程序组成:组合小程序完成复杂任务 一切皆文件 尽量避 ...

  5. OpenSceneGraph 编译 error LNK2019:unresolved external symbol 错误

    在编译 OpenSceneGraph 的一个简单示例时, #include <osgViewer/Viewer> #include <osgDB/ReadFile> void ...

  6. mysq l错误Table ‘./mysql/proc’ is marked as crashed and should be repaired

    续上一篇,解决了上一篇中的问题后,启动成功,但是在数据库中操作会存在一些问题,一些操作报一下异常: Table './mysql/proc' is marked as crashed and shou ...

  7. MySQL函数

    MySQL数据库提供了很多函数包括: 数学函数: 字符串函数: 日期和时间函数: 条件判断函数: 系统信息函数: 加密函数: 格式化函数: 一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ...

  8. phpStudy2016 配置多个域名期间遇到的问题

    第一步 在C:\Windows\System32\drivers\etc下的hosts文件下添加   第二步   找到Apache 下的httpd.conf  文件 打开,去掉171行前边的#   第 ...

  9. chkconfig

    chkconfig的级别: 0:关机 1:单用户模式 2:无网络支持的多用户模式 3:有网络支持的多用户模式 4:保留,未使用 5:有网络支持有X-Windows(图形界面)支持的多用户模式 6:重新 ...

  10. WPF 自定义DateControl DateTime控件

    自定义日期控件,月份选择.如下是日期的一些效果图. 具体的样式.颜色可以根据下面的代码,自己调节即可    1.日期控件的界面 <UserControl x:Class="WpfApp ...