js课程 5-13 js事件绑定和鼠标事件注意事项有哪些
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些
一、总结
一句话总结：js代码的灵魂就是改变标签的属性和样式，就这两种。
1、js触发改的东西是哪两样？
属性和样式
2、js如何让页面用标题显示测试的数据？
document.title
3、循环单击怎么实现（代码优化的思想：灵活）？
如果判断是this.src是a.png就让它变成b.png并不是最好的方式，最好的方式是让i++，来判断i的奇偶，而且前一种在图片发生改变的时候就失效了，后一种并不会，所以第二种方法更加灵活，值得推荐，其实第二种就是代码优化的思想
18 <script>
19 //js特效
20
21 imgobj=document.getElementById('imgid');
22
23 i=0;
24 imgobj.onclick=function(){
25 if(i%2==0){
26 this.src='b.png';
27 }else{
28 this.src='a.png';
29 }
30 i++;
31 }
32 </script>
二、js事件绑定和鼠标事件注意事项有哪些
1、相关知识
1.触发事件
2.属性改变
3.样式改变
绑定事件:
1.标签身上
2.js代码中
鼠标事件:
• onclick
• ondblclick
• onmouseenter
• onmouseleave
• onmousemove
实例:循环单击!
2、代码
鼠标循环单击
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
img{
cursor:pointer;
position: absolute;
top:0px;
left:0px;
}
</style>
</head>
<body>
<img src="a.png" id="imgid">
</body>
<script>
//js特效 imgobj=document.getElementById('imgid'); i=0;
imgobj.onclick=function(){
if(i%2==0){
this.src='b.png';
}else{
this.src='a.png';
}
i++;
}
</script>
</html>
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些的更多相关文章
- js和jQuery中的事件绑定与普通事件
普通事件,是指直接对元素进行事件注册,然后触发 而事件绑定是将事件注册到元素上 两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以 ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- JS中事件绑定函数，事件捕获，事件冒泡
1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...
- 关于js中对事件绑定与普通事件的理解
普通事件指的是可以用来注册的事件: 事件绑定是指把事件注册到具体的元素之上. 通俗点说: 普通事件:给html元素添加一个特定的属性(如:onclick): 事件绑定:js代码中通过标记(id ta ...
- 学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象
1.常用的事件: ① onload:页面加载 ② onblur: 失去焦点 onfocus: 获取焦点 ③ onclick:点击 ④ onmouseover:鼠标经过 onmouseout:鼠标离开 ...
- vue_事件绑定 v-on _事件修饰符
事件绑定 v-on 传参的同时,接收事件对象 <button @click="test('111', $evnt)">哈哈</button> 事件修饰符 阻 ...
- javascript事件绑定和普通事件的区别
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- javascript 的事件绑定和取消事件
研究fabricjs中发现,它提供canvas.on('mousemove', hh) 来绑定事件, 提供 canvas.off()来取消绑定事件这样的接口,很是方便, 那我们就不妨探究一下内在的实现 ...
- javaScript事件（五）事件类型之鼠标事件
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...
随机推荐
- 游戏server之server优化思路
本文仅仅是提供一些游戏server优化思路,当中一些思路是用在不同场合的,不是同个架构的.须要依据应用场景选用合适方式. 本文的引用的文章都是在自己写的在本博客内的.也都是上线开几百个服的成熟项目的. ...
- IsoAlgo3d - IDF/PCF pipeline 3d viewer
IsoAlgo3d - IDF/PCF pipeline 3d viewer eryar@163.com Key Words. IDF, PCF, IsoAlgo, 3D 当前国际主流管道设计软件都可 ...
- geotif格式的波段描述信息探究
作者:朱金灿 来源:http://blog.csdn.net/clever101 有时打开一些geotif文件,可以看到它的波段描述,但是它究竟存储在文件的什么位置呢?今天研究了一下,大致搞清了这个问 ...
- 洛谷——P1137 旅行计划
https://www.luogu.org/problem/show?pid=1137 题目描述 小明要去一个国家旅游.这个国家有N个城市,编号为1-N,并且有M条道路连接着,小明准备从其中一个城市出 ...
- apache wicket 7.X之HelloWorld
Wicket是什么 Wicket一个开发Java Web应用程序框架. 它使得开发web应用程序变得easy而轻松. Wicket利用一个POJO data beans组件使得它能够与不论什么持久层技 ...
- UVa10397_Connect the Campus(最小生成树)(小白书图论专题)
解题报告 题目传送门 题意: 使得学校网络互通的最小花费,一些楼的线路已经有了. 思路: 存在的线路当然全都利用那样花费肯定最小,把存在的线路当成花费0,求最小生成树 #include <ios ...
- ABAP调用外部WebService
TCode:se80 选择 Package,输入我们自己的开发包,后回车 右击 开发包名称,选择菜单 出现创建向导窗体 选择"Service Consumer",点击 继续 选择& ...
- spinner -样式实现
这里主要是在theme中实现spinner的样式,如下 <style name="Theme.Funui" parent="Theme.Holo.Light&qu ...
- golang beego cache
package main import ( "fmt" "github.com/astaxie/beego/cache" "time" ) ...
- Win8.1恢复这台电脑里的6个文件夹
平台:win8.1 问题:网络下载的ghost版8.1,装好后“这台电脑”里没有6个常用的文件夹. 解决:导入下列注册表项即可 Windows Registry Editor Version 5.00 ...