Классическая ошибка. Ваша функция onmouseup будет вызвана уже
после окончания цикла, по событию mouseup. А к этому времени значение i проитерируется с 0 до 4 и четверкой так и останется. В итоге arr[4] == undefined.
Вариант:
<style type="text/css">
.div_class{position:relative; display: inline-block; background-color:gray; border:1px solid red; width:30px; height:30px; margin-left:5px; cursor:pointer;}
.div_class:hover{background-color:green;}
</style>
<body>
<script>
var arr = ["raz","dva","tri"]
var fn = function(i, e) {
alert(arr[i])
}
var ret = function(i) {
return function(e) {
fn.apply(this, [i, e])
}
}
for(var i=0; i<arr.length; i++){
var box_div = document.createElement('div')
box_div.className='div_class'
document.body.appendChild(box_div)
box_div.onmouseup= ret(i)
}
</script>