• jQuery事件处理及实现函数


    1、页面载入完毕响应的事件
    jQuery中的$(documnet).ready()事件
    这个事件是window.onload()注册事件的替代方法,比window.onload()方法更加易用也更加实用,可以
    在DOM载入就绪能够读取并操作时立即调用所绑定的函数,几乎所有的JavaScript都需要在那一刻执行。
    ready(fn); 当DOM载入就绪可以查询及操作时绑定一个要执行的函数
    $(document).ready(function())的缩写形式:
    jQuery(function ($){
    /*可以在这里继续使用$作为别名*/
    });
    另一种缩写形式如下:
    $(function(){
    /*在这里添加你的jQuey处理代码*/
    });

    2、绑定与反绑定事件监听器
    jQuery可以对事件进行多次绑定或者一次性绑定,甚至可以设置反绑定
    绑定事件
    使用绑定函数bind(type,[data],fn),其中事件类型和处理函数为必选参数
    为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数
    $("#firstname").bind(
    "click",
    function(){
    $(this).val("");
    }
    );
    在实际应用中对于比较简单的事件绑定类型,还可以使用一种缩略形式,上面缩略后如下:
    $("#firstname").click(
    function(){
    $(this).val("");
    }
    );
    为处理函数传递参数
    bind(type,[data],fn)
    单击测试按钮对页面上的两个文本框进行填充
    function handler(event){
    $("#firstname").val(event.data.firstname);
    $("#lastname").val(event.data.lastname);
    }
    $("#test").bind(
    "click", {firstname:"Dennis", lastname:"Ji"}, handler
    );

    阻止浏览器默认的行为:
    bind(type,[data],fn)函数在使用的时候还会碰到与浏览器的默认操作冲突的问题,
    //表单提交绑定
    $("form").bind(
    "submit",
    function() {
    alert("你单击了提交按钮, 接着将响应默认动作.");
    });
    弹出对话框后继续执行原来默认的动作,改写后将不会执行
    $("form").bind(
    "submit",
    function() {
    $("#result").html("你单击了提交按钮, 不响应默认动作.");
    return false;
    });
    这在进行用户注册信息检测等功能时特别有用,而且可以有效降低客户端在出错状况下
    和浏览器的交互次数,从而减轻服务器的负担。

    反绑定事件
    所谓反绑定,就是接触与元素绑定的某种事件类型及处理函数,jQuery的反绑定处理函数为unbind([type],[data])。
    如果不希望由此功能的存在,则添加反绑定代码,如下所示:
    绑定click事件
    $("#firstname").bind(
    "click",
    function(){
    $(this).val("");
    }
    );
    反绑定click事件
    $("#test").click(
    function(){
    $("#firstname").unbind();
    }
    );
    unbind()不带任何参数,表明删除所有的绑定时间,如果为unbind("click"),表明只对id为firstname元素的click类型的
    事件进行反绑定,而对其他类型的事件不予理睬。

    一次性的事件绑定
    one(type,[data],fn)

    3、事件触发器
    所谓事件触发器,简单的说就是通过代码来模拟用户的操作动作而实现事件的触发。
    trigger触发事件,对页面上所有匹配的元素触发某一种类型的事件,也可以触发bind()注册的自定义事件
    trigger(type,[data])
    调用方式: $("form").bind(
    "submit",
    function() {
    $("#result").html("你单击了提交按钮, 不响应默认动作.");
    return false;
    });
    $("#test").click(
    function(){
    $("form").trigger("submit");
    }
    );

    trigger附加参数数据,这里调用的是匿名函数
    //trigger传参数
    $("#test").click(
    function(event, para1, para2){
    $("#result").html("传进来的两个参数:<br/><b>"+para1+"<br/>"+para2+"</b>");
    }
    );
    $("#test").trigger(
    "click",
    ["Hello","World!"]
    );
    triggerHandler触发事件
    triggerHandler(type,[data])是一个用户触发事件的函数
    这个方法将会触发指定的事件类型上所有绑定的处理函数,但不会执行浏览器的默认动作,这一点是
    与trigger的区别。

    4、事件的交互处理
    模仿鼠标的悬停
    hover(over,out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法
    #nametip {
    margin:5px;
    padding:5px;
    color: white;
    background-color: green;
    }

    $("#nametip").hide();
    $("#username").hover(
    function(){
    $("#nametip").show();
    },
    function(){
    $("#nametip").hide();
    }
    );

    toggle:多次单击的循环响应
    click()只会发出一种响应,而toggle(fn,fn)可以处理每次单击产生不同的结果。
    toggle(fn,fn)有两个函数,单击了一下匹配的元素,则触发指定的第一个函数,当再次
    单击同一个元素时,将触发指定的第二个函数。也可以用函数类表toggle(fn1,fn2,fn3…)

    5、jQuery内置事件类型
    jQuery内置事件函数用于处理与浏览器、鼠标、键盘以及表单等相关的常用的事件响应。
    如click(),submit等都属于jQuery的内置事件函数
    function() 不带参数的用户模拟用户的操作,无须用户真正执行该动作,即可实现该动作的响应。
    function(fn) 带有参数的事件函数,表示当该事件类型的动作被触发时执行参数中的响应函数。
    jQuery内置事件类型分类:
    浏览器相关事件如,error(fn)、load(fn)、unload(fn)、resize(fn)、scroll(fn)
    表单相关事件如,change(fn)、select(fn)、submint(fn)
    键盘操作相关事件如,keydown(fn)、keypress(fn)、keyup(fn)
    鼠标操作相关事件如,click(fn)、dbclick(fn)、mousedown(fn)、mousemove(fn)、
    mouseout(fn)、mouseover(fn)、mouseup(fn)
    界面显示相关事件blur(fn)、focus(fn)
    前面使用hover()函数实现了鼠标移入移出作不同响应的效果,该效果可以使用鼠标相关操作来实现:
    $("#username").mouseover(
    function(){
    $("#nametip").show();
    }
    ).mouseout(
    function(){
    $("#nametip").hide();
    }
    );
    查看hover()实现的源码,即可以发现,其也是调用mouseover()和mouseout()函数实现的。

  • 相关阅读:
    PHP xml_parser_create_ns() 函数
    PHP xml_parse_into_struct() 函数
    PHP xml_parse() 函数
    PHP xml_get_error_code() 函数
    PHP xml_get_current_line_number() 函数
    文本竖排组合 | text-combine-upright (Writing Modes)
    文本溢出 | text-overflow (Basic User Interface)
    文本渲染 | text-rendering (Scalable Vector Graphics)
    文本最终对齐 | text-align-last (Text)
    文本属性-风格 | text-emphasis-style (Text Decoration)
  • 原文地址:https://www.cnblogs.com/shudonghe/p/2858705.html
Copyright © 2020-2023  润新知