常用到的一些事件
带着没事儿干自己整理了一些经常用到的事件,有些东西不去看还真的会忘掉想不起来
鼠标移动
document.onmousemove=function(){
}
页面滚动事件
window.onscroll=function(){
}
autofocus 自动获取光标
有一个事件transitionEnd 当一个效果完成以后触发的一个事件
这个事件有兼容性
需要加一个webkit
移动端
事件类型
touchstart 手指在触摸屏幕时触发
touchmove 手指在屏幕上移动时触发
touched 手指离开屏幕时触发
server.on(‘request，（req,res）=>{
console.log('请求过来了')；
}’)监听请求
demo.onchange = function () {
// console.log('我的内容改变了!');
// }
在jquery里面change事件
document.onmousewheel=function(){
//监听鼠标滚轮的
//不管页面是否滚动，只要滚动鼠标滚轮就会触发
此时的滚轮有次数和兼容问题，所以直接用插件就好了。
fullpage.js 插件
}
// canplay 这个事件会在视频可以播时被触发
video.oncanplay = function () {
}
只是播放进度发生改变就会触发
video.ontimeupdate = function () {
}
.onmouseup = function(e){
// e.button用来区分点的鼠标哪个按键
if(e.button != 2){
return;
}
=2时时右键
谷歌里面左键是0 ，中滑轮是1，右键是2，不管在哪个浏览器，右键都是2，但是左键和中滑轮就不一定了
// 阻止默认右键菜单
div.oncontextmenu = function(){
return false;
}
键盘抬起事件
Obj.onkeyup=function(){
}
鼠标按下事件
my$("title").onmousedown
获取光标
my$("key").onfocus = function () {
失去光标
my$("key").onblur = function () {
页面中嵌入其他页面
<iframe src="http://www.baidu.com" frameborder="0" width="50%" height="50%"></iframe>
<iframe src="http://www.youku.com" frameborder="0" width="50%" height="50%"></iframe>
十六颜色进制
function getColor() {
var str="#";
var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
for(var i=0;i<6;i++){
var num=parseInt(Math.random()*16);
str+=arr[num];
}
return str;
}
//console.log(getColor());
my$("dv").onclick=function () {
this.style.backgroundColor=getColor();
};
my$("dv").onmousedown=function (e) {
//判断用户是否按下了ctrl键
if(e.ctrlKey){//为true就证明用户按下了这个键
console.log("按下了ctrl键+鼠标按下");
}else if(e.altKey){
console.log("按下了alt键+鼠标按下");
}else if(e.shiftKey){
console.log("按下了shift键+鼠标按下");
}else{
console.log("只有鼠标按下了");
}
};
my$("txt").onkeyup=function (e) {
console.log(e.keyCode);
//获取键盘按键的值
if(e.keyCode==65){
my$("dv").style.backgroundColor="red";
}
//alert(e.which);//鼠标键的值
//alert(e.button);
//相对于屏幕的横纵坐标
//console.log(e.screenX+"==="+e.screenY);
};
响应式布局
//当浏览器的宽度发生变化,就获取浏览器(页面可视区域的宽度)
function getClient() {
return{
width:window.innerWidth||document.body.clientWidth||document.documentElement.clientWidth||0,
height:window.innerHeight||document.body.clientHeight||document.documentElement.clientHeight||0
}
}
window.onresize=function () {
//console.log(getClient().width);
if(getClient().width>960){
console.log("电脑浏览器页面");
}else if(getClient().width>700){
console.log("平板看电影,就是爽");
}else{
console.log("还是手机看电影爽");
}
};
三大案例
offset系列:
* offsetLeft:元素距离左边的位置
* offsetTop:元素距离上面的位置
* offsetWidth:元素的宽度(有border)
* offsetHeight:元素的高度(同上)
* scroll系列:
* scrollLeft:元素向左滚出去的距离
* scrollTop:元素向上滚出去的距离
* scrollWidth:元素内容实际的宽度
* scrollHeight:元素内容实际的高度
* client系列
* clientX:在可视区域的横坐标
* clientY:在可视区域的纵坐标
* clientWidth:可视区域的宽度
* clientHeight:可视区域的高度
//为同一个元素,注册不同的事件,指向相同的事件处理函数
my$("btn").onclick=f1;
my$("btn").onmouseover=f1;
my$("btn").onmouseout=f1;
function f1(e) {
switch (e.type){
case "click":console.log("哎呀,我已经困了");break;
case "mouseover":this.style.backgroundColor="pink";break;
case "mouseout":this.style.backgroundColor="";break;
}
}
