怎么用js调用标签的onclick事件

JavaScript015

怎么用js调用标签的onclick事件,第1张

首先获取到标签,然后调用它的click方法就行了。

<!DOCTYPE html>

<html >

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<button id="btn" onclick="click_btn()">Click</button>

<script>

function click_btn(){

alert("click")

}

window.onload=function (){

document.getElementById("btn").click()

}

</script>

</body>

</html>

如图,比方说我有一个函数,而我们需要点击按钮触发指定的函数,这就用到了绑定事件的方法。

如图,假定是点击事件,则在按钮里面添加onclick=函数名即可把函数绑定到按钮上。onclick绑定的是单击事件哦,当然还有很多其他的事件。

如图,绑定事件之后,当我们点击按钮即可触发绑定的函数,非常神奇哦。

当然,也可以给按钮设定一个ID,然后我们获取到带有ID的按钮。

然后在JavaScript中绑定事件也是可以的,这种方法代码比较多,想用哪种看你自己哦。

需要特别注意一点的是,如果用了第二种方法,当要获取id时,如果script脚本写在head里面,则要加上window.onload哦。如果是写在body后面,则不需要写window.onload。

出现场景:

页面有一个输入框A绑定了blur事件,且这个事件里面需要用到ajax请求数据,然后有一个按钮B绑定了点击事件;

在A里面输入完信息后, 还没失去焦点的时候点击B,这个时候发现只执行了A的blur事件,而B的click事件没有触发。(ps: 若blur事件 仅仅只是普通操作,没有ajax异步请求的话 是没问题的)

网上搜到的三种解决办法,(个人觉得都不适合):

1.blur事件加延时,让click先执行,缺点:click事件虽然执行了,但是在blur请求完成前执行的,不能获取到blur请求后的最新数据(pass)

2.给按钮B加个mousedown,并在mousedown里面阻止默认事件 e.preventDefault() ,因为mousedown会优先于blur事件。缺点:这样点击事件会执行,但是blur事件不会触发(pass)

3.按钮B上的点击事件换成mousedown事件,这样两者都会执行,但是mousedown(原click)先执行,类似第一种加延时处理。缺点:除了第一点说的,mousedown事件会在鼠标按下去的一瞬间执行,不是很友好。(pass)

发现上面三种都不好用,于是本人想到,能不能在点击的时候获取到鼠标点了谁,如果被点击的元素有click事件,再在blur的回调函数里面执行(以下方法若有不合适的地方,希望给与指出)