the front-end beginner wrote a simple event handle binding function.
<!DOCTYPE html>
<html>
<head>
<title>class operation demo</title>
<style type="text/css">
.b1{
width: 100px;
height: 100px;
background-color: yellow;
}
.b2{
width: 300px;
height: 300px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function() {
var btn01 = document.getElementById("btn01");
var box = document.getElementById("box");
function bind(obj,eventStr,callback) {
if ( obj.addEventListener )
obj.addEventListener(eventStr,callback,false);
else
obj.attachEvent("on" + eventStr,function(){
callback.call(obj);
});
}
function changeClass() {
// this.className += " b2";
alert("test");
}
bind(btn01,"click",changeClass);
};
</script>
</head>
<body>
<button id="btn01">box</button>
<br /><br />
<div id="box" class="b1"></div>
</body>
</html>
question has been modified, and the question now is: I want to use this button to change the class that specifies div (for example, the id in body is the div of box), but how do I modify the bind function? Or is there a better solution?