jq常用事件（on,blur,focus,change）,js/jq等待圖片(頁面)加載完畢事件,js讀取文件

jq常用事件（on,blur,focus,change）

// 方法一（推薦）
$('.box').on( "click",function() {} )
$('.box').on( "click",function(ev) {
    ev.data.aaa   // 跟js事件對象一樣
})

// 方法二
$(".box").click( function(){} )


// 右鍵事件，取消系統默認事件
$('.sup').on('contextmenu' , function(ev) {
    ev.preventDefault();   //取消事件
    或者 return false;  // 取消事件
})


// 事件冒泡：子父級擁有同樣事件，子響應事件會傳播到父級
// 子集點擊事件：

$('.sup').on('contextmenu' , function(ev) {
    ev.stopPropagation();  // 阻止子集事件冒泡
})

$(".btn").on( function () {} )  // 值變化監測事件(input標簽，只要值一變化觸發)
$("#input").blur( function () {} )   // 失去焦點事件
$("#input").focus( function () {} )  // 獲取焦點事件
$("#file").change( function () {} )  // 文件流，值變化觸發事件(只對文件流有用)

 

js/jq等待圖片(頁面)加載完畢事件

jq頁面加載完畢事件
    $(document).ready(function () {
        console.log('xxx')
    })

    一般寫成：
    $(function(){
        console.log('xxx')
    }) 簡寫,可以保證頁面加載完畢,還能保證jq局部變量


js頁面加載完畢事件
    window.onload = function () {}

window.onload = function() {}  加載圖片玩以后執行( 只能加載一個 )
window.load = function() {}  加載圖片玩以后執行( 可以加載多個 )

 

js讀取文件

$("#file").change(function () {
    file = this.files[0];
    reader = new FileReader();  {# 變成src屬性，生成一個讀文件的對象 #}
    reader.readAsDataURL(file);  {# 讀取文件流 #}
    
    {# 等待文件流全部讀取完畢 #}
    reader.onload = function () {
        $('.head_file').attr("src",reader.result)
    }
});