javascript事件操作
这里使用一个图片切换的方法来举例说明,如何通过代码操作事件。
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事件操作的更多相关文章
- 前端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 ...
- 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式
JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...
- Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- 关于编写性能高效的javascript事件的技术
如何能做出高效的web前端程序是我每次做前端开发都会不自觉去考虑的问题.几年前雅虎里牛逼的前端工程师们出了一本关于提升web前端性能的书籍,轰动了整个web开发技术界,让神秘的web前端优化问题成为了 ...
- 总结JavaScript事件机制
JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...
- 【转】关于编写性能高效的javascript事件的技术
原文转自:http://blog.jobbole.com/80170/ 如何能做出高效的web前端程序是我每次做前端开发都会不自觉去考虑的问题.几年前雅虎里牛逼的前端工程师们出了一本关于提升web前端 ...
随机推荐
- jQuery.ajax(url,[settings])
概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象. ...
- ArcGIS Engine开发之属性查询
属性查询即基于空间数据的属性数据的查询,通过用户提交SQL语言中的where语句定义的查询条件,对属性数据进行搜索,从而得到查询结果的操作. 相关的类与接口 与属性查询功能相关的类主要有QureyFi ...
- 设置这些之后,Google突然可以打开了
打开的是:https://www.google.com.hk
- [原创]Linux-day1
原创:转发务必注明出处http://www.cnblogs.com/0zcl/p/6077298.html 一.Linux的基本原则 由目的单一的小程序组成:组合小程序完成复杂任务 一切皆文件 尽量避 ...
- OpenSceneGraph 编译 error LNK2019:unresolved external symbol 错误
在编译 OpenSceneGraph 的一个简单示例时, #include <osgViewer/Viewer> #include <osgDB/ReadFile> void ...
- mysq l错误Table ‘./mysql/proc’ is marked as crashed and should be repaired
续上一篇,解决了上一篇中的问题后,启动成功,但是在数据库中操作会存在一些问题,一些操作报一下异常: Table './mysql/proc' is marked as crashed and shou ...
- MySQL函数
MySQL数据库提供了很多函数包括: 数学函数: 字符串函数: 日期和时间函数: 条件判断函数: 系统信息函数: 加密函数: 格式化函数: 一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ...
- phpStudy2016 配置多个域名期间遇到的问题
第一步 在C:\Windows\System32\drivers\etc下的hosts文件下添加 第二步 找到Apache 下的httpd.conf 文件 打开,去掉171行前边的# 第 ...
- chkconfig
chkconfig的级别: 0:关机 1:单用户模式 2:无网络支持的多用户模式 3:有网络支持的多用户模式 4:保留,未使用 5:有网络支持有X-Windows(图形界面)支持的多用户模式 6:重新 ...
- WPF 自定义DateControl DateTime控件
自定义日期控件,月份选择.如下是日期的一些效果图. 具体的样式.颜色可以根据下面的代码,自己调节即可 1.日期控件的界面 <UserControl x:Class="WpfApp ...