jQuery框架（七）：事件绑定与委托、插件机制
文章目录
- 一、事件绑定与委托
- 1、事件绑定
- 2、事件委托
- 3、事件绑定与事件委托的区别（实战说明）
- （1）事件绑定代码及其效果
- （3）事件委托代码效果及其对比
- 二、插件机制
- 1、两种方法调用方式
- 2、自定义方法的语法和例子
- （1）自定义静态方法的例子
- （2）自定义实例方法的例子
一、事件绑定与委托
1、事件绑定
全写形式：$(selector).bind('click',function(){}) //把当前筛选出来的元素的click事件和function绑定在一起
简写形式：$(selector).click(function(){}) // 把js中所有事件名全部去掉on，就是jq的事件名
解除事件绑定：$(selector).unbind('click')
事件的绑定是即时的，是把事件绑定给当前筛选出来的元素，后面如果筛选的元素增加，那么也不会再给新的元素添加绑定事件！
2、事件委托
事件委托是为了解决事件绑定不能动态的为新加元素绑定事件的痛点而诞生的！
1. 语法
$(selector1).on(event,selector2,function(){})
2. 用法例子
// 将click这个事件委托给div下的所有span标签
$('div').on('click','span',function () {
alert($(this).text());
})
3、事件绑定与事件委托的区别（实战说明）
（1）事件绑定代码及其效果
实现代码如下：
<body>
<span>add</span>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</body>
<script src="jquery-3.5.1.js"></script>
<script>
$('li').click(function () {
alert($(this).text());
})
$('span').click(function () {
let $ele = $('' );
$ele.appendTo($('ul'));
let value = parseInt($ele.prev().text())+1111;
$ele.text(value);
})
</script>
执行结果：
我们可以看到采用事件绑定的方式，新加的li标签并没有绑定事件
（3）事件委托代码效果及其对比
// 将当前所有的li标签绑定上click事件，在代码执行时，这个绑定关系就成立了
$('li').click(function () {
alert($(this).text());
})
把上面这个事件绑定代码替换成下面这个事件委托代码即可：
// 将click这个事件委托给ul下的所有li标签
// 只有当li标签发生click事件时，才会去找ul下的所有li标签，执行function中的代码
$('ul').on('click','li',function () {
alert($(this).text());
})
效果：
二、插件机制
1、两种方法调用方式
首先我们要知道我们的方法调用有几种方式，以each方法为例；
$.each(object,function(i,x){})
$(selector).each(function(){})
插件机制就是为我们写插件提供的一种方法，写插件也就是写像each这样的方法出来，供我们自己使用（可以说是自定义方法）
2、自定义方法的语法和例子
$.extend(object) //为JQuery 添加一个静态方法，类似python中的类方法。
$.fn.extend(object) //为JQuery实例添加一个方法，类似python中的对象方法。
（1）自定义静态方法的例子
<script>
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
console.log($.min(3,4)); // 结果：3
console.log($.max(3,4)); // 结果：4
</script>
（2）自定义实例方法的例子
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
<script src="jquery-3.5.1.js"></script>
<script>
$.fn.extend({
"print":function(){
for (let i=0;i<this.length;i++){
// this是$("p")的引用,因此你需要遍历，获得jq对象中的各个node节点
console.log($(this)[i].innerHTML);
}
//each的原理就是内部其实使用了for循环遍历jq对象
//它内部做了处理，让我们在使用的时候，this拿到的只是一个node
}
});
$("p").print();
</script>
运行结果：
