使用纯 JavaScript 处理“onclick”事件

IT技术 javascript html events event-handling dom-events
2021-03-01 08:42:14

这真的很简单，但我对 JavaScript 还是很陌生，刚刚发现了 JSFiddle。我试图找到带有getElementById()禁用和启用按钮的元素。我错过了什么？

<form name="frm" > 
  <div id="chkObj"> 
    <input type="checkbox" name="setChkBx" onclick="basicList.modifyAndEnableButton(this)"></input>        
</div>
<div id="Hello"> 
    <input type="button" name="btn" value="Hello"></input>        
  </div>
</form>

这是我用来添加复选框的列表，因为将有多个：

 var basicList = {
    'items': {},
    'modifyAndEnableButton': function(obj1) {
        var element = document.getElementsByName("btn");
        if (obj1.checked == true && element.getAttribute('disabled') == false) {
            element.getAttribute('disabled') = true;
            this.addRecord(obj2);
        } else if (element.getAttribute('disabled') == true) {
            if (hasItems == false) {
                element.getAttribute('disabled') = false;
            }
        } 
    }
};

http://jsfiddle.net/Arandolph0/E9zvc/3/

3个回答

所有浏览器都支持这个（见这里的例子）：

mySelectedElement.onclick = function(e){
    //your handler here
}

但是，有时您想添加一个处理程序（而不是更改相同的处理程序），并且更一般地在可用时您应该使用addEventListener（需要 IE8- 的垫片）

mySelectedElement.addEventListener("click",function(e){
   //your handler here
},false);

这是一个工作示例：

var button = document.getElementById("myButton");
button.addEventListener("click",function(e){
    button.disabled = "true";
},false);

和 html：

<button id='myButton'>Hello</button>

（小提琴）

以下是一些有用的资源：

useCaptutr 如果您不确定捕获是什么，您可以安全地忽略它
2021-04-30 08:42:14
什么false在addEventListener？
2021-05-01 08:42:14
@AprilRandolph 再次检查我的代码，这仍然是一个错字。您的活动名称有误。同样，您可以使用开发人员工具检查元素上触发了哪些事件。快乐编码！:)
2021-05-07 08:42:14
@AprilRandolph 你有一个错字。请不要再次要求我更正变量名称中的拼写错误 :) 您可以使用 Chrome 开发人员工具自己找到这些。
2021-05-17 08:42:14

本杰明的回答涵盖了一切。但是，您需要一个委托模型来处理动态添加的元素上的事件

document.addEventListener("click", function (e) {
    if (e.target.id == "abc") {
        alert("Clicked");
    }
});

对于 IE7/IE8

document.attachEvent('onclick', function (e) {
    if (window.event.srcElement == "abc") {
        alert("Clicked");
    }
});
分享知识 :-) 我试图提倡授权，这样人们就不会遇到那些关于为什么活动不起作用的噩梦。它亲自发生在我身上，直到我知道它。委托有什么不好的吗？
2021-04-25 08:42:14
@Giv 谢谢，但它们都适用于所有浏览器。（最新版本，加上 IE7/8 模式下的 IE 10）
2021-05-01 08:42:14
在 addEventListener 中，您应该更改e.srcElement.id为e.target.id并在 attachEvent 中更改e.srcElement.id为window.event.srcElement.id
2021-05-12 08:42:14
明白了！MDN 说这个 event.target 是事件发生的原始元素。但是，Internet Explorer 将其称为 event.srcElement。事实上，Chrome 和 Safari 都开始设置了。您可以这样做以获得最大的兼容性
2021-05-17 08:42:14

你有一个Error在这里

btnRush 应该 Rushbtn

这是我刚刚制作的跨浏览器事件的示例（未测试））

var addEvent = function( element, type, callback, bubble ) { // 1
    if(document.addEventListener) { // 2
        return element.addEventListener( type, callback, bubble || false ); // 3
    }
    return element.attachEvent('on' + type, callback ); // 4
};



var onEvent = function( element, type, callback, bubble) { // 1
    if(document.addEventListener) { // 2
        document.addEventListener( type, function( event ){ // 3
            if(event.target === element || event.target.id === element) { // 5
                callback.apply(event.target, [event]); // 6
            }
        }, bubble || false);
    } else {
        document.attachEvent( 'on' + type, function( event ){ // 4 
            if(event.srcElement === element || event.srcElement.id === element) { // 5
                callback.apply(event.target, [event]); // 6
            }
        });
    }

};

脚步

  1. 创建一个接受 4 个值的函数（自我解释）
  2. 检查浏览器是否支持 addEventListener
  3. 在元素上添加事件
  4. 否则在旧 IE 的元素上添加事件
  5. 检查（单击的）元素是否为 = 传递的元素

  6. 调用回调函数将元素作为 this 传递并传递事件

    该onEvent用于事件委派。这addEvent是为您的标准事件。

    这是您可以使用它们的方法

前 2 个用于动态添加的元素

onEvent('rushBtn', 'click', function(){
    alert('click')
});

var rush = document.getElementById('rushBtn');

onEvent(rush, 'click', function(){
    alert('click');
});

// Standard Event
addEvent(rush, 'click', function(){
    alert('click');
});

事件委托基本上就是这样。

向文档添加一个点击事件，这样该事件就会随时随地触发，然后您检查被点击的元素以查看它是否与您需要的元素匹配。这样它就会一直有效。

演示

其它你可能感兴趣的问题
上一篇我可以防止将 Leaflet 地图平移出世界边缘吗？ 下一篇在 NodeList 上添加事件监听器