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)
    }
});