jQuery总结--版本二 事件处理函数

一：事件处理函数

（1）

one(事件名称, fn) 仅对指定事件监听一次，监听事件只会执行一次

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
</head>
<body>
<h1>仅进行一次的事件处理</h1>

<button>开始抽奖</button>

<script src="js/jquery-1.11.3.js"></script>
<script>
  $('button').one('click', function(){
    $(this).html('抽奖中...')
    console.log('抽奖中...')
  })
</script>
</body>
</html>

（2）on()/off()

on()函数的第一种使用方法——直接绑定在事件源上：

$('事件源').on('事件名称', fn) //绑定监听函数

$('事件源').off('事件名称') //取消所有监听函数

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
</head>
<body>
<h1>事件处理</h1>

<button>开始抽奖</button>

<script src="js/jquery-1.11.3.js"></script>
<script>
  $('button').on('click', function(){
    console.log('处理函数1...')
  })
  $('button').on('click', function(){
    console.log('处理函数2...')
  })
  $('button').on('click', function(){
    console.log('处理函数3...');
    $(this).html('抽奖中....');
    console.log('抽奖中.........');
    $(this).off('click');  //取消单击事件绑定
  })

  //$('button').off('click')
</script>
</body>
</html>

on()的第一种用法有两个限制：

(1)若选中元素很多，每个都会有一个监听函数

(2)无法为后添加的元素执行绑定

on()函数的第二种使用方法——委托给父元素进行事件代理：

$('parent').on('事件名称', '子元素选择器', fn)

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
</head>
<body>
<h1>事件代理</h1>

<button id="btAdd">添加新的按钮</button>

<hr/>

<div class="container">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>

<script src="js/jquery-1.11.3.js"></script>
<script>
  $('#btAdd').click(function(){
    $('.container').append('<button>9</button>');

  });

  //把监听函数绑定给每个事件源对象
  /*$('.container  button').on('click', function(){
    console.log( $(this).html() )
  })*/

  //每个按钮都把事件委托给公共的父元素
  $('.container').on('click','button',function(){

    //console.log(this);  //事件源对象
    console.log( $(this).html()  );
  })

  console.log('事件绑定全部完成')
</script>
</body>
</html>

DOM中为元素绑定监听函数：

btn.onclick = function(){  }

btn.addEventListener('click', function(){  })

jQuery中的on()函数底层是addEventListener
posted @ 2017-04-08 19:34  尼古拉斯凯  阅读(151)  评论(0)    收藏  举报