Javascript css中背景图像上的onclick事件？

我在html中创建了一个div，它创建了一个文本框并为其分配了一个背景图像，我想对该输入字段的背景图像创建一个onclick事件

---

document.getElementsByClassName（“textboxcss”）.onclick=function（）{
警惕（“你好”）；
};
.textboxcss{
背景图像：url（“../images/sub.png”）；
背景重复：无重复；
背景位置：右；
背景位置：8px 13px；
}

更新了答案
请尝试使用
querySelector（）

(function(){
    document.querySelector(".textboxcss").onclick = function () {
       alert("Hello!"); 
    };
}());

例如：


如果要使用
getElementsByClassName（），则需要迭代选择器元素并绑定onClick事件。因为getElementsByClassName（）返回一个
数组

(function(){

    var textInputs = document.getElementsByClassName("textboxcss");

    Array.prototype.forEach.call(textInputs, function () {
        this.onclick = function () { 
            alert("Hello!");
        };
    });

}());

例如：


还注意到您在更新的问题中使用了jquery，
然后，您可以简单地使用jQuery进行查询

$(".textboxcss").click(function(){
   alert("Hello!");
});

或如果要动态添加元素

$("body").on("click", ".textboxcss", function(){
   alert("Hello!");
});

应该是工作

function Alerta(table) 
{
   alert("Hello"); 
}

<div><input class="textboxcss" id="default" type="text" onclick="Alerta()">
</div>

函数Alerta（表）
{
警惕（“你好”）；
}

注意：您可以更改启动JS函数的事件。在模糊，在聚焦，。。。检查此列表
GetElementsByCassName（）
返回一个数组。因此，您至少应该选择数组中的第一个元素

 var elements = document.getElementsByClassName("textboxcss")

 // Assign click event
 elements[0].onclick= function () { 
    alert("Hello"); 
 };

我可以在这里感觉到一些设计问题，但是针对您的问题，您可以通过输入元素的
onfocus
或
onclick
来实现它

(function() {
    // your page initialization code here
    // the DOM will be available here
    document.querySelector(".textboxcss").onfocus = function() {
        alert("Hello");
    };
})();

或者

(function() {
    document.getElementsByClassName("textboxcss")[0].onfocus = function() {
        alert("Hello");
    };
})();

或绑定onclick事件（如果需要）

(function() {
    document.getElementsByClassName("textboxcss")[0].onclick = function() {
        alert("Hello");
    };
})();

使用要在单击时指定的背景图像创建另一个类。然后单击添加另一个类（使用css编写的背景图像！important）
您需要将.css类分别分配给背景。共享完整代码以更好地理解

.imageControl {
background-image: url("../images/sub.png");
    background-repeat: no-repeat;
    background-position: right;
    background-position: 8px 13px;
}

HTML:

你不能用
focus
event来代替吗？你试过小提琴吗。。如果你有，请在这里发布链接。@Sandeep Nayak:我也尝试过这个，但不是为什么你不尝试以ID为目标，而不是以类为目标。下面是一个以上面的ID为目标的工作fiddle:document.getElementsByClassName返回一个元素数组。因此，您应该附加数组中每个元素的onclick。：我收到此错误消息无法设置的属性“onfocus”null@lekshminair检查演示，它在那里工作。您也可以在我的回答中尝试使用另一种方法作为返回。“无法在焦点上设置属性”，此错误意味着它无法在您的页面中获取document.getElementsByClassName（“textboxcss”）[0]选择器。请确保您仅在文档准备就绪时运行javascript。@lekshminair更新我的答案，使其仅在文档准备就绪时运行。现在试试！：获取此错误消息无法在fiddle中设置null的属性“onclick”？您正在使用哪个浏览器？因为我在firefox和Chrome上都做了测试，你试过了吗？我指的是HTML/JS两者？确保在使用querySelector（“.textboxcss”）时。您需要添加
或
#
，这取决于您的选择器类型是文本输入元素动态注入的类还是IDIs？如果不尝试，
（function（）{document.querySelector（.textboxcss”）.onclick=function（）{alert（“Hello！”；}；}（））@user3713916对不起，你能给我举个例子吗
<div>
    <span class="imageControl"></span>
    <input id="default" type="text">
</div>

document.getElementByClassName("imageControl").addEventListener("click", function() {
// To-Do on click of background image
});