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 ...
随机推荐
- hdu1078 FatMouse and Cheese(记忆化搜索)
转载请注明出处:http://blog.csdn.net/u012860063 题目链接:pid=1078" target="_blank">http://acm. ...
- Python 数据结构与算法 —— 哈弗曼树
1. 从扩充二叉树到哈弗曼树 扩充二叉树:对二叉树 T,加入足够多的新叶节点(而不是任意),使 T 的原有结点都变成度数为 2 的分支节点,得到的二叉树称为 T 的扩充二叉树. 对于扩充二叉树而言, ...
- POJ 2226 二分图最小覆盖
题意: 思路: 把横着的连通块放在一个集合 竖着的放在一个集合 如果有交 就连边 求最小覆盖即可 (数值上等于最大匹配) //By SiriusRen #include <cstdio> ...
- WPF MVVM架构 EF、WCF、IOC 设计示例经典
概要 该演示项目利用WPF应用程序构建的MVVM架构示例, 运用了Unity容器接口注入, MVVM的经典设计, 后台利用的EF+WCF. 后台实现: 从数据库生成的emdx 结合上下文进行数据交互, ...
- HTML中行内元素与块级元素有哪些及区别
二.行内元素与块级元素有什么不同? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示. 通过样式控制,它们可以相互转换. 1.尺寸-块级元素和行内元素之间的一个重要的不同 ...
- Android之——短信的备份与还原
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47091281 眼下,Android手机中的一些软件能够实现手机短信的备份与还原操作 ...
- Spring有用功能--Profile、WebService、缓存、消息、ORM
本篇介绍一些Spring与其它框架结合的有用功能,包含:Apache CXF WebService框架.Redis缓存.RabbitMQ消息.MyBatis框架. 另外对于Profile,也是Spri ...
- 程序猿的量化交易之路（14）--Cointrader数据表（2）
Cointrader表结构 转载须注明出处:http://blog.csdn.net/minimicall?viewmode=contents,http://cloudtrader.top 设置(se ...
- Android自己定义圆角ImageView 支持网络图片
先看下效果图 我们再来看一张CSDN的圆角图片 从布局能够看出csdn app 的头像也是圆角的Image,但能够看到.有明显的毛刺感.不知道是csdn 程序猿的疏忽还是 我手机的问题,本人手机(小米 ...
- spinner -样式实现
这里主要是在theme中实现spinner的样式,如下 <style name="Theme.Funui" parent="Theme.Holo.Light&qu ...