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 ...
随机推荐
- es67
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- POJ 2138 最长路
思路: 如果j能由i得到 则i向j连一条边 答案就是最长路的末节点所代表的string //By SiriusRen #include <cstdio> #include <cstr ...
- linux的vi或vim文件时，怎样消除刚才查找字符串的高亮？
有时候,自己在通过/查找字符串时,会出现: 但是呢,当你保存,再次进入还是会出现这么花的高亮显示,很令人苦恼. 解决办法 随便,输入没有的字符串,即可解决. 如下 /sssssssssssssssss ...
- c# array arraylist 泛型list
1 array 数组 是存储相同类型元素的固定大小的数据的顺序集合.在内存中是连续存储的,所以索引速度非常快,而且赋值和修改元素也非常简单. //定义字符串数组 大小为3 string[] str1 ...
- 【Django】信号调度
Django中提供了"信号调度",用于在框架执行操作时解耦. 通俗来讲,就是在某些动作发生时,信号允许特定的发送者去提醒一些接受者. * Django内置信号:** Model s ...
- Tomcat之——配置项目有虚拟路径
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47024863 非常easy,在Tomcat的Server.xml文件里的Host节 ...
- Linux下进程终止过程
不管是在什么系统中,当进程终止之后.系统都须要释放进程占有的资源. 否则.系统资源会被耗尽. 以下将具体说明Linux系统中,进程终止的过程. 进程终止方式 linux的进程终止方式有8种,当中5种是 ...
- 【LeetCode-面试算法经典-Java实现】【144-Binary Tree Preorder Traversal（二叉树非递归前序遍历）】
[144-Binary Tree Preorder Traversal(二叉树非递归前序遍历)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a bina ...
- CodeForce 424C Magic Formulas
这个题就是求出给的公式的结果. 仅仅要知道异或运算满足交换律跟结合律即可了.之后就是化简公式. #include<map> #include<string> #include& ...
- 前6名免费DNS服务 - 公共DNS服务
前6名免费DNS服务 - 公共DNS服务 谷歌 8.8.8.8,8.8.4.4备份,用户将期望并获得高可用性,如DNSSEC等过滤和安全保护. OpenDNS 现在是Cisco帝国的一部分,主要是20 ...