jQuery on()方法的用法举例

  • A+
所属分类:jQuery

jquery是非常易学,所以也很流行,但是好学,并不代表能学好。那jquery的”on”事件,你会用吗?我相信大家都用过,无非给一个dom绑定一个事件嘛!应该是很简单的了。前面对jQuery on()方法也有介绍。

首先让我们看第一个例子:

<button class="test1">点我1</button>
<button class="test2">点我2</button>

页面上两个button,给他们各绑一个点击事件,看一下js是怎么写的

$('.test1').click(function(){
   alert(1);
});
 
$('.test2').on('click', function(){
   alert(2);
});

上面的代码非常的简单,在这里只是做一个说明,click能完成的事,用on也可以完成。只是格式有一点不一样而且。
例一完整的html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <button class="test1">点我1</button>
  <button class="test2">点我2</button>
  <script>
    $('.test1').click(function(){
      alert(1);
    });
 
    $('.test2').on('click', function(){
      alert(2);
    });
  </script>
</body>
</html>

没错!click能完成的,我们可以on(‘click’)完成。反过来说,on可能更高级一点,

接下来看第二个例子
这回有一点小区别,这回这三个按钮是动态追加进去的。

<div id="wrap"></div>
<script>
  var wrapObj = $('#wrap');
  wrapObj.append('<button id="test1">点我1- click</button>');
  wrapObj.append('<button id="test2">点我2 - on("click")</button>');
  wrapObj.append('<button id="test3">点我3 - on("click")</button>');
</script>

运行这段代码,你会发现,三个按钮出来了,接下去,我们给他绑定事件。当然实际项目中,我们是先绑定事件,因为dom元素是需要根据业务逻辑再追回进去的。所以我们把绑定事件的代码写在前面。

//先绑定事件
    $('#test1').click(function(){
      alert(1);
    });
    $('#test2').on('click', function(){
      alert(2);
    });
    $('#wrap').on('click', '#test3',function(){
      alert(3);
    });
 
    //再追加dom
    var wrapObj = $('#wrap');
    wrapObj.append('<button id="test1">点我1- click</button>');
    wrapObj.append('<button id="test2">点我2 - on("click")</button>');
    wrapObj.append('<button id="test3">点我3 - on("click")</button>');

例二完整代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div id="wrap"></div>
  <script>
    //先绑定事件
    $('#test1').click(function(){
      alert(1);
    });
    $('#test2').on('click', function(){
      alert(2);
    });
    $('#wrap').on('click', '#test3',function(){
      alert(3);
    });
 
    //再追加dom
    var wrapObj = $('#wrap');
    wrapObj.append('<button id="test1">点我1- click</button>');
    wrapObj.append('<button id="test2">点我2 - on("click")</button>');
    wrapObj.append('<button id="test3">点我3 - on("click")</button>');
  </script>
</body>
</html>

打开浏览器跑一下,第一个点击一下,没反映,第二个也点一下还是没有反映,点击第三个发现弹出来了!在项目中,如果你的按钮是js后面追加进到dom里面的,请使用第三种方法绑定事件。将事件绑定在已经存在的dom元素上,第二个参数传触发的dom对象。

看到这里,你不禁会问,我可以全用on事件来绑定事件吗?这个问不绝多回答,大多数情况下是可以的,当然你有一个dom元素,你只想让他触发一次,当然会选用one方法。

第三个例子:
on的反意词是什么?off。所以既然有on,肯定是off的,那么我们来看看on和off是怎么来配合使用的。

<button id="test1">点我</button>
<button id="test2">绑定</button>
<button id="test3">取消</button>
//点击绑定, test1就绑定事件了
$('#test2').click(function() {
    $('#test1').on('click', function() {
        alert(1);
    });
});

//点击绑定, test1就取消事件了
$('#test3').on('click', function() {
    $('#test1').off('click');
});

操作流程:

一、先点击一下“点我”。发现没有反应。

二、先点击一下“绑定”,再点击“点我”,发现弹出一个1.

三、先点击一下“绑定”,再点击“点我”,发现弹出一个1.再点击“取消”,再点击“点我”;发现不弹了。这时我们会发现,事件是可以绑定和解绑的。

四、“绑定”点击两下,再点击“点我”,发现弹了两次。
这时我们发现,每绑一次,事件就多一次,所以程序中你要是发现事件多绑定,你可能在循环体里面绑定了事件,这样子是很靠谱的,往往会绑定多次,然后导致奇怪的bug

五、“绑定”点击两下,再点击“点我”,发现弹了两次。再点击“取消”,再点击“点我”;发现不弹了。不管绑多少次,解绑一次就全给解完了。所以有时候搞不轻松别人到底绑定多少次,我都全解绑一下,然后再绑定事件,虽然说这样子是可以解决一bug,也只是治标不治本,不推荐这样子操作。

例三的完整代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <button id="test1">点我</button>
    <button id="test2">绑定</button>
    <button id="test3">取消</button>
  <script>
    //点击绑定, test1就绑定事件了
    $('#test2').click(function(){
      $('#test1').on('click', function(){
        alert(1);
      });
    });
 
    //点击绑定, test1就取消事件了
    $('#test3').on('click',function(){
      $('#test1').off('click');
    });
  </script>
</body>
</html>

我们接着看第四个例子

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  0   博主  0

    • avatar 纪涛博客 1

      jQuery 大法好