• jquery简写事件(补)


    为了使开发者更加方便的绑定事件,jQuery 封装了常用的事件以便节约更多的代码。我 们称它为简写事件!

    简写事件绑定方法

     方法名                          触发条件                描述

    click(fn)                       鼠标               触发每一个匹配元素的click(单击)事件

    dblclick(fn)                   鼠标               触发每一个匹配元素的dblclick(双击)事件

    mousedown(fn)            鼠标               触发每一个匹配元素的mousedown(点击后)事件

    mouseup(fn)                鼠标               触发每一个匹配元素的mouseup(点击弹起)事件

    mouseover(fn)             鼠标               触发每一个匹配元素的mouseover(鼠标移入)事件

    mouseout(fn)               鼠标               触发每一个匹配元素的mouseout(鼠标移出)事件

    mousemove(fn)            鼠标               触发每一个匹配元素的mousemove(鼠标移动)事件

    keydown(fn)                 键盘               触发每一个匹配元素的keydown(键盘按下)事件

    keyup(fn)                     键盘               触发每一个匹配元素的keyup(键盘按下弹起)事件

    unload(fn)                    文档               当卸载本页面时绑定一个要执行的函数

    resize(fn)                     文档                触发每一个匹配元素的resize(文档改变大小)事件

    change(fn)                   表单                触发每一个匹配元素的change(值改变)事件

    submit(fn)                    表单                触发每一个匹配元素的submit(表单提交)事件 

    ......


    注意:这里封装的大部分方法都比较好理解,我们没必要一一演示确认,重点看几个需 要注意区分的简写方法。

    .mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么 jQuery 还封装了另外 一组:.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有 什么区别呢?手册上的说明是:.mouseenter()和.mouseleave()这组穿过子元素不会触发, 而.mouseover()和.mouseout()则会触发。

    //HTML 页面设置
    <div style="200px;height:200px;background:green;">
    <p style="100px;height:100px;background:red;"></p>
    </div>
    <strong></strong>

    //mouseover 移入
    $('div').mouseover(function(){ //移入 div 会触发,移入 p 再触发
    $('strong').html(function(index,value){
    returnvalue+'1';
    });
    });

    //mouseenter 穿过
    $('div').mouseenter(function(){ //穿过 div 或者 p
    $('strong').html(function(index,value){ //在这个区域只触发一次
    return value+'1';
    });
    });

    //mouseout 移出
    $('div').mouseout(function(){ //移出 p 会触发,移出 div 再触发
    $('strong').html(function(index,value){
    return value+'1';
    });
    });

    //mouseleave 穿出
    $('div').mouseleave(function(){ //移出整个 div 区域触发一次
    $('strong').html(function(index,value){
    return value+'1';
    });
    });

    //.keydown()、.keyup()返回的是键码,而.keypress()返回的是字符编码。
    $('input').keydown(function(e){
    alert(e.keyCode); //按下 a 返回 65
    });

    $('input').keypress(function(e){
    alert(e.charCode); //按下 a 返回 97
    });

    注意:e.keyCode 和 e.charCode 在两种事件互换也会产生不同的效果,除了字符还有一 些非字符键的区别。更多详情可以了解 JavaScript 事件处理那章。

    .focus()和.blur()分别表示光标激活和丢失,事件触发时机是当前元素。而.focusin() 和.focusout()也表示光标激活和丢失,但事件触发时机可以是子元素。

    //HTML 部分

    <div style="200px;height:200px;background:red;">
    <input type="text"value=""/>
    </div>
    <strong></strong>

    //focus 光标激活
    $('input').focus(function(){ //当前元素触发
    $('strong').html('123');
    });

    //focusin 光标激活
    $('div').focusin(function(){ //绑定的是 div 元素,子类 input 触发
    $('strong').html('123');
    });

    注意:.blur()和.focusout()表示光标丢失,和激活类似,一个必须当前元素触发,一个可 以是子元素触发。

  • 相关阅读:
    <魔域>按键精灵脚本
    Windows下Java环境变量配置
    JDBC简单范例
    迅雷高速通道被举报无法下载问题
    wifi入侵思路
    连接WiFi工具类
    ActionBar+Fragment实现顶部标签页
    Fragment的基本用法
    opencv-python识别人脸
    string.Join 拼接在sql中特殊处理
  • 原文地址:https://www.cnblogs.com/No-nonsense/p/5068060.html
Copyright © 2020-2023  润新知