javascript实例教程：事件委托讲解

来源：互联网发布：2015年人口老龄化数据编辑：程序博客网时间：2024/06/05 08:53

在学校的时候简单学过HTML+CSS，现在重新拾起web前端开发，目前正学习javascript语言，就记录一下自己学习web前端（http://www.maiziedu.com/course/web/）的过程，今天主要记录的笔记是javascript中事件委托的理解，如果有不对的地方，请一定帮我指正，谢谢^ ^
假设有几个按钮，当点击其中一个按钮的时候，系统默认选择第一个，当被用户点击时的被点击的按钮会变色，而其他按钮将返回原本的颜色。如果不用事件委托的话要怎么写呢？
我的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Document</title>

$(document).ready(function(e) {

$(".toolBar button").click(function(e) {

$(this).addClass("turnRed").siblings("button").removeClass("turnRed")

});

$(".toolBar button:first").click();

})

</script>

.turnRed {

background-color: red;

}

//鼠标移动到的位置按钮变色

button:hover {

background-color: yellow;

}

</style></head>

<body>

<button>click me</button>

</div></body>

</html>

jquery代码中的$(".tool_bar button").click(function(e){})部分注册了一个click事件，在这段代码中计算机需要找到tool_bar类下的button，然后一个一个核对哪个button是click的对象，找到对象之后再调用函数来为它添加添加指定的样式类，同时为不被点击的按钮移除样式类。
这种方式在按钮很少的时候不会有什么影响，可是当按钮过多时毫无疑问将会造成大量的资源浪费，那么程序怎样优化呢？
这里就要用到题目中说到的事件委托机制，事件就是发生的事情，常用的有点击事件onclick，鼠标事件onmouseover与onmouseout等等。而委托则更好理解，就是将一件原本应该由自己做的事情交代给另一个人去做（这里的另一个人指的是父元素），从而达成更好的效率。
先看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Document</title>

$(document).ready(function(e) {

$(".toolBar").click(function(e) {

if (e.target.nodeName === 'BUTTON') {

var $clickbutton = $(e.target);

$clickbutton.addClass('turnRed').siblings('button').removeClass('turnRed');

}

}).find('button:first').click();

})