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 ...
随机推荐
- Unix/Linux环境C编程新手教程(37) shell经常使用命令演练
cat命令 cat命令能够用来查看文件内容. cat [參数] 文件名称. grep-指定文件里搜索指定字符内容. Linux的文件夹或文件. -path '字串' 查找路径名匹配所给字串的全部 ...
- ASP.Net MVC默认目录结构
1.Controllers 保存处理URL请求的Controller类 2.Models 保存操纵业务与数据对象的类 3.Views 保存UI模板页面 4.Scripts 保存Javascript库文 ...
- js ---- 函数防抖
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...
- HTTP -- 请求/响应 结构
一:一个HTTP请求报文由四个部分组成:请求行.请求头部.空行.请求数据. 1.请求行 1.请求方法:GET POST 2.URL字段 3.HTTP版本字段 2.请求头 1.Accept:浏览器可接受 ...
- Linux LiveCD 诞生记
Linux LiveCD 诞生记 650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic ...
- ajax的使用（一）
ajax向服务器异步发送和接受数据,然后用JavaScript解析.Ajax核心规范的名称继承于你用来建立和发送请求的JavaScript对象:XMLHttpRequest.这个规范有两个等级 ...
- LuoguP2774 方格取数问题(最小割)
题目背景 none! 题目描述 在一个有 m*n 个方格的棋盘中,每个方格中有一个正整数.现要从方格中取数,使任意 2 个数所在方格没有公共边,且取出的数的总和最大.试设计一个满足要求的取数算法.对于 ...
- read---读取变量值
read命令从键盘读取变量的值,通常用在shell脚本中与用户进行交互的场合.该命令可以一次读取多个变量的值,变量和输入的值都需要使用空格隔开.在read命令后面,如果没有指定变量名,读取的数据将被自 ...
- 【剑指Offer学习】【面试题49：把字符串转换成整数】
题目:实现一个函数stringToInt,实现把字符串转换成整数这个功能.不能使用atoi或者其它相似的库函数. 题目解析 这看起来是非常easy的题目,实现基本功能 ,大部分人都能用10行之内的代码 ...
- BZOJ2716: [Violet 3]天使玩偶(KD-Tree)
Description Input Output Sample Input 100 100 81 23 27 16 52 58 44 24 25 95 34 2 96 25 8 14 97 50 97 ...