在Javascript中处理事件

我对Javascript世界还很陌生。我有三张照片：

1. mango.jpg
2. apple.jpg 
3. pineapple.jpg.

我想做的是，每当我在浏览器中单击图像时，它就会变得模糊。我还有3张模糊的图片，名为：

1.apple_blur.jpg
2.mango_blur.jpg 
3.pineapple_blur.png

这是我下面的代码（我正在尝试用最短的方法来实现这一点）

我还活着！
window.onload=pageLoadedHandler；
函数pageLoadedHandler（）{
blur_images=[{id_pic:[“apple”，“apple_blur.jpg”]}，{id_pic:[“mango”，“mango_blur.jpg”]}，{id_pic:[“菠萝”，“菠萝_blur.png”]}；
对于（i=0；i编辑：

您的代码中几乎没有更正：

window.onload = pageLoadedHandler;
/* moved outside to make it global and used `var` keyword */
var blur_images=[{id_pic:["apple","apple_blur.jpg"]},{id_pic:["mango","mango_blur.jpg"]}, {id_pic:["pineapple","pineapple_blur.png"]}];
function pageLoadedHandler() {
  for(var i=0;i<blur_images.length;i++) { //removed `=` sign and using `i++` instead of `++i`
//             ^                    ^^
       document.getElementById(blur_images[i].id_pic[0]).onclick=blur_func;
  }
}
function blur_func(e) {
    e = (e || window.event); //get the right event
    var id = (e.target || e.srcElement).id; //get the clicked image id
    var blur_image;
    for(var i=0;i<blur_images.length;i++) { //removed `=` sign and using `i++` instead of `++i`
  //             ^                    ^^
      if(id === blur_images[i].id_pic[0]){//got the one clicked
        blur_image=blur_images[i];
        break;
      }
    }
    document.getElementById(blur_image.id_pic[0]).src=blur_image.id_pic[1];
}

window.onload=pageLoadedHandler；
/*移动到外部使其成为全局的，并使用'var'关键字*/
var blur_images=[{id_pic:[“apple”，“apple_blur.jpg”]}，{id_pic:[“mango”，“mango_blur.jpg”]}，{id_pic:[“菠萝”，“菠萝_blur.png”]}；
函数pageLoadedHandler（）{
对于（var i=0；i假设您有一个可预测的文件名，
apple.jpg
和
apple\u blur.jpg
，我建议您利用
addEventListener（）
方法，该方法允许您传递接收事件的节点，只需更改其
src
属性：

function toggleBlur () {
    // caching the node, and its src property
    // to avoid repeated look-ups:
    var image = this,
        source = image.src;

    // if the string of the src property _does not_ contain '_blur'
    // indexOf() will return -1
    if (source.indexOf('_blur') === -1) {

        // replacing the file-type '.jpg' with
        // the supplied '_blur.jpg':
        image.src = source.replace('.jpg', '_blur.jpg');
    }
    else {
        // replacing '_blur.jpg' with '.jpg':
        image.src = source.replace('_blur.jpg', '.jpg');
    }
}

// retrieving all <img> elements from the document:
var images = document.getElementsByTagName('img');

// iterating over those <img> element nodes with a for loop:
for (var i = 0, len = images.length; i < len; i++) {
    // binding the toggleBlur function as an event-listener
    // for the 'click' event:
    images[i].addEventListener('click', toggleBlur);
}

函数切换模糊（）{
//缓存节点及其src属性
//为避免重复查找，请执行以下操作：
var image=这个，
source=image.src；
//如果src属性的字符串\u不包含“\u blur”
//indexOf（）将返回-1
if（source.indexOf（'u blur'）=-1）{
//将文件类型“.jpg”替换为
//提供的'\u blur.jpg'：
image.src=source.replace（'.jpg'，'\u blur.jpg'）；
}
否则{
//将“_blur.jpg”替换为“.jpg”：
image.src=source.replace（“'u blur.jpg'，'.jpg'）；
}
}
//从文档中检索所有元素，
//以及使用
//Array.prototype.slice以及Function.prototype.call：
var images=Array.prototype.slice（document.getElementsByTagName（'img'），0）；
//迭代那些
参考资料：









我想你从未见过“this”指针？这个例子怎么样



我还活着！
window.onload=函数（）{
var images=document.getElementsByClassName（“水果”）；
对于（var i=0；i

function toggleBlur () {
    // caching the node, and its src property
    // to avoid repeated look-ups:
    var image = this,
        source = image.src;

    // if the string of the src property _does not_ contain '_blur'
    // indexOf() will return -1
    if (source.indexOf('_blur') === -1) {

        // replacing the file-type '.jpg' with
        // the supplied '_blur.jpg':
        image.src = source.replace('.jpg', '_blur.jpg');
    }
    else {
        // replacing '_blur.jpg' with '.jpg':
        image.src = source.replace('_blur.jpg', '.jpg');
    }
}

// retrieving all <img> elements from the document:
var images = document.getElementsByTagName('img');

// iterating over those <img> element nodes with a for loop:
for (var i = 0, len = images.length; i < len; i++) {
    // binding the toggleBlur function as an event-listener
    // for the 'click' event:
    images[i].addEventListener('click', toggleBlur);
}

function toggleBlur () {
    // caching the node, and its src property
    // to avoid repeated look-ups:
    var image = this,
        source = image.src;

    // using a conditional operator, known as a 'ternary,' to
    // perform an assessment (as above); if the assessment is
    // true or truthy we perform the action betwee the '?' and
    // ':' characters, otherwise false or falsey we perform
    // the code following the ':' character. Once either action
    // is completed the result is passed as the new value of
    // image.src:
    image.src = source.indexOf('_blur.jpg') === -1 ? source.replace('.jpg','_blur.jpg') : source.replace('_blur.jpg', '.jpg');
}

// retrieving all <img> elements from the document,
// and converting the NodeList to an array, using
// Array.prototype.slice, along with Function.prototype.call:
var images = Array.prototype.slice(document.getElementsByTagName('img'), 0);

// iterating over those <img> element nodes using
// Array.prototype.forEach():
images.forEach(function (image) {
    // 'image' here is the DOM Node from the Array over
    // which we're iterating:
    image.addEventListener('click', toggleBlur);
});

// here we store the blurred and non-blurred states together:
var imageObject = {
    'apple' : 'apple_blur',
    'apple_blur' : 'apple',
    'mango' : 'mango_blur',
    'mango_blur' : 'mango',
    'pineapple' : 'pineapple_blur'
};

function toggleBlur () {
    // caching the <img> element node:
    var image = this,

    // here we use getAttribute() to get the attribute value,
    // as using image.src returns the full absolute URL and we only need
    // the file-path (assuming your image element's HTML remains as-
    // written in your posted code), we then replace the '.jpg' with
    // an empty string, to remove the file-type:
        source = image.getAttribute('src').replace('.jpg', '');

    // setting the 'src' attribute, with setAttribute(), to
    // the value associated with the current attribute-value
    // in the imageObject:
    image.setAttribute('src', imageObject[source]);
}

var images = Array.prototype.slice.call(document.getElementsByTagName('img'), 0);

images.forEach(function (image) {
    image.addEventListener('click', toggleBlur);
});