zoukankan      html  css  js  c++  java
  • JQuery系列(2)

    JQuery事件绑定

    (1)on方法

    on方法是jQuery事件绑定的统一接口。后面介绍的事件绑定的那些简便方法,其实都是on方法的简写形式。

    $('li').on('click', function (e){
      console.log($(this).text());
    });

    on方法接受两个参数,第一个是事件名称,第二个是回调函数。

    注意,在回调函数内部,this关键字指的是发生该事件的DOM对象。为了使用jQuery提供的方法,必须将DOM对象转为jQuery对象,因此写成$(this)

    on方法允许一次为多个事件指定同样的回调函数。

    $('input[type="text"]').on('focus blur', function (){
      console.log('focus or blur');
    });

    on方法还可以为当前元素的某一个子元素,添加回调函数。

    $('ul').on('click', 'li', function (e){
      console.log(this);
    });

    子元素事件冒泡触发父元素事件,关于on方法的详细介绍:http://www.365mini.com/page/jquery-on.htm

    on方法还允许向回调函数传入数据。

    $("ul" ).on("click", {name: "张三"}, function (event){
        console.log(event.data.name);
    });

    当回调函数被触发后,它们的参数通常是一个事件对象event。

    $(document).on('click', function (e){
        // ...
    });

    上面代码的回调函数的参数e,就代表事件对象event。

    event对象有以下属性:

    • type:事件类型,比如click。
    • which:触发该事件的鼠标按钮或键盘的键。
    • target:事件发生的初始对象。
    • data:传入事件对象的数据。
    • pageX:事件发生时,鼠标位置的水平坐标(相对于页面左上角)。
    • pageY:事件发生时,鼠标位置的垂直坐标(相对于页面左上角)。

    event对象有以下方法:

    • preventDefault:取消浏览器默认行为。
    • stopPropagation:阻止事件向上层元素传播。

    (2)one()方法

    one方法指定一次性的回调函数,即这个函数只能运行一次。这对提交表单很有用。 

    $("#button").one( "click", function() { return false; } );

     one方法本质上是回调函数运行一次,即解除对事件的监听。

    document.getElementById("#button").addEventListener("click", handler);
    
    function handler(e) {
        e.target.removeEventListener(e.type, arguments.callee);
        return false;
    }

    (3)绑定事件的简便方法

    • click
    • keydown
    • keypress
    • keyup
    • mouseover
    • mouseout
    • mouseenter
    • mouseleave
    • scroll
    • focus
    • blur
    • resize
    • hover
    $('li').click(function (e){
      console.log($(this).text());
    });

    JQuery事件触发和移除

    (1)trigger()事件触发方法

    trigger方法用于触发回调函数,它的参数就是事件的名称。

    $('li').trigger('click')

    上面代码触发li元素的click事件回调函数。与那些简便方法一样,trigger方法只触发回调函数,而不会引发浏览器的默认行为。

    (2)简单版事件触发方法

    $('li').click()
    $('li').keydown()

    下面是一个捕捉用户按下escape键的函数

    $(document).keyup(function(e) {
      if (e.keyCode == 27) {
        $('body').toggleClass('show-nav');
        // $('body').removeClass('show-nav');
      }
    });

    (3)off方法,事件方法移除

    off方法用于移除事件的回调函数。

    $('li').off('click')

    上面代码移除li元素所有的click事件回调函数。 

    参考

    【1】阮一峰, http://javascript.ruanyifeng.com/jquery/basic.html#toc4

  • 相关阅读:
    StringUtils
    改变windows锁屏时间
    data-toggle和data-target
    Bootstrap元素居中
    爬虫软件/程序
    nfs服务器搭建
    浏览器控制台console对象的使用
    F7
    Ubuntu18.04 安装Docker【转】
    mysql出现ERROR1698(28000):Access denied for user root@localhost错误解决方法【转】
  • 原文地址:https://www.cnblogs.com/ybtools/p/6800875.html
Copyright © 2011-2022 走看看