jquery命名函数 jquery事件命名空间

转载

autohost 2024-01-02 16:17:41

文章标签 jquery命名函数事件处理命名空间事件对象 文章分类 jQuery 前端开发

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <script type="text/javascript" src=""></script>
        <title>Document</title>
        <style type="text/css">
            .main {
                width: 200px;
                height: 200px;
                border: 1px solid red;
                background: green;
            }

            .add {
                background: red;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $(".clk").on('haha', function() {
                    $(".main").toggleClass('add');
                });
                setInterval(function() {
                    $(".clk").trigger('haha');
                },1000);
            })
        </script>
    </head>

    <body>
        <div class="main"></div>
        <button class="clk">click</button>
    </body>

</html>

.on()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <button id="example" type="button">Click me!</button>
  <script src="http://code.jquery.com/jquery-1.11.2.js"></script>
  <script>
  // code here
  </script>
</body>
</html>

<script> 元素内添加如下代码，其中，事件名称是 .on()

$('#example').on('click', function(e) {
  alert('Clicked!');
});

e

$('#example').on('click', clickHandler);

同时绑定多个事件

mouseenter mouseleave，同时给元素绑定鼠标移入和鼠标移出事件。可以通过事件对象的 type

$('#example').on('mouseenter mouseleave', function(e) {
  if (e.type === 'mouseenter') {
    // mouseenter
  } else {
    // mouseleave
  }
});

除了上面这种方法外，还可以传入一个键值对来绑定多个事件：

$('#example').on({
  mouseleave: function() {
    // mouseleave
  },
  mouseenter: function() {
    // mouseenter
  }
});

事件上下文

同时给多个元素绑定事件处理程序的时候可以使用事件执行的上下文来简化代码：

$('li').on('click', function() {
  var $this = $(this);
  $this.addClass('active');
});

this

事件委托

.on()

$(document).on('click', '#example', clickHandler);

id="example" 的元素的鼠标单击事件委托绑定到了 document 元素上，当目标元素（即 id="example" 的元素）触发鼠标单击事件的时候，该事件就会冒泡到 document

$('ul').on('click', 'li', clickHandler);

<li> 元素也会具有事件处理程序。个人比较侵向于将事件都委托到 document

$(document)
  .on('click', 'selector-1', clickHandler)
  .on('focusin', 'selector-2', focusHandler);

submit 或者 change 是不会冒泡的，但是 jQuery 对此做了处理，因此也可以放心使用。像 focus 和 blur 事件则推荐使用相应的 focusin 和 focusout 事件来代替。对于 mouseover 和 mouseout 事件，为了避免事件冒泡造成的不良影响，推荐使用 mouseenter 和 mouseleave

阻止事件冒泡与默认行为

.stopPropagation()

$('#example').on('click', function(e) {
  e.stopPropagation();
});

.stopImmediatePropagation()

$('#example').on('click', function() {
  alert('Clicked-1!'); // 会执行
}).on('click', function(e) {
  e.stopImmediatePropagation();
}).on('click', function() {
  alert('Clicked-2!'); // 不会执行
});

.preventDefault()

$('#example').on('click', function(e) {
  e.preventDefault();
});

false

$('#example').on('click', function() {
  return false;
});

.stopPropagation() 和 .preventDefault() 方法。如果没有其它操作，还可以进一步简写为 $('#example').on('click', false);。

应用示例，点击按钮显示弹出层，点击文档其它地方隐藏：

$(document)
  .on('click', '#example', popup.show)
  .on('click', popup.hide);

由于事件冒泡，所以该弹出层并不会显示出来，需要在事件处理程序中阻止事件冒泡：

$(document)
  .on('click', '#example', function(e) {
    e.stopPropagation();
    popup.show();
  }).on('click', popup.hide);

获取原生事件对象

事件处理程序中引用的事件对象实际上是经过 jQuery 包装过的，有时候需要使用浏览器原生的事件对象，要得到浏览器原生的事件对象可以通过事件对象的 originalEvent 属性获取。例如，使用拖拽事件的时候就会用到原生的事件对象：

$('#example').on('dragstart', function(e) {
  var originalEvent = e.originalEvent;
  originalEvent.dataTransfer.effectAllowed = 'move';
  originalEvent.dataTransfer.setData('text/plain', $(this).text());
  originalEvent.dataTransfer.setData('text/html', $(this).html());
  originalEvent.dataTransfer.setDragImage('/images/drag.png', -10, -10);
});

传递数据

可以给事件处理程序传入数据，该数据保存在事件对象的 data 属性中：

$('#example').on('click', 1, function(e) {
  console.log(e.data); // 1
});

为了区别事件代理，传递的数据貌似不能是一个直接的字符串，不过可以传入一个对象来代替：

$('#example').on('click', {str: 'xxx'}, function(e) {
  console.log(e.data.str); // xxx
});

自定义事件

除了浏览器的标准事件，还可以绑定自定义事件的事件处理程序，其中事件名可以使用任意命名：

$('#example').on('sleep', function() {
  alert('Sleeping!');
});

.trigger()

$('#example').trigger('sleep');

trigger()

$('#example').on('sleep', function(e, time) {
  alert('Sleep at' + time);
});

$('#example').trigger('sleep', '22:00');

应用示例，使用自定义事件编写异步代码：

$('#example').on('done', doHandler);

function foo() {
  setTimeout(function() {
    // foo 函数的逻辑比较耗时，所以使用 setTimeout 函数排队
    $('#example').trigger('done'); // 执行完了，通知一声
  }, 1000);
}

done

事件命名空间

. 号分隔，像这样 click.widget，也可以给一个事件添加多个命名空间 click.widget.common，使用命名空间可以更有针对性地触发或者移除某个特定的事件处理程序。比如一个元素同时绑定了 click.tab 和 click.collapse 两个点击事件，当使用 .trigger() 方法触发 click.collapse 事件时会执行该事件的事件处理程序，而 click.tab

移除绑定事件

.off()

不指定任何参数，移除该元素上绑定的所有事件处理程序。

.off('click').off('click', clickHandler).off('.widget')

表示移除该命名空间下所有的事件处理程序（比如绑定的

click.widget

change.widget$(document).off('click', '#example')

，可以移除为该元素绑定的事件代理处理程序。

一次性事件

.one()

$('#example').one('click', clickHandler);

事件节流

浏览器中有几个事件会频繁触发，比如 scroll, resize, mousemove 等，那么给这些事件绑定的事件处理程序也会跟着频繁地执行，导致页面反应迟钝，要解决这个问题，需要节流事件，减少事件处理程序执行的频率：

var timer = 0; // 使用一个定时器
$(window).on('scroll', function() {
  if (!timer) {
    timer = setTimeout(function() {
      // Do something
      timer = 0;
    }, 200);
  }
});

前言

在jquery的官方API中，有对命名空间的一些描述，地址是：http://api.jquery.com/on/ 这里面有一些英文介绍，题目是“Event names and namespaces”下面有一些介绍。假如一些朋友不是很理解的话，我在这里简单的介绍一下！

jQuery事件命名空间

我们先看一些代码：

$(“#haorooms”).on("click.a",function(){});
$(“#haorooms”).on("click.a.bb",function(){});
$(“#haorooms”).on("dbclick.a",function(){});
$(“#haorooms”).on("mouseover.a",function(){});
$(“#haorooms”).on("mouseout.a",function(){});

当然，我们也可以用bind进行事件绑定。我们看到上面的代码，我们可以在事件后面，以点号，加我们的名字，就是事件命名空间。所谓事件命名空间，就是事件类型后面以点语法附加一个别名，以便引用事件，如”click.a”，其中”a”就是click当前事件类型的别名，即事件命名空间。

假如我们要删除如下命名空间：

$(“#haorooms”).on("click.a.bb",function(){});

我们可以用：

$(“#haorooms”).off("click.a.bb");//直接删除bb命名空间 【推荐】
$(“#haorooms”).off(".bb"); //直接删除bb命名空间 【推荐】
$(“#haorooms”).off(".a"); //删除.a命名空间下面所有的子空间【包括.a.bb   .a.cc等等，.a是.bb的父级，因此.a下面的都会删掉】
$(“#haorooms”).off("click");//直接解绑click，下面的命名空间都会删除。

要注意的是：

假如我们写了如下代码：

$(“#haorooms”).on("click",function(){});
$(“#haorooms”).on("click.a",function(){});
$(“#haorooms”).on("click.a.bb",function(){});

那么我们要用trigger触发click事件，也就是触发第一个，岂不是把click.a和click.a.bb都触发了，那如何解决这个问题呢，我只想触发click，而不触发click.a及以下的命名空间？

没关系！有如下解决办法：

如果事件类型后面附加感叹号，则表示触发不包含命名空间的特定事件类型。

假如我们只想触发click，可以这么写：

$(“#haorooms”).trigger("click!")

只触发bb，可以这么写：

$(“#haorooms”).trigger("click.a.bb");

有了命名空间，可以方便我们在同一个事件上面做管理啦！！！

自定义事件

我在这里就不多描述了！所有自定义事件都可以通过jQuery方法触发，例如下面的示例自定一个Delay事件类型，并把它绑定到input元素对象上，然后在按钮单击事件中触发自定义事件。

$("input").bind("delay",function(event){
    setTimeout(function(){
          alert(event.type);
    },1000);
});
$("input").click(function(){
      $("input").trigger("delay"); //触发自定义事件
});

自定义事件不是真正意义上的事件，可以把它理解为自定义函数，触发自定义事件就相当于调用自定义函数。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。