事件冒泡与委托详解-优快云博客

1、事件冒泡

什么是事件冒泡

在一个对象上触发某类事件，如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直到它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层。

事件冒泡的作用

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件

阻止事件冒泡

事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

$(function(){

var $box1 = $('.father');

var $box2 = $('.son');

var $box3 = $('.grandson');

$box1.click(function() {

alert('father');

});

$box2.click(function() {

alert('son');

});

$box3.click(function(event) {

alert('grandson');

event.stopPropagation();

});

阻止表单提交

$(function(event){

event.preventDefault();

})

合并阻止操作

// event.stopPropagation();

// event.preventDefault();

// 合并写法：

return false; 阻止冒泡事件

2、事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

事件委托的写法

$(function(){

$list = $('#list');

$list.delegate('li', 'click', function() {

$(this).css({background:'red'});

});

})

...

</ul>

语法:

// 参数1:要代理的那个儿子

// 参数2:事件

// 参数3:回调函数

$('.list').delegate('li','click',function () {

// 在事件委托中 this表示触发事件的子级

$(this).css({'color':'red'});

})

this的总结

1、$(‘.list’).delegate(‘li’,’click’,function(){

在事件委托中this表示触发事件的子级（代理中的this比较特殊，指当前触发事件的儿子）

$(this),css({‘color’:’red’});

})

1、$oDiv.click(funnction(){this})() this:当前函数click所属的对象$oDiv

2、全局函数：全局函数是属于window对象

function abc(){

this:(当前函数abc所属的对象window)

}

abc();

Window.abc();

3、节点操作

1. 新建节点

var $div2 = $('<p>我是新创建的</p>');

$('标签字符串'): 创建节点/标签对象

2. 节点添加

// 1..在box内部添加 (添加子节点)

// 1在box里面的最后添加一个标签

// $box.append($div2); // 追加

// 2在box里面的最前添加一个标签

// $box.prepend($div2);

// 2.外部添加 (添加兄弟节点)

// 在box的外部的前面添加一个标签

// $box.before($div2);

// 在box的外部的后面添加一个标签

// $box.after($div2);

3. 节点删除

// remove()删除节点删除标签

// $div2.remove();

4、正则表达式的写法

var re=new RegExp('规则', '可选参数');

var re=/规则/参数

修饰参数

g： global，全文搜索，默认搜索到第一个结果接停止

i： ingore case，忽略大小写，默认大小写敏感

函数test 用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假

常用正则规则

用户名验证：(数字字母或下划线6到20位)

var reUser = /^\w{6,20}$/;

邮箱验证：

var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;

密码验证：

var rePass = /^[\w!@#$%^&*]{6,20}$/;

手机号码验证：

var rePhone = /^1[34578]\d{9}$/;

单选框/复选框的判断

js写法:单选框标签对象.checked == true

jQuery写法:单选框标签对象.is(:checked) == true

转载于:https://www.cnblogs.com/flyPENG/p/9836019.html

jQuery总结（三）