Use css selectors to add the html tag 's action

最新推荐文章于 2025-08-04 15:43:36 发布

最新推荐文章于 2025-08-04 15:43:36 发布 · 176 阅读

文章标签：

#HTML #CSS

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种利用Behavior.js库简化DOM元素行为绑定的方法，通过CSS选择器将JavaScript行为与HTML元素关联起来，使页面代码更加清晰。文章提供了一个删除列表项的实际案例。

用css selectors 绑定html tag的行为
等同于下面的语句:
[code]<li>
<a onclick="this.parentNode.removeChild(this)" href="#">
Click me to delete me
</a>
</li>[/code]
这里用到了Ben Nolan 在 [url]http://bennolan.com/behaviour/[/url] 上发布的Behaviour.js .

1 . html文件如下:
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<script type="text/javascript" src="behavior.js"></script>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<ul id="example">
<li>
<a href="/delete">Click me to delete me</a>
</li>
</ul>
</body>
</html>
[/code]
2. example.js文件如下：
[code]var myrules = {
'#example li' : function(el){
el.onclick = function(){
this.parentNode.removeChild(this);

}
}
};

Behaviour.register(myrules);[/code]

结论: 这样的结果会让view层更清洁.

[附]behavior.js: [url]http://bennolan.com/behaviour/behaviour.js[/url]