JS设置onClick事件

一、JS设置onClick事件

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

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

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

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

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

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

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

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

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

二、js点击事件

在javascript中，可以为某个元素指定事件，指定的方式有以下三种：

2、在javascript中，使用onclick属性

3、在javascipt中，使用addEvenListener()方法

（1）在第二、三种方法中，可以向函数传入一个event对象，并读取其相应属性，而方法一不可以。

（1）在第一种方法中，onclick大小写无关，但在第二种方法中，必须使用小写。因为HMTL对大小写不敏感，而JS则会区分大小写。

（2）在第二、三种方法中，指定函数名时没有双引号，而第一种作为一个HTML属性，需要双引号。

（3）第一种方法需要括号，第二、三种不需要。

document.getElementById("jsOnClick").onclick= clickHandler2;

document.getElementById("adEventListener").addEventListener("click",clickHandler2);

三、js如何使onclick事件无效

js使onclick事件无效的方法很简单，只需要选中这个元素，然后让它的onclick赋值为null即可。

<button onclick="alert('上面按钮点击')" id="btn">点击有警告</button>

<button onclick="document.getElementById('btn').onclick=null;alert('成功使上面按钮点击失效！');">使上面按钮点击事件失效</button>

其中最关键的是这句document.getElementById('btn').onclick=null;

2、如图，这是测试点击上面的按钮弹出的警告

3、点击下面按钮，提示上面的按钮点击失效

4、再次点击上面的按钮没有弹出效果了