Question

我试图做一个相对简单的javascript程序/页面，只有3个滑块RGB影响方形和圆形的颜色。

当我有事件监听器＆＃39; inline＆＃39;使用输入元素：即onchange="someFunction(x,y)"

然而，当我将事件监听器移动到javascript中并使用addEventListener时，它只在页面加载时起作用，然后再也不起作用......几乎就像removeEventListener一样已被召集，但我还没有这样做。

是的，我确保在调用javascript之前已在页面上加载所有元素。

我已修改此代码只是为了给我一个ALERT而不是实际调用我想要的函数slideUpdate，仅用于调试目的。

这是： JAVASCRIPT：

var colorBox = document.getElementById("colorbox");
var colorCircle = document.getElementById("colorCircle");
var colorPicker = document.getElementById("colorPicker");
var sliderRed = document.getElementById("Red");
var sliderGreen = document.getElementById("Green");
var sliderBlue = document.getElementById("Blue");

//sliderRed.addEventListener("onchange", alertForDebug() );
//sliderRed.addEventListener("onclick", alert(sliderRed.value) );

document.addEventListener('DOMContentLoaded', function () {
    alert("document loaded!");
    sliderRed.addEventListener("change", alert(sliderRed.value) );
    //document.querySelector('#Red').addEventListener('change', slideUpdate(sliderRed.value, sliderRed.id) );
    //document.querySelector('#Green').addEventListener('onchange', slideUpdate(this.value, this.id) );
    //document.querySelector('#Blue').addEventListener('onchange', slideUpdate(this.value, this.id) );
} );

function slideUpdate(value, elementID) {
    alert("slideUpdate("+value+","+elementID+")");
    //console.log("function slideMe() reached. value=" + value + " elementID="+elementID);
    //rangeSlider.innerHTML = "Value=";// + rangeSlider.value;
    //document.getElementById(elementID).innerText = "Value=" + value;
    //elementID.innerText = value;
    //console.log(elementID + "Display");
    document.getElementById(elementID+"Display").innerHTML = "Value=" + value; //could do this using variables instead of  getElementById each time

    //now update the color box to reflect current color
    var currentColor = colorBox.style.backgroundColor;
    var splitString = currentColor.split(",");
    var red = parseInt(splitString[0].slice(4));  //don't the "rgb(" in there
    var green = splitString[1];
    var blue = parseInt(splitString[2]);
    var newColor = "rgb("; //incomplete
    console.log(currentColor + "value = " + value);
    console.log("splitString=" + splitString);
    console.log("old color red="+red +"    green="+green+"    blue="+blue);

    switch(elementID) {
    case "Red":
        //alert("Red");
        newColor = "rgb("+value.toString()+","+green+","+blue;
        red=value;
        break;
    case "Green":
        newColor = "rgb("+red+","+value.toString()+","+blue;
        green=value;
        break;
    case "Blue":
        newColor = "rgb("+red+","+green+","+value.toString()+")";
        blue=value;
        break;
    }

    //console.log(value.toString(16));
    colorBox.style.backgroundColor = newColor;
    colorCircle.style.fill = newColor;
    console.log("new color red="+red +"    green="+green+"    blue="+blue);
    var convertedColor = rgbToHex(red, green, blue);
    colorPicker.value = convertedColor;
    console.log("convertedColor="+convertedColor);
}

/*
function rgbToHex(red, green, blue) {
    var rgb = blue | (green << 8) | (red << 16);
    return '#' + (0x1000000 + rgb).toString(16).slice(1);
    //return '#' + rgb.toString(16)
}*/

/*function rgbToHex(r, g, b) {
    if(r < 0 || r > 255) alert("r is out of bounds; "+r);
    if(g < 0 || g > 255) alert("g is out of bounds; "+g);
    if(b < 0 || b > 255) alert("b is out of bounds; "+b);
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1,7);
}*/

function hexstr(number) {
    var chars = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
    var low = number & 0xf;
    var high = (number >> 4) & 0xf;
    return "" + chars[high] + chars[low];
}

function rgbToHex(r, g, b) {
    return "#" + hexstr(r) + hexstr(g) + hexstr(b);
}

function updateColor(newColor) {
    console.log(newColor);
colorBox.style.backgroundColor = newColor;
colorCircle.style.fill = newColor;
colorPicker.value = newColor;

var red = parseInt("0x"+newColor.slice(1,3));
var green = parseInt("0x"+newColor.slice(3,5));
var blue = parseInt("0x"+newColor.slice(5));

//now update the sliders
document.getElementById("Red").value= red;
document.getElementById("Green").value= green;
document.getElementById("Blue").value= blue;
document.getElementById("RedDisplay").innerHTML = "Value=" + red;
document.getElementById("GreenDisplay").innerHTML = "Value=" + green;
document.getElementById("BlueDisplay").innerHTML = "Value=" + blue;
}

HTML文件：

<!DOCTYPE HTML>

<HTML>

<head>
<p align="center"> Light Controller</p>
</head>

<body>

<p>Use the sliders to control the light R,G,B values for color displays below.</p>

<div>
<label for="Red">Red 0
  <input type="range" ID="Red" min=0 max=255 ></input>
255 
<label ID="RedDisplay">Value=</label>

</label>

</div>
<div>
<label for="Green">Grn 0
  <input type="range" ID="Green" min=0 max=255></input>
255 <label ID="GreenDisplay"> Value=</label></label>
</div>

<div>
<label for="Blue">Blu 0
  <input type="range" ID="Blue" min=0 max=255></input>
255 <label ID="BlueDisplay"> Value=</label></label>
</div>

</body>


<input id="colorbox" STYLE="background-color: #FF0000;""></input>



<svg width="100" height="100">
   <circle id="colorCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg> 

<input type="color" id="colorPicker" onchange="updateColor(this.value)"></input>

<script src="LiteCntrlMain.js"></script>

Answer 1

addEventListener将函数引用作为其第二个参数。在这里，您在尝试添加时直接调用该函数。这应该适合你：

document.addEventListener('DOMContentLoaded', function () {
    alert("document loaded!");
    sliderRed.addEventListener("change", function(){alert(sliderRed.value)} );
    // wrapped in a function
} );

您必须将此模式应用于您的所有活动。

Answer 2

sliderRed.addEventListener("change", alert(sliderRed.value) );会立即调用alert函数并将返回值赋给事件侦听器，将其包装在一个闭包中，它将起作用：

sliderRed.addEventListener("change", function(){
  alert(sliderRed.value) 
});

javascript addEventListener不能多次使用

2 个答案: