zoukankan      html  css  js  c++  java
  • 第 8 章 基础事件

    一.绑定事件
    在 JavaScript 课程的学习中,我们掌握了很多使用的事件,常用的事件有:click、dblclick、 mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、 keypress、keyup、blur、focus、load、resize、scroll、error。那么,还有更多的事件可以参考 手册中的事件部分。
    jQuery 通过.bind()方法来为元素绑定这些事件。
    可以传递三个参数:bind(type,[data],fn), type 表示一个或多个类型的事件名字符串;[data]是可选的,作为 event.data 属性值传递一个 额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;fn 表示绑定到指 定元素的处理函数。
    //使用点击事件 $('input').bind('click',function(){ //点击按钮后执行匿名函数 alert('点击!'); });
    //普通处理函数 $('input').bind('click',fn); //执行普通函数式无须圆括号 functionfn(){ alert('点击!'); }
    //可以同时绑定多个事件 $('input').bind('mouseoutmouseover', function(){ //移入和移出分别执行一次
    $('div').html(function(index,value){
    returnvalue+'1'; });
    });
    //通过对象键值对绑定多个参数 $('input').bind({ //传递一个对象
    'mouseout':function(){ //事件名的引号可以省略
              alert('移出');
    },
    'mouseover':function(){
            alert('移入');
    }
    });
    //使用 unbind 删除绑定的事件 $('input').unbind(); //删除所有当前元素的事件
    //使用 unbind 参数删除指定类型事件 $('input').unbind('click'); //删除当前元素的 click 事件

    //使用 unbind 参数删除指定处理函数的事件
    functionfn1(){
        alert('点击 1');
    }
    functionfn2(){
       alert('点击 2');
    }
    $('input').bind('click',fn1);
    $('input').bind('click',fn2);
    $('input').unbind('click',fn1); //只删除 fn1 处理函数的事件

    二.简写事件

    方法名 触发条件 描述
    click(fn)             鼠标 触发每一个匹配元素的 click(单击)事件
    dblclick(fn)        鼠标 触发每一个匹配元素的 dblclick(双击)事件
    mousedown(fn) 鼠标 触发每一个匹配元素的 mousedown(点击后)事件
    mouseup(fn)     鼠标 触发每一个匹配元素的 mouseup(点击弹起)事件
    mouseover(fn)  鼠标 触发每一个匹配元素的 mouseover(鼠标移入)事件    穿过子元素会触发
    mouseout(fn)    鼠标 触发每一个匹配元素的 mouseout(鼠标移出)事件      穿过子元素会触发
    mousemove(fn) 鼠标 触发每一个匹配元素的mousemove(鼠标移动)事件
    mouseenter(fn) 鼠标 触发每一个匹配元素的 mouseenter(鼠标穿过)事件  穿过子元素不会触发
    mouseleave(fn) 鼠标 触发每一个匹配元素的 mouseleave(鼠标穿出)事件  穿过子元素不会触发
    keydown(fn)      键盘 触发每一个匹配元素的 keydown(键盘按下)事件       对应的是键码       keyCode
    keyup(fn)          键盘 触发每一个匹配元素的 keyup(键盘按下弹起)事件      对应的是键码       keyCode
    keypress(fn)     键盘 触发每一个匹配元素的 keypress(键盘按下)事件        对应的是字符编码 charCode
    unload(fn)        文档 当卸载本页面时绑定一个要执行的函数
    resize(fn)         文档 触发每一个匹配元素的 resize(文档改变大小)事件
    scroll(fn)          文档 触发每一个匹配元素的 scroll(滚动条拖动)事件
    focus(fn)          表单 触发每一个匹配元素的 focus(焦点激活)事件
    blur(fn)            表单 触发每一个匹配元素的 blur(焦点丢失)事件
    focusin(fn)       表单 触发每一个匹配元素的 focusin(焦点激活)事件
    focusout(fn)     表单 触发每一个匹配元素的 focusout(焦点丢失)事件
    select(fn)         表单 触发每一个匹配元素的 select(文本选定)事件
    change(fn)       表单 触发每一个匹配元素的 change(值改变)事件
    submit(fn)        表单 触发每一个匹配元素的 submit(表单提交)事件

  • 相关阅读:
    webserivice---通过Ajax访问远程天气预报服务
    IDEA Error:java: 未结束的字符串文字
    UML:它是一种支持模型化和软件系统开发的图形化语言
    核心代码之分页
    struts.xml 的 file 报错 解决方式
    Myeclipse buildpath 加server lib (server runtime)
    核心代码之优化查询
    入园新编
    为啥JS中判断对象是否是类的实例推荐使用instanceof而不推荐constructor
    http常考的题目
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/6007187.html
Copyright © 2011-2022 走看看