jQuery注册事件的发展历程(简单/bind/delegate/on)
作者：互联网
<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/02/ 6:09-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
<style>
div {
width: 200px;
height: 200px;
margin-top: 10px;
}
.one {
border: 1px solid red;
}
.two {
border: 1px solid green;
}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn"/> <br/><br/>
<div class="one" id="one"></div>
<span style="border:1px solid green">我是一个span标签</span>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
/**
* 原生js
* 用原生的js 给 div 注册单击事件.
* 原生js注册相同的事件,后面的会把前面的给覆盖.
*/
// document.getElementById("one").onclick = function () {
// alert("原生js_单击事件1");
// };
// document.getElementById("one").onclick = function () {
// alert("原生技术_单击事件, 啦啦啦");
// };
/**
* jQuery
* 对 原生js事件 进行了封装, 增强了 事件处理能力
* 给 同一个元素 注册 同样的事件,后面的 不会 把前面的 给覆盖.
*/
// $('#one').click(function () {
// alert("jQuery_单击事件1");
// });
// $('#one').click(function () {
// alert("jQuery_单击事件2");
// });
//--------------------------------------------------------------------------------------
/**
* jQuery注册事件 的 发展历程
*
* 简单事件注册 -> bind方式注册 -> delegate注册委托事件
*
* 1. 最开始 简单事件绑定(不支持 同时注册; 不支持 动态注册)
*/
/**
* 1.简单事件绑定 click();
* 不支持同时注册,也不支持动态注册.
* 下面这个例子, 叫 一前一后 注册, 不是 同时注册
*/
// $('div').click(function () {
// console.log("jQuery_鼠标单击事件");
// });
// $('div').mouseenter(function () {
// console.log("jQuery_鼠标移入事件");
// });
/**
* 什么叫 同时注册
* 给按钮设置点击事件,创建一个div.
*
* 动态注册
* 已经注册完事件, 新创建的 元素, 不具有 事件
*/
$('#btn').click(function () {
var $divNew = $('<div class="two"></div>');
// 将 创建的 div, 添加到 body
$('body').append($divNew);
});
/**
* 2. bind方式注册事件
* 支持同时注册,也不支持动态注册.
*/
// $('div').bind({
// mouseenter: function () {
// console.log("jQuery同时注册_鼠标移入事件");
// },
// click: function () {
// console.log("jQuery同时注册_鼠标单击事件");
// }
// });
// 另一种 书写方式
// /**
// * 第1个参数: 事件类型
// * 第2个参数: 事件处理程序
// */
// $('div').bind('click mouseenter', function () {
// // 事件响应方法
// });
/**
* 3.delegate注册委托事件-原理是 事件冒泡.
* 支持 同时注册,也支持 动态注册.
*/
$('body').delegate('div', {
mouseenter: function () {
console.log("jQuery_delegate_鼠标移入事件");
},
click: function () {
console.log("jQuery_delegate_鼠标单击事件");
}
});
/**
* 4.jQuery1.7之后，jQuery用on统一了所有事件的注册方式。
*/
/**
* 1. on简单注册事件.
* 不支持动态注册的.
*/
/**
* 4.2 on委托注册
* 支持动态注册的.
*/
});
</script>
标签：jQuery,function,单击,bind,delegate,注册,div,事件 来源： https://www.cnblogs.com/beyondx/p/16542455.html