JS设置onClick事件

html页面设置onClick事件可以在html中设置，也可以在js中设置，下面分别介绍。

在html中设置

你的代码就是在html中设置的方法，这是测试页面，

现在html代码的元素中添加onclick

<input type="text" id="text" onClick="f()">

再在js代码中声明一个函数

function f(){

alert(1)

}

只在js中设置

第二种方法是只在js中设置，这是测试页面

html代码可以更加纯粹，不用写onclick

<input type="text" id="text">

在js代码中，先找到这个元素，再去绑定一个事件

window.onload  = function() {

document.getElementById("text").onclick = function() {

alert(1)

}

}

也可以实现这个效果

js 的单双击事件同时存在会有一个问题：双击事件会同时触发单击事件，两个事件存在冲突。

我们加一个延迟时间就能很好的解决这个问题。

原理： 当接收到第一个点击时，我们先把单击事件存储在这个是全局变量 click_store 里，如果 0.3 秒内没有接收到双击事件，就去执行它，如果接收到了，我们把它清理掉，然后去执行双击事件。setTimeout() 可以实现延迟执行。

可以在按钮元素上增加事件属性onclick，属性内写你要执行的代码或函数。

也可以在代码中直接绑定事件，如通过querySelector等查找到元素后，在元素上直接加onclick事件。

还可以通过事件指派，绑定事件在按钮上面。

---