欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【元素绑定click点击事件方法】，下面是详细的讲解！
元素绑定click点击事件方法
最简单的莫过于使用click方法：
<input id="btn" type="button" value="BUTTON" onclick="alert(1)"/>
<script>
var btn=document.getElementById('btn');
btn.click();
</script>
所有浏览器都弹出了1。但是如果把input换成div呢？
<div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(2)"></div>
<script>
var d1=document.getElementById('d1');
d1.click();
</script>
这次Safari/Chrome中没有弹出2。即不是所有浏览器中的所有元素都支持click方法。事实上只有input/button元素在所有浏览器才具有click方法。
以上的事件都是直接添加在html属性中的（内联事件）。click方法能触发使用el.onXXX/addEventListener/attachEvent添加的事件吗？
<input id="btn1" type="button" value="BUTTON 1"/>
<input id="btn2" type="button" value="BUTTON 2"/>
<script>
var addListener=window.addEventListener ?
function(el, type, fn) { el.addEventListener(type, fn, false); } :
function(el, type, fn) { el.attachEvent('on' + type, fn); };
var btn1=document.getElementById('btn1');
var btn2=document.getElementById('btn2');
btn1.onclick=function(){
alert(3);
};
addListener(btn2, 'click', function() {alert(4)});
btn1.click();
btn2.click();
</script>
所有浏览器都依次弹出了3,4。说明支持click方法的元素，无论使用内联方式还是el.onXX又或addEventListener/attachEvent添加事件都能触发。
click方法已经写入了HTML5草案，如果Safari/Chrome完成对剩下的元素的实现（非input/button）。那么模拟点击将十分简单，直接调用click方法。Firefox也是刚刚在版本5中实现对非input/button元素的click方法实现，这点Safari/Chrome有些落后了。
既然Safari/Chrome中click不可用， 我们就用dispatchEvent来实现了。
<input id="btn1" type="button" value="BUTTON 1" onclick="alert(1)"/>
<input id="btn2" type="button" value="BUTTON 2" onclick="alert(2)"/>
<div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(3)"></div>
<script>
function dispatch(el, type){
try{
var evt=document.createEvent('Event');
evt.initEvent(type,true,true);
el.dispatchEvent(evt);
}catch(e){alert(e)};
}
var btn1=document.getElementById('btn1');
var btn2=document.getElementById('btn2');
var d1=document.getElementById('d1');
dispatch(btn1, 'click');
dispatch(btn2, 'click');
dispatch(d1, 'click');
</script>
依次弹出了1,2,3。换成其它事件添加方式亦可触发。IE中还有个fireEvent去主动触发事件，当然如果是点击事件使用click更好。非点击事件则只能通过fireEvent去触发了。
最后给出我的triggerClick方法，实现方式判断浏览器，判断nodeName。依据是Safari/Chrome不支持非input/button元素的click方法。
function triggerClick( el ) {
var nodeName=el.nodeName,
safari_chrome=/webkit/.test(navigator.userAgent.toLowerCase());
if(safari_chrome && (nodeName !='INPUT' || nodeName !='BUTTON')) {
try{
var evt=document.createEvent('Event');
evt.initEvent('click',true,true);
el.dispatchEvent(evt);
}catch(e){alert(e)};
}else{
el.click();
}
}
上面的实现方式让你能明白浏览器的差异，但实现其实有点罗嗦。直接判断元素是否具有click方法即可，Safari/Chrome中非input/button元素没有click方法，返回undefined。
function triggerClick( el ) {
if(el.click) {
el.click();
}else{
try{
var evt=document.createEvent('Event');
evt.initEvent('click',true,true);
el.dispatchEvent(evt);
}catch(e){alert(e)};
}
}
特性判断也比浏览器判断有更好的前瞻性，比如Safari/Chrome在后续版本中实现了非input/button元素的click方法，那么特性判断的函数仍然可以向下兼容。
以上所述就是本文的全部内容了，希望大家能够喜欢
关于元素绑定click点击事件方法的用户互动如下：
相关问题：如何给元素绑定click点击事件
答：直接类名选择器接.click事件是无法对未来元素生效的，就是说，你后来添加的这个类名用click的方式，是无效的，你可以用delegate或者on 你可以去w3school上看看 >>详细
相关问题：怎么按元素id 使用js为页面元素绑定click()方法？
答：直接用js document.getElementById(id).onclick=function(){}//内容写在函数体里 或者用jquery $("#a").click(function(){ }); >>详细
相关问题：使用jquery对dom元素进行事件绑定，有几种方法？有...
答：Jquery中绑定事件有三种方法：以click事件为例 （1）target.click(function(){}); （2）target.bind("click",function(){}); （3）target.live("click",function(){}); 使用click、change、mouseout等 >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【ajax】用js来解决ajax读取页面乱码-页面乱码
- 【addEventListener】addEventListener和attachEv
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【AngularJS】AngularJS语法详解-语法
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-