M

E

N

U

 

 

события базовые

on() привязывает обработчик события к объекту или объектам
удалить этот обработчик события можно функции off()
off() удаляет обработчик события с объекта или объектов, присвоенный с помощью функции on()
one() привязывает одноразовый обработчик события объекту или объектам
удалить этот обработчик события можно функции unbind()
live()  устаревший привязывает обработчик события к объекту или объектам, является устаревшим
удалить этот обработчик события можно функции die()
die()  устаревший удаляет обработчик события с объекта или объектов, присвоенный с помощью функции live(), является устаревшим
bind()  устаревший привязывает обработчик события к объекту или объектам, является устаревшим
удалить этот обработчик события можно функции unbind()
unbind()  устаревший удаляет обработчик события с объекта или объектов, присвоенный с помощью функции bind(), one(), является устаревшим
delegate()  устаревший привязывает обработчик события к объекту или объектам, является устаревшим
удалить этот обработчик события можно функции undelegate()
undelegate()  устаревший удаляет обработчик события с объекта или объектов, присвоенный с помощью функции delegate(), является устаревшим
 
 

on()

Функция привязывает обработчик события к объекту или объектам.
Удалить этот обработчик события можно функции off().
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  .a, .b, .c, .d {
   height: 30px;
   margin: 5px;
   text-align: center;
   line-height: 30px;
   float: left;
  }
 
  .a {
   width: 100px;
   background-color: #A3E61D;
   color: #FFF;
   border-radius: 3px;
   cursor: pointer;
  }
 
  .c {
   width: 100px;
   background-color: #3BA9DE;
   color: #FFF;
   border-radius: 3px;
   cursor: pointer;
  }
 
  .d {
   width: 100px;
   background-color: #852E76;
   color: #FFF;
   border-radius: 3px;
   cursor: pointer;
  }
 
  .b {
   width: 300px;
   background-color: #FFECDD;
  }
 </style>
</head>
<body>
 <div id="box1">
  <div class="a">SHOW</div>
 </div>
 <br />
 <br />
 <br />
 <div id="box2">
  <div class="c">SHOW</div>
  <br />
  <br />
  <div class="c">SHOW</div>
  <br />
  <br />
  <div class="c">SHOW</div>
 </div>
 <br />
 <br />
 <br />
 <div id="box3">
  <div class="d">SHOW</div>
 </div>
 <script>
  $(document).ready(function () {
 
   /*---НЕПОСРЕДСТВЕННАЯ ОБРАБОТКА СОБЫТИЯ---*/
 
   var counter = 0;
   //создаем элемент-параграф
   var element1 = $('<p />', { 'class': 'b', 'text': 'Hello World!' });
 
   /*привязываем обработчик события к одному объекту*/
   $('.a').on('click', function () {
    counter++;
    if(counter % 2 != 0) {
     //добавляем элемент-параграф после div-кнопки
     //изменяем текст div-кнопки
     $(this).after(element1).text('HIDE');
    }
    else {
     //изменяем текст div-кнопки
     $(this).text('SHOW');
     //удаляем элемент-параграф
     $('#box1>p.b').remove();
    }
   });
 
   /*---ДЕЛЕГИРОВАННАЯ ОБРАБОТКА СОБЫТИЯ---*/
 
   counter = 0;
   //создаем элемент-параграф
   var element2 = $('<p />', { 'class': 'b', 'text': 'To be or not to be?' });
 
   /*привязываем обработчик события к одному объекту-контейнеру, это #box1*/
   /*объект-контейнер будет ловить события, которые происходят с элементом div*/
   $('#box2').on('click', 'div', function () {
    counter++;
    if(counter % 2 != 0) {
     //добавляем элемент-параграф после div-кнопки
     //изменяем текст div-кнопки
     $(this).after(element2).text('HIDE');
    }
    else {
     //изменяем текст div-кнопки
     $(this).text('SHOW');
     //удаляем элемент-параграф
     $('#box2>p.b').remove();
    }
   });
 
   /*---ПЕРЕДАЧА ДАННЫХ ОБРАБОТЧИКУ СОБЫТИЙ В ФОРМАТЕ JSON ОБЪЕКТА---*/
 
   counter = 0;
   //создаем элемент-параграф
   var element3 = $('<p />', { 'class': 'b' });
   //создаем JSON объект
   var jsonObject = { str: 'Привет Мир!' };
 
   $('.d').on('click', jsonObject, function (event) {
    counter++;
    if(counter % 2 != 0) {
     //добавляем элемент-параграф после div-кнопки
     //в функцию text() передаем данные JSON объекта
     //изменяем текст div-кнопки
     $(this).after(element3.text(event.data.str)).text('HIDE');
    }
    else {
     //изменяем текст div-кнопки
     $(this).text('SHOW');
     //удаляем элемент-параграф
     $('#box3>p.b').remove();
    }
   });
 
  });
 </script>
</body>
</html>
 
 
 

off()

Функция удаляет обработчик события с объекта или объектов, присвоенный с помощью функции on().
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  .a, .b {
   height: 30px;
   margin: 5px;
   text-align: center;
   line-height: 30px;
   float: left;
  }
 
  .a {
   width: 100px;
   background-color: #3BA9DE;
   color: #FFF;
   border-radius: 3px;
   cursor: pointer;
  }
 
  .b {
   width: 300px;
   background-color: #FFECDD;
  }
 
  button {
   margin: 5px;
   cursor: pointer;
  }
 </style>
</head>
<body>
 <div id="box1">
  <div class="a">SHOW</div>
 </div>
 <br />
 <br />
 <button>DELETE</button>
 <script>
  $(document).ready(function () {
 
   var counter = 0;
   //создаем элемент-параграф
   var a = $('<p />', { 'class': 'b', 'text': 'Hello World!' });
 
   /*привязываем обработчик события к одному объекту*/
   $('.a').on('click', function () {
    counter++;
    if(counter % 2 != 0) {
     //добавляем элемент-параграф после div-кнопки
     //изменяем текст div-кнопки
     $(this).after(a).text('HIDE');
    }
    else {
     //изменяем текст div-кнопки
     $(this).text('SHOW');
     //удаляем элемент-параграф
     $('#box1>p.b').remove();
    }
   });
 
   /*удаляем on()*/
   $('button').click(function () {
    $('.a').off();
   });
 
  });
 </script>
</body>
</html>
 
 
 

one()

Функция привязывает одноразовый обработчик события к объекту или объектам.
Удалить этот обработчик события можно функции unbind(), но она устаревшая.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  .a, .b {
   height: 30px;
   margin: 5px;
   text-align: center;
   line-height: 30px;
   float: left;
  }
 
  .a {
   width: 100px;
   background-color: #3BA9DE;
   color: #FFF;
   border-radius: 3px;
   cursor: pointer;
  }
 
  .b {
   width: 300px;
   background-color: #FFECDD;
  }
 </style>
</head>
<body>
 <div id="box1">
  <div class="a">SHOW</div>
 </div>
 <script>
  $(document).ready(function () {
 
   var counter = 0;
   //создаем элемент-параграф
   var a = $('<p />', { 'class': 'b', 'text': 'Hello World!' });
 
   /*привязываем ОДНОРАЗОВО обработчик события к одному объекту*/
   $('.a').one('click', function () {
    counter++;
    if(counter % 2 != 0) {
     //добавляем элемент-параграф после div-кнопки
     //изменяем текст div-кнопки
     $(this).after(a).text('HIDE');
    }
    else {
     //изменяем текст div-кнопки
     $(this).text('SHOW');
     //удаляем элемент-параграф
     $('#box1>p.b').remove();
    }
   });
 
  });
 </script>
</body>
</html>