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 ...
随机推荐
- 关于mysql数据库在输入password后，滴的一声直接退出界面的解决的方法（具体办法）
前一阵子.因为敲代码要用到数据库,便在本子上下载了一个,却出现非常多小问题(自己的台式机却没有该问题,可能是本人的本子太渣了吧),纠结了好一阵,回头想想.发现问题,分析问题,解决这个问题,不就是我们的 ...
- PHP CLI模式下的多进程应用分析
PHP在非常多时候不适合做常驻的SHELL进程, 他没有专门的gc例程, 也没有有效的内存管理途径. 所以假设用PHP做常驻SHELL, 你会常常被内存耗尽导致abort而unhappy 并且, 假设 ...
- 深入分析JavaWeb Item23 -- jsp自己定义标签开发入门
一.自己定义标签的作用 自己定义标签主要用于移除Jsp页面中的java代码. 二.自己定义标签开发和使用 2.1.自己定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 要编写一 ...
- Android 将HTML5封装成android应用APK文件的几种方法
越来越多的开发者热衷于使用html5+JavaScript开发移动Web App.不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数.一方面,用户在使用习惯上,不喜 ...
- python3 requests 模块 json参数和data参数区别
json 表示使用application/json方式提交请求 data 使用application/form-urlencode方式提交请求
- 顶级、块级、内联,html元素的三大分类
学习html后, 你会了解一些基本的html元素(Element), 如p, h1~h6, br, div, li, ul, img等.如果将这些元素细分, 又可以分别归为顶级(top-level)元 ...
- 洛谷 P1852 奇怪的字符串
P1852 奇怪的字符串 题目描述 输入两个01串,输出它们的最长公共子序列的长度 输入输出格式 输入格式: 一行,两个01串 输出格式: 最长公共子序列的长度 输入输出样例 输入样例#1: 复制 0 ...
- [React] Compound Component (React.Children.map & React.cloneElement)
Imaging you are building a Tabs component. If looks like: <Tabs> <TabList> <Tab> o ...
- Android开发数据库之第三方ORM框架（GreenDao）
移动APP追求追求功能实现的同一时候,用户体验很重要.開始APP的同一时候.要时刻的切换开发人员的角色,如你开发的时候.是 站在APP的开发角色,处于生产者的位置:当你測试的时候.你应该把自己放在用户 ...
- 停止使用域名 boypay.net
停止使用域名 boypay.net boypay.net 这个域名当时注册的时候打算开发网店--" 情侣商城",表面意思是 "男生支付",情侣和婚姻是人生中必须 ...