• JQuery触发事件


    <form action="" method="get" id="form1">
        <input type="text" id="text1" value="abc人"/>
        <input type="button" id="button1" value="button" />
        <img id="img1" src="sdf/sadf"/>
        <img id="img2" src="psu.jpg"/>
        <input type="submit" value="提交"/>
    </form>
    <a href="http://www.126.com">链接</a>
    <script type="text/javascript" src="jquery-1.8.2.js"></script>
    <script type="text/javascript" defer>
    //==============jQuery不支持form元素的reset事件。
    $("#text1").blur(function(){//==============元素失去焦点(非鼠标从元素上移开) a, input, textarea, button, select, label, map, area
        //alert("blur");
    });
    
    $("#text1").change(function(){//==============用户改变域的值 input, textarea, select
        //alert("change");
    });
    
    $("#button1").click(function(){//==============鼠标左键点击某个对象 几乎所有元素
        //alert("click");
    });
    
    $("#button1").dblclick(function(){//==============鼠标左键快速双击某个对象 几乎所有元素
        //alert("dblclick");
    });
    
    $("#img1").error(function(){//==============当元素遇到错误(没有正确载入)时,发生 error 事件。 window, img
        //alert("error");
    });
    
    $("#text1").focus(function(){//==============元素获得焦点(非鼠标移动到元素上) a, input, textarea, button, select, label, map, area
        //alert("focus");
    });
    
    $("#text1").keydown(function(){//==============指定元素获得焦点的时候,某个键盘的键被按下时 几乎所有元素
        //alert("keydown");
    });
    
    $("#button1").keypress(function(){//==============指定元素获得焦点的时候,某个键盘的键被按下或按住 几乎所有元素
        //alert("keypress");
    });
    
    $("#button1").keyup(function(){//==============指定元素获得焦点的时候,某个键盘的键被松开 几乎所有元素
        //alert("keyup");
    });
    
    $("#img2").load(function(){//==============某个页面或图像被完成加载 window, img
        //alert("load");
    });
    
    $("#button1").mousedown(function(){//==============鼠标移到元素上按下任意键 几乎所有元素
        //alert("mousedown");
    });
    
    $("#button1").mouseenter(function(){//当鼠标指针穿过元素时,会发生 mouseenter 事件。与 mouseover 事件不同,在鼠标指针穿过被选元素时,不管有没有穿过其子元素只会触发一次 mouseenter 事件。
        //alert("mouseenter");
    });
    
    $("#button1").mouseleave(function(){//当鼠标指针离开元素时,会发生 mouseleave 事件。与 mouseout 事件不同,在鼠标指针离开被选元素时,不管有没有离开其子元素只会触发一次 mouseleave 事件。
        //alert("mouseleave");
    });
    
    $("#text1").mousemove(function(){//==============只要鼠标移动到指定元素上就不停地触发 几乎所有元素
        //alert("mousemove");
    });
    
    $("#button1").mouseout(function(){//==============鼠标从指定元素上移开,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。 几乎所有元素
        //alert("mouseout");
    });
    
    $("#button1").mouseover(function(){//==============鼠标被移到指定元素之上,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。 几乎所有元素
        //alert("mouseover");
    });
    
    $("#button1").mouseup(function(){//==============鼠标在指定元素上某个鼠标按键被松开 几乎所有元素
        //alert("mouseup");
    });
    
    $(window).resize(function() {//==============窗口或框架被调整尺寸 window, iframe, frame
        //alert("resize");
    });
    
    $(window).scroll(function(){//==============当用户滚动指定的元素时,会发生 scroll 事件。croll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
        //alert("scroll");
    });
    
    $("#text1").select(function(){//==============指定区域内文本被选中任意一个字符触发 document, input, textarea
        //alert("select");
    });
    
    $("#form1").submit(function(){//==============提交按钮被点击 form
        //alert("submit");
    });
    
    $(window).unload(function(){//==============当用户离开页面时,会发生 unload 事件。具体来说,当发生以下情况时,会发出 unload 事件:
        //alert("unload");      //==============点击某个离开页面的链接,在地址栏中键入了新的 URL,使用前进或后退按钮,关闭浏览器,重新加载页面,但测试中谷歌浏览器不好用
    });
    
    
    
    $("#button1").bind('click dblclick mouseover mouseout',function(){//==============bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
        //alert("bind");
    });
    
    $("#button1").one("click",function(){//==============为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。当使用 one() 方法时,每个元素只能运行一次事件处理器函数。但测试只能运行一次无效
        //alert("one");
    });
    
    $("input").live("click",function(){//==============为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
        //alert("live");
    });
    
    $("form").delegate("#button1","click",function(){//==============delegate() 方法为指定的元素的子元素添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。#button1为指定元素的子元素
        //alert("delegate");
    });
    
    
    
    
    //$("input").trigger("select");//==============规定被选元素要触发的事件。//未验证
    
    //$("input").triggerHandler("select");//==============triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作,也不会产生事件冒泡。//未验证
                                          //==============triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素。
    
    //$("input").unbind();//==============unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。ubind() 适用于任何通过 jQuery 附加的事件处理程序。
    
    //$("input").undelegate();//==============undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。
    
    //$("input").die();//==============die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。未测试
    
    
    
    //=========================================================================事件参数属性
    
    $("#button1").mousemove(function(event){
        //alert("X: " + event.pageX + ", Y: " + event.pageY);//==============event.pageX 属性是鼠标指针的位置,相对于文档的左边缘。event.pageY 属性是鼠标指针的位置,相对于文档的上边缘。
    });
    
    $("a").click(function(event){
        //event.preventDefault();//==============preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
        //alert(event.isDefaultPrevented());//==============isDefaultPrevented() 方法返回指定的 event 对象上是否调用了 preventDefault() 方法。
    });
    
    $("input,img").click(function(event){
        //alert(event.target.nodeName);//==============target 属性返回哪个 DOM 元素触发了该事件。
        //alert(this.nodeName);//==============this和event.target有同样效果
    });
    
    $("#button1").click(function(event) {
        //event.result = "a";
        //alert(event.result);//==============result 属性包含由被指定事件触发的事件处理器返回的最后一个值,除非这个值未定义。
    });
    
    $("#button1").click(function(event){
        //alert(event.timeStamp);//timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数。测试不好用
    });
    
    $("#button1").bind('click dblclick mouseover mouseout',function(event){
        //alert(event.type);//type 属性描述触发哪种事件类型。
    });
    
    $("input").keydown(function(event){
        //alert(event.which);//which 属性指示按了哪个键或按钮。返回是一个数值,但小键盘和大键盘同一个数字返回值不一样,返回的应该是键盘按键的索引值
    });
    </script>
  • 相关阅读:
    words you learn through youtube and so on in daily life
    python 随笔
    Zookeeper 指南
    Mac 后台服务
    Elasticsearch 指南
    架构之灰度部署
    架构之CDN缓存
    架构之微服务(zookeeper)
    架构之微服务(etcd)
    架构之微服务设计(Nginx + Upsync)
  • 原文地址:https://www.cnblogs.com/dreamhome/p/2417078.html
Copyright © 2020-2023  润新知