JS设置onClick事件

JavaScript023

JS设置onClick事件,第1张

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)

}

}

也可以实现这个效果

区别如下:

1、onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么。

2、click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件

3、click可以理解为一次简单的触发,只执行一次,找不到以后就不再执行;

4、onclick则是给这个id注册一种行为,可以重复触发

5、click 是方法;onclick是事件;执行click就是模拟鼠标点击,同时会触发onclick事件。

扩展资料:

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

参考资料:Javascript-百度百科

DOM的fireEvent和onclick(这只是个代表)有以下区别:

1. onclick需要DOM真正添加了onclick事件,否则会报“对象不支持此属性或方法”错误

2. onclick不会引起IE的冒泡过程,而fireEvent会引起冒泡,fireEvent更贴近用户真实的行为触发

3. 由第二条得出,fireEvent在即使DOM没有click事件也可以fireEvent,而不会报错(更贴近用户真实行为)

最后可以拿下面的代码测试:

<ul onclick='alert(event.srcElement.innerHTML)'><li id='id1' onclick='alert(1)'>i am one</li><li id='id2'>i am two</li><li id='id3'>i am three</li></ul><button onclick='document.getElementById("id1").onclick()'>click me!</button><button onclick='document.getElementById("id1").fireEvent("onclick")'>fireEvent !</button>

原文:http://www.js8.in/731.html