zoukankan      html  css  js  c++  java
  • 5,事件

    推荐的学习资源来自:张子秋http://www.cnblogs.com/zhangziqiu/tag/jQuery%e6%95%99%e7%a8%8b/

    概要:

           jQuery在写事件上比JavaScript方便。至少不必考虑浏览器兼容性问题而用js实现处理多播事件委托的函数了。

    内容:

           一般在用修改属性的方式添加事件,是不好的:

            document.getElementById("testDiv1").onclick = function(event)
            {
                   alert("!!!");
            };

        这种方式的弊端是:

    1. 只能为一个事件绑定一个事件处理函数.  使用"="赋值会把前面为此时间绑定的所有事件处理函数冲掉.

    2. 在事件函数(无论是匿名函数还是绑定的函数)中获取事件对象的方式在不同浏览器中要特殊处理:

    使用jQuery添加事件的好处:

    1. 1.       添加的是多播事件委托.  也就是为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数.
    2. 统一了事件名称. 
      添加多播事件委托时, ie中是事件名称前面有"on". 但是使用bind()函数我们不用区分ie和dom ,  因为内部jQuery已经帮我们统一了事件的名称.
    3. 可以将对象行为全部用脚本控制.

    例子:

          $("#testDiv4").bind("click", showMsg);
          $("#testDiv4").bind("click", function(event) { alert("one"); });
          $("#testDiv4").bind("click", function(event) { alert("two"); });

     

    常用事件:

           Bind(type,[data],fn),one(type,[data],fn)(只一次):

    function show() {

               alert("鼠标移动div");

            }

           $("div").one("mousemove", show);//有几个绑定,几个各执行一次

           $("div").bind("click", function () {alert("点击了") });

                  functionshow(event){

               alert(event.data.idd);

           }

           $("div").bind("click", { idd: "aaa" },show);

                  $("div").bind("click",function () {alert("hehe") });

           Trigger(type,[data]),triggerHandler(type,[data]):

    在程序中触发事件。Trigger默认触发浏览器动作,triggerHandler不会有浏览器默认动作。

                  <buttonid="old">.trigger("focus")</button>

               <buttonid="new">.triggerHandler("focus")</button><br/><br/>

               <input type="text"value="To Be Focused"/>

               <scripttype="text/javascript">

           $("#old").click(function () {

               $("input").trigger("focus");    //会触发三次

           });

           $("#new").click(function () {

               $("input").triggerHandler("focus");//只触发一次

           });

           $("input").focus(function () {$("<span>Focused!</span>")

    .appendTo("body").fadeOut(1000); }); //并在1000毫秒后消失

               </script>

           Unbind([type],[data]):

                  删除绑定事件。

                  .unbind();删除所有绑定事件

                  .unbind(“click”);删除所有单击事件

                  .unbind(show);删除绑定的show函数事件

    快捷事件函数:

           click([fn]):没有数值为触发事件,有值为绑定事件

           Blur([fn]):失去焦点

           Change([fn]):$(“input[type=’text’]”).change(function(){//验证验证码代码});

    Dblclick([fn]):双击

    Error([fn]):

                  $(window).error(function(msg,url,line){jQuery.post("

    js_error_log.

     php",

    msg: msg, url: url, line: line });}); //在服务器端记录错误

           $(window).error(function(){returntrue;})//隐藏错误

           $(“img”).error(function(){$(this).hide();})//隐藏无效图片

    。。。。。。

    交互处理:

           Hover(over,out):

                  Over为鼠标进入时要触发的函数

                  Out为鼠标离开时要出发的函数

           Toggle(fn,fn…..)

                  点击依次触发的函数,直到最后一个,再循环。可以用unbind()删除

    使用jquer事件对象:

           jQuery.event.*;事件对象的获取和事件对象属性的查询。用时参考官方文档。

  • 相关阅读:
    使用正向proxy 连调部署在k8s 中的spring cloud 中的rest服务
    goflow golang 的基于flow的编程库
    gvm golang 的多版本工具
    jvm-profiler 学习试用
    httpdiff http 请求diff 工具
    tengine lua 模块docker 镜像集成
    tengine 支持dubbo 的docker镜像
    openresty ngx.location.capture http2 问题
    systemd 使用rc.local 说明
    revel golang的全栈开发框架
  • 原文地址:https://www.cnblogs.com/yaoge/p/1820176.html
Copyright © 2011-2022 走看看