html如何设置自动点击事件,使用javascript给html元素添加click事件

使用javascript给html元素添加click事件

在html给元素添加事件我们通常情况下的代码是这样的

直接给元素添加点击事件，我们使用onclick方法。我们也可能通过javascript给元素动态添加事件，根据不同的场景有多种给元素添加点击事件的方法。

1.直接在html tag标签中添加onclick事件

2.使用js DOM获取元素添加方法document.getElementById("btn").onclick = functionName;

//直接添加匿名方法

document.getElementById("btn").onclick = function()

{

alert('ahaha');

};

3.通过使用事件监听的方式给元素添加绑定事件val el = document.getElementById("btn");

if(el.addEventListener)

el.addEventListener("click",functionName,false);

if(el.attachEvent)

el.attachEvent("onclick",functionName);

注意看上面有两个if条件的判断，这样的做法是为了兼容浏览器，中IE中我们可以使用attachEvent方法,并且在IE中的attachEvent事件的名称是包含on的，如添加其它事件也是一样需要添加on,如：onChange onblur onsubmit等

4.如何给一个按钮对象添加多个同一个事件呢？

我猜你已经知道怎么写了var btn = document.getElementById("btn");

btn.onclick = dosomething1;

btn.onclick = dosomething2;

btn.onclick = dosomething3;

咱们执行一下，我们会发现最后只会执行dosomething3的函数。那我们应该怎么做呢？这时候就到了我们attachEvent主角出场的时候了。btn.attachEvent("onclick",dosomething1);

btn.attachEvent("onclick",dosomething2);

btn.attachEvent("onclick",dosomething3);

在IE浏览器中执行会发现顺序是：

dosomething1 ------>>> dosomething2 ------>>> dosomething3

我们使用addEventListener为chrome firefox同样添加如上的方法时候，执行会发现顺序是：

dosomething3 ------>>> dosomething2 ------>>> dosomething1

看到没，这TM就是前端，兼容浏览器会让你觉得这个世界到处都充满了恶意，但是放心问题已经有人解决了。

在开源中国看到的内容就直接贴出链接好了，大家自行去看吧。

通过上面的几种方法，我相信再让你完成一些变态的需求的时候就不会怕了。

html如何设置自动点击事件,使用javascript给html元素添加click事件相关推荐

javascript/jquery给动态加载的元素添加click事件
/** 这种写法:在重新加载数据后事件依然有效*/$(document).on('click', '#district_layer ul li', function () { }); 转载于:http ...
html div的点击事件,Jquery为DIV添加click事件的简单实例
今天在做一个抽奖活动时小编要做一个抽奖没有中奖之后直接弹出一个提示,然后再给div添加一个事件了,下面我们来看这个例子的做法. html jquery事件 $('#click_ms').click(f ...
Vue根据条件添加click事件
需求:根据特定条件,增加或者去掉click事件(例如:clickFlag == true时,添加click事件:clickFlag == false时,去掉click事件:) 解决方法: 方式一:在绑 ...
使用mshtml为页面中的超级链接添加Click事件 - 蜡人张 - 博客园
导读: 使用mshtml为页面中的超级链接添加Click事件在使用mshtml操作HTML页面时可能遇到要为页面的超级链接添加Click事件的操作,可以用下面的代码来完成: foreach(msht ...
html如何设置自动点击,按键精灵怎么设置自动点击
1.首先打开[按键精灵],再打开的主界面左侧找到[快速向导],并且单击它. 2.在打开的界面,找到[鼠标左键连点器]选项,并且双击打开它. 3.这样就打开了这个命令的脚本,在界面的左侧找到并且单击[鼠 ...
Element中 el-tag 点击事件 el-tag添加@click事件无效
一般在使用el-tag 显示一个状态,有时需要设置一个点击事件,通常会如下这样来写 <el-tag type="error" @click="onClick(sco ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
原生js 给动态添加的元素添加（事件监听器）
原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...
获取滑动条位置，动态调整对话框显示位置；为动态添加的button添加click事件
1.获取滑动条位置,动态调整对话框显示位置应用场景:页面上有三个按钮,所处位置高度不同,有的按钮需要移动滑动条才能看到,各个按钮点击后要弹出同一个对话框,为了保证对话框始终显示在当前视野的中央位置, ...
【JavaScript】——input元素的oninput事件和onchange事件
1.oninput事件是在输入框中输入时就会触发,该事件在<input>或<textarea>元素的值发送改变时触发. 2.onchange事件是在输入框输入完内容后,输入框失 ...

html如何设置自动点击事件,使用javascript给html元素添加click事件

html如何设置自动点击事件,使用javascript给html元素添加click事件相关推荐

最新文章

热门文章