例题:事件捕获,用于解决拖拽,鼠标容易出了div这种麻烦事,用于解决鼠标帧频比事件监听帧频要快的麻烦事,就像刚才鼠标挪出去之后拿document解决的
也可以不这么解决还有一种方法也叫事件捕获,仅在ie中好用,div.setCapture(),用完这个方法之后,div会捕获页面上发生的所有的事件硬捕获到自己的身上,这个方法会将任何地方发生的任何事件发生在自己身上
用完了就赶快释放div.releaseCapture()
111.事件分类(在写事件的时候根本没有小驼峰式大驼峰式,只有罗列出来就行)
1.鼠标事件(click = on + down)
click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、 mouseenter mouseleave
例1:click、mousedown、mouseup
var div = document.getElementsByTagName('div')[0];
div.onclick = function(){
console.log('click');
}
div.onmousedown = function(){
console.log('onmousedown');
}13:31 2018/9/9
div.onmouseup = function(){
console.log('onmouseup');
}
//点击div 顺序 :down up click 和事件的绑定顺序无关
例2:contextmenu,右键菜单事件,唯一的用处就是右键取消菜单事件,不用它来监听事件
例3:mouseover,mouseout,mouseenter,mouseleave
下例,原本div是红色的,利用over和out,当鼠标挪进div后,颜色变为粉色,挪出后,颜色变为黑色,同理html5中的enter和leave和那两个一样。
<div style="height:200px;width:200px;background-color:red;position:absolute;left:0;top:0">
var div = document.getElementsByTagName('div')[0];
div.onmouseover = function(){
div.style.background = "pink";
}
div.onmouseout = function(){
div.style.background = "black";
}
2.
(1)用button来区分鼠标的按键,0/1/2
(2) DOM3标准规定:click事件只能监听左键,只能通过mousedown 和 mouseup来判断鼠标键
(3)能区分左右键的只有两个事件mouseup和mousedown,其他的事件像click什么的都不可能
例1:事件e中的button属性记录着鼠标点的是左键还是右键,左键是0,右键是2,滚动轮是1
div.onmousedown = function(e){
div.onclick = function(e){
console.log(e);
}
3. 如何解决mousedown和click的冲突
例1:假定一个一个小方块是一个a标签,可以对它进行两个操作,一个是点击跳转页面,一个是正常拖拽,要求实现拖拽和点击是两个事件
解题思路:利用时间差
var div = document.getElementsByTagName('div')[0];
var firstTime = 0;
var lastTime = 0;
var key = false;
div.onmousedown = function(){
firstTime = new Date().getTime();
}
div.onmouseup = function(){
lastTime = new Date().getTime();
if(lastTime - firstTime < 300){ //小于300证明是点击,执行onclick中的事件
key = true;
}
}
div.onclick = function(){
if(key){
console.log('click'); //每次执行后再将key置为false,以便下次判断
key = false;
}
}
112.事件练习
1.拖拽应用: 应用 mousedown mousemove mouseup
2.随机移动的方块: mouseover
113.事件分类(接111)
1.键盘事件:keydown keyup keypress(down > press >up)
注意:移动端onmousedown就不好使了,移动端就用toushstart toushmove toushend <==>和那个down move up一样的
(1)当连续按键盘时不抬起时,只有down和press没有up,所以由此延伸到游戏,当放技能时候,应该把事件绑定在keydown身上
例1:
document.onkeypress = function(e){
console.log(e);
}
document.onkeydown = function(e){
console.log(e);
}
//当在页面中打a的时候,keydown打印的e中的charCode值为0,keyup打印的e中的charCode值为97(a的ASCII码)
//当在页面中打键盘中的上下左右键时,每隔只出现了一个e并且是keydown打印出的e,并且这些控制键像shift等打印的都是keydown,keypress不见了
2.keydown和keypress的区别
(1)keydown能够监测到所有的键盘类按键的事件除了fn以外,fn是辅助按键不算键盘类事件
但是keydown属性有个缺点,监测字符类的按键是不准的,大写的a和小写的a在e中charCode都是0,which都是65,
而keypress,小写的a,charCode和which是97,大写的a,charCode和which是65,
keypress只能够监测到字符类按键,ASCII中有的字符
(2)keydown和keypress怎样配合使用
所以监测字符类按键并且想区分大小写的话,就用keypress
如果操作类按键就用keydown,并且每个按键which(不是ASCII码)值是不一样的,但是有一点又不好,就是123...数字按键which对应的值不是ASCII的值,所以就得一个一个的测
(3)总结:keydown 可以响应任意键盘按键,keypress只可以相应字符类键盘按键 keypress返回ASCII码,可以转换成相应字符
例1:String上面有一个静态方法,可以将unicode编码转换为相应的字符(unicode码包含ASCII码)
document.onkeypress = function(e){
console.log(String.fromCharCode(e.charCode));
}
//按a显示a,按b显示b,按shift+a显示A等等
114.事件分类(接111)
1.文本类操作事件:input,focus,blur,change
(1)input
例1:
var input = document.getElementsByTagName('input')[0];
input.oninput = function(e){
console.log(this.value);
}
//但凡input中内容有变化都会触发这个input事件
(2)change:比较的是聚焦和失去焦点两个状态是否发生改变,发生改变,那么触发事件,不改变,不触发事件
(3)focus和blur
例1:当聚焦显示为空,当失去焦点显示请指示
<input type="text" value="请输入用户名" οnfοcus="this.value=''" οnblur="this.value='请指示'">
例2:
<input type="text" value="请输入用户名" οnfοcus="if(this.value=='请输入用户名'){this.value=''}" οnblur="if(this.value==''){this.value='请输入用户名'}">
例3:这个有点问题,就是要是输入“请输入用户名”,点外部之后再聚焦,里面的内容就没了,例如58同城
<input type="text" value="请输入用户名" color="#999" οnfοcus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" οnblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}">
115.事件分类(接111)
1.窗体操作类(window上的事件)
2.scroll load
例1:正常javascript标签是读到javascript时就阻断页面,所以将javascript写在最下面
但是,利用onload可以将div写在下面,这个虽然没有问题,但是一般不用,因为它是最慢的,而且没有意义。
<body>
<!--<div style="height: 100px; width: 100px; background-color: red;"></div>-->
<!--<div style="background-color:red;height:100px;width:100px;"></div>-->
<script type="text/javascript">
window.onload = function(){
var div = document.getElementsByTagName('div')[0];
console.log(div);
div.style.height = "100px";
div.style.width = "100px";
div.style.backgroundColor = "red";
}
</script>
<div></div>
</body>
//部分代码省略
浏览器有时间线的问题,首先我们输入网址的时候,先将这个页面请求过来,再一行一行加载。
在一行一行解析的过程中,html和css是并行一起解析的,html解析的时候会形成domTree的东西,css会形成cssTree,就像这种
<div>
<span></span>
<strong></strong>
</div>
上面的代码html部分就会形成下面的树domTree(二叉树)
document
html
head body
div
strong span
同样css也会有一个对应的树,然后两颗大树拼在一起,就会形成渲染树renderTree,渲染树大致就是,假如domTree中的div标签,渲染树中就有这个div多高多宽什么样的等
然后才开始绘制页面
那么问:什么时候算是把一个节点挂到这个树上面去呢,是把图片下载完了,再把img挂到树上去,还是读到img标签就挂上去呢?
答:不着急下载,系统读到img标签了,就会挂到树上去,这就叫代码的解析。
所以是先解析再下载,先把这个东西解析,再同时开启一个线程,异步的去下载这个东西
那么:
<div></div>
<span></span>
<img src="xxx.solarge" alt="">
<script type="text/javascript">
</script>
把javascript放在这些下面好处就是,这些东西刚刚解析完毕之后,javascript就可以操作他们了,没必要等他们下载完之后,所以更快一点
而window触发load事件之后,那么就要等到这个页面所有的图片,文字等信息全部下载完之后,也就是,这个页面所有自动的过程全部完事,就等着用户交互体验了,window.onload才能执行,所以效率是最低的
但是也有好处:就是广告,等到页面所有加载完事了,再显示广告,但是决对不可以将主程序放在window.onload中
3. 小练习:fixed定位 js兼容版
例1:ie6是position的值没有fixed,那么利用js可以给他实现一个fixed定位的效果,当滚动轮滚过多少距离,将那个距离加到absolute(相对于文档定位)上,就可以实现fixed
4.二维数组:
例1: var arr = [[1,2],[11,22]];