• jQuery 事件方法


     事件方法触发器或添加一个函数到被选元素的事件处理程序。

    bind() 方法

    向 <p> 元素添加一个单击事件:

    $("p").bind("click",function(){
        alert("这个段落被点击了。");
    });
    View Code

    定义和用法

    bind() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。

    自 jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的首选方法。


    语法

    $(selector).bind(event,data,function,map)
    参数描述
    event 必需。规定添加到元素的一个或多个事件。

    由空格分隔多个事件值。必须是有效的事件。
    data 可选。规定传递到函数的额外数据。
    function 必需。规定当事件发生时运行的函数。
    map 规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。

    blur() 方法

    添加函数到 blur 事件。当 <input> 字段失去焦点时发生 blur 事件:

    $("input").blur(function(){
        alert("输入框失去了焦点");
    });
    View Code

    定义和用法

    当元素失去焦点时发生 blur 事件。

    blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数。

    提示:该方法常与 focus() 方法一起使用。


    语法

    为被选元素触发 blur 事件:

    $(selector).blur()

    添加函数到 blur 事件:

    $(selector).blur(function)
    参数描述
    function 可选。规定当 blur 事件发生时运行的函数。

    change() 方法

    当 <input> 字段改变时警报文本:

    $("input").change(function(){
        alert("文本已被修改");
    });
    View Code

    定义和用法

    当元素的值改变时发生 change 事件(仅适用于表单字段)。

    change() 方法触发 change 事件,或规定当发生 change 事件时运行的函数。

    注意:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,change 事件会在元素失去焦点时发


    语法

    触发被选元素的 change 事件:

    $(selector).change()

    添加函数到 change 事件:

    $(selector).change(function)

    参数描述
    function 可选。规定针对被选元素当 change 事件发生时运行的函数。

    click() 方法

    单击 <p> 元素时警报文本:

    $("p").click(function(){
        alert("段落被点击了。");
    });
    View Code

    定义和用法

    当单击元素时,发生 click 事件。

    click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。


    语法

    触发被选元素的 click 事件:

    $(selector).click()

    添加函数到 click 事件:

    $(selector).click(function)
    参数描述
    function 可选。规定当 click 事件发生时运行的函数。

    dbclick() 方法

    双击 <p> 元素时警报文本:

    $("p").dblclick(function(){
        alert("这个段落被双击。");
    });
    View Code

    定义和用法

    当双击元素时,触发 dblclick 事件。

    dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数。

    提示:dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素,则会产生问题。


    语法

    触发被选元素的 dblclick 事件:

    $(selector).dblclick()

    添加函数到 dblclick 事件:

    $(selector).dblclick(function)
    参数描述
    function 可选。规定当 dblclick 事件发生时运行的函数。

    delegate() 方法

    当单击 <div> 元素内部的 <p> 元素时,改变所有 <p> 元素的背景颜色:

    $("div").delegate("p","click",function(){
        $("p").css("background-color","pink");
    });
    View Code

    定义和用法

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

    使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

    自 jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的首选方法。


    语法

    $(selector).delegate(childSelector,event,data,function)
    参数描述
    childSelector 必需。规定要添加事件处理程序的一个或多个子元素。
    event 必需。规定添加到元素的一个或多个事件。

    由空格分隔多个事件值。必须是有效的事件。
    data 可选。规定传递到函数的额外数据。
    function 必需。规定当事件发生时运行的函数。

    die() 方法

    移除所有通过 live() 方法向 <p> 元素添加的事件处理程序:

    $("p").die(); 
    View Code

    定义和用法

    die() 方法在 jQuery 版本 1.7 中被废弃,在版本 1.9 中被移除。请使用 off() 方法代替。

    die() 方法移除通过 live() 方法向被选元素添加的一个或多个事件处理程序。


    语法

    $(selector).die(event,function)
    参数描述
    event 必需。规定要移除的一个或多个事件处理程序。

    由空格分隔多个事件值。必须是有效的事件。
    function 可选。规定要移除的特定函数。

    error() 方法

    如果 image 元素遇到错误,把它替换为文本:

    $("img").error(function(){
        $("img").replaceWith("<p>图片加载错误!</p>");
    }); 
    View Code

    定义和用法

    error() 方法在 jQuery 版本 1.8 中被废弃

    当元素遇到错误时(当元素没有正确载入时),发生 error 事件。

    error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数。

    提示:该方法是 bind('error', handler) 的简写方式。


    语法

    触发被选元素的 error 事件:

    $(selector).error()

    添加函数到 error 事件:

    $(selector).error(function)
    参数描述
    function 可选。规定当 error 事件发生时运行的函数

    event.currentTarget属性

    event.currentTarget 通常等于 this

    $("h1,h2,p").click(function(event){
        alert(event.currentTarget === this);
    }); 
    View Code

    定义和用法

     event.currentTarget 属性是在事件冒泡阶段内的当前 DOM 元素,通常等于 this


    语法

    event.currentTarget
    参数描述
    event 必需。event 参数来自事件绑定函数。

    jquery方法与属性列表:

     

    方法描述
    bind() 向元素添加事件处理程序
    blur() 添加/触发失去焦点事件
    change() 添加/触发 change 事件
    click() 添加/触发 click 事件
    dblclick() 添加/触发 double click 事件
    delegate() 向匹配元素的当前或未来的子元素添加处理程序
    die() 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序
    error() 在版本 1.8 中被废弃。添加/触发 error 事件
    event.currentTarget 在事件冒泡阶段内的当前 DOM 元素
    event.data 包含当前执行的处理程序被绑定时传递到事件方法的可选数据
    event.delegateTarget 返回当前调用的 jQuery 事件处理程序所添加的元素
    event.isDefaultPrevented() 返回指定的 event 对象上是否调用了 event.preventDefault()
    event.isImmediatePropagationStopped() 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
    event.isPropagationStopped() 返回指定的 event 对象上是否调用了 event.stopPropagation()
    event.namespace 返回当事件被触发时指定的命名空间
    event.pageX 返回相对于文档左边缘的鼠标位置
    event.pageY 返回相对于文档上边缘的鼠标位置
    event.preventDefault() 阻止事件的默认行为
    event.relatedTarget 返回当鼠标移动时哪个元素进入或退出
    event.result 包含由被指定事件触发的事件处理程序返回的最后一个值
    event.stopImmediatePropagation() 阻止其他事件处理程序被调用
    event.stopPropagation() 阻止事件向上冒泡到 DOM 树,阻止任何父处理程序被事件通知
    event.target 返回哪个 DOM 元素触发事件
    event.timeStamp 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
    event.type 返回哪种事件类型被触发
    event.which 返回指定事件上哪个键盘键或鼠标按钮被按下
    event.metaKey 事件触发时 META 键是否被按下
    focus() 添加/触发 focus 事件
    focusin() 添加事件处理程序到 focusin 事件
    focusout() 添加事件处理程序到 focusout 事件
    hover() 添加两个事件处理程序到 hover 事件
    keydown() 添加/触发 keydown 事件
    keypress() 添加/触发 keypress 事件
    keyup() 添加/触发 keyup 事件
    live() 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
    load() 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件
    mousedown() 添加/触发 mousedown 事件
    mouseenter() 添加/触发 mouseenter 事件
    mouseleave() 添加/触发 mouseleave 事件
    mousemove() 添加/触发 mousemove 事件
    mouseout() 添加/触发 mouseout 事件
    mouseover() 添加/触发 mouseover 事件
    mouseup() 添加/触发 mouseup 事件
    off() 移除通过 on() 方法添加的事件处理程序
    on() 向元素添加事件处理程序
    one() 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
    $.proxy() 接受一个已有的函数,并返回一个带特定上下文的新的函数
    ready() 规定当 DOM 完全加载时要执行的函数
    resize() 添加/触发 resize 事件
    scroll() 添加/触发 scroll 事件
    select() 添加/触发 select 事件
    submit() 添加/触发 submit 事件
    toggle() 在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数
    trigger() 触发绑定到被选元素的所有事件
    triggerHandler() 触发绑定到被选元素的指定事件上的所有函数
    unbind() 从被选元素上移除添加的事件处理程序
    undelegate() 从现在或未来的被选元素上移除事件处理程序
    unload() 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件
    contextmenu() 添加事件处理程序到 contextmenu 事件
    $.holdReady() 用于暂停或恢复.ready() 事件的执行
  • 相关阅读:
    ES6深入浅出-5 新版对象-1.如何创建对象
    ES6深入浅出-4 迭代器与生成器-5.科班 V.S. 培训
    ES6深入浅出-4 迭代器与生成器-4.总结
    ES6深入浅出-4 迭代器与生成器-3.生成器 & for...of
    ES6深入浅出-4 迭代器与生成器-2.Symbol 和迭代器
    Spring cloud微服务安全实战-3-2 第一个API及注入攻击防护
    Spring cloud微服务安全实战-3-1 API安全 常见的安全机制
    Spring Cloud微服务安全实战- 2-1 环境安装
    Spring cloud微服务安全实战_汇总
    ES6深入浅出-4 迭代器与生成器-1.字面量增强
  • 原文地址:https://www.cnblogs.com/fmgao-technology/p/9375448.html
Copyright © 2020-2023  润新知