元素绑定click点击事件方法
作者:bea
最简单的莫过于使用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="backgro
最简单的莫过于使用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方法,那么特性判断的函数仍然可以向下兼容。
以上所述就是本文的全部内容了,希望大家能够喜欢
有用 | 无用
<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方法,那么特性判断的函数仍然可以向下兼容。
以上所述就是本文的全部内容了,希望大家能够喜欢
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JavaScript中用getDate()方法返回指定日期的教程
- JavaScript的Date()方法使用详解
- 简介JavaScript中的unshift()方法的使用
- JavaScript中的splice()方法使用详解
- JavaScript实现Iterator模式实例分析
- JavaScript中用sort()方法对数组元素进行排序的操作
- JavaScript数组迭代器实例分析
- 在Javascript中处理数组之toSource()方法的使用
- JavaScript中的some()方法使用详解
- 详解JavaScript中shift()方法的使用
- 在JavaScript中处理数组之reverse()方法的使用
- JavaScript中reduce()方法的使用详解
- 简介JavaScript中的push()方法的使用
- JavaScript中pop()方法的使用教程
- 在JavaScript中操作数组之map()方法的使用
- JavaScript中join()方法的使用简介
- Jquery日期选择datepicker插件用法实例分析
- Jquery实现遮罩层的方法
- Js数组排序函数sort()介绍