經常使用到的一些事件

帶着沒事兒幹本身整理了一些常常用到的事件,有些東西不去看還真的會忘掉想不起來

鼠標移動

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;

    }

}