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、相关知识

js特效:
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事件绑定和鼠标事件注意事项有哪些的更多相关文章

  1. js和jQuery中的事件绑定与普通事件

    普通事件,是指直接对元素进行事件注册,然后触发 而事件绑定是将事件注册到元素上 两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以 ...

  2. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  3. JS中事件绑定函数，事件捕获，事件冒泡

    1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...

  4. 关于js中对事件绑定与普通事件的理解

    普通事件指的是可以用来注册的事件: 事件绑定是指把事件注册到具体的元素之上. 通俗点说: 普通事件:给html元素添加一个特定的属性(如:onclick): 事件绑定:js代码中通过标记(id  ta ...

  5. 学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象

    1.常用的事件: ① onload:页面加载 ② onblur: 失去焦点 onfocus: 获取焦点 ③ onclick:点击 ④ onmouseover:鼠标经过 onmouseout:鼠标离开 ...

  6. vue_事件绑定 v-on _事件修饰符

    事件绑定 v-on 传参的同时,接收事件对象 <button @click="test('111', $evnt)">哈哈</button> 事件修饰符 阻 ...

  7. javascript事件绑定和普通事件的区别

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  8. javascript 的事件绑定和取消事件

    研究fabricjs中发现,它提供canvas.on('mousemove', hh) 来绑定事件, 提供 canvas.off()来取消绑定事件这样的接口,很是方便, 那我们就不妨探究一下内在的实现 ...

  9. javaScript事件（五）事件类型之鼠标事件

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...

随机推荐

  1. jQuery Easy UI ProgressBar（进度条）组件

    ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...

  2. UIButton文字居左显示

    题外话:时间依然过的非常快.不知不觉2015年就过去一半了.感觉自己好像没有大的改变.仅仅能感叹时间飞逝,却不能有所收获. 我从来都不是一个安于现状的人,改变自己的想法从未停止过.我想大多数人都跟我有 ...

  3. Kinect 开发 —— 骨骼追踪 （下）

    基于景深数据的用户交互 骨骼数据中关节点不仅有X,Y值,还有一个深度值 除了使用WPF的3D特性外,在布局系统中可以根据深度值来设定可视化元素的尺寸大小来达到某种程序的立体效果. 下面的例子使用Can ...

  4. CSS 文本样式

    1. 文本样式 text <!--文本颜色color --> .text {color:red;} 2. 文本对齐方式    text-align <style> .text ...

  5. Excel 打开两个单独的页面

    方法: 一.打开一个excel,二."开始-程序-Microsoft Office" 打开一个Microsoft Office,文件打开需要用的文件 三 结果如上图所示

  6. Django模型三

    关联对象操作及多表查询 关联表的数据操作: 一对多: 正向:如果一个模型有外键字段,通过这个模型对外键进行操作叫做正向. 更新: 通过属性赋值 In [1]: from teacher.models ...

  7. PythonOOP面向对象编程1

    什么是对象? 对象是指现实中的物体或实体(拥有一系列变量.函数(方法)的) 什么事面向对象? 把一切看成对象(实例),让对象和对象之间建立关联关系 对象都有什么特征? 属性(名词)实例变量 姓名.年龄 ...

  8. Web开发中,使用表格来展示每个角色对应的权限

    通过表格这种方式,来展示角色和权限之间的关系,挺好的.还有很多场景,都可以用这种方式. 角色权限表 权限 系统管理员 文章管理员 相册管理员 留言管理员 个人信息管理 查看个人信息 √ √ √ √ 编 ...

  9. [Anuglar & NgRx] StoreRouterConnectingModule

    Always treat Router as the source of truth When we use Ngrx, we can see that we will use a "Sto ...

  10. 用openssl生成含有中文信息的证书

    openssl 支持 ASCII 和 UTF-8 两种编码,应该可以制作中文证书. 在生成证书签发申请时,当输入中文则 openssl 报错,这是因为当前输入的字符是 ANSI 本地编码格式,超出了 ...