元素绑定click点击事件方法

click点击事件

47 浏览量更新于2023-03-03 收藏 47KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

元素绑定元素绑定click点击事件方法点击事件方法

当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次

click。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

最简单的莫过于使用click方法：

var btn = document.getElementById('btn');

btn.click();

</script>

所有浏览器都弹出了1。但是如果把input换成div呢？

var d1 = document.getElementById('d1');

d1.click();

</script>

这次Safari/Chrome中没有弹出2。即不是所有浏览器中的所有元素都支持click方法。事实上只有input/button元素在所有浏览

器才具有click方法。

以上的事件都是直接添加在html属性中的（内联事件）。click方法能触发使用el.onXXX/addEventListener/attachEvent添加的

事件吗？

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来实现了。

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方法。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38664159

粉丝: 5
资源: 922

会员权益专享

元素绑定click点击事件方法

JQuery 给元素绑定click事件多次执行的解决方法

JQuery给元素绑定click事件多次执行的解决方法

解决layui动态添加的元素click等事件触发不了的问题

理解JQuery中的事件处理与绑定方法

React中的事件处理：事件绑定与事件代理

React中的事件处理和事件绑定

JavaScript事件绑定与事件处理详细教程

掌握AngularJS中的数据绑定和事件处理

innerhtml后如何给元素动态绑定click事件

js div元素上绑定点击事件调用方法，方法中获取元素

给动态添加的document.createElement("li") 绑定click事件

给el-drawer的容器元素绑定一个click事件监听器

动态绑定click事件

vue动态绑定click事件

怎么使用事件委托，给它们的父元素绑定点击事件

echarts绑定click事件

解决：点击子元素（子元素自己也绑定了事件）不触发父元素绑定的事件

vue事件委托 子元素中嵌套了其他元素 获取绑定点击事件的节点

原生Js给window新增点击事件，包括已绑定点击事件的元素

jquery html动态添加的元素绑定事件详解

会员权益专享

最新资源

vue事件委托子元素中嵌套了其他元素获取绑定点击事件的节点