【JS】JS-onclick事件与click鼠标事件

JS-onclick事件与click鼠标事件

🔥发布于 2 月 4 日

鼠标事件

1. onclick事件

onclick事件会在鼠标(对象)点击时发生【绑定】

<input id="btn1" type="button" onclick="函数名();" />

function test[函数名]() {

alert("Hello World!");

}

当点击id="btn1"时,就会触发onclick事件

onclick事件与click事件的不同,onclick事件会在click事件之前执行

<input id="btn2" type="button" onclick="test();" />

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

btn2.addEventListener('click', showMsg, false); //鼠标单击的时候调用showMes这个函数

function showMsg() {

alert("事件监听");

}

当点击id="btn2"时,先执行onclick事件的方法test(),再执行click事件的showMsg()方法;

onclick绑定事件

方法一:把onclick绑定在标签上
HTML元素行间事件(也可以叫HTMl事件处理程序),直接在html标签里添加事件。
缺点:html和js代码紧密耦合

<input id="btn1" type="button" onclick="test();" />

方法二:onclick的js绑定办法

//把一个函数赋值给一个事件处理程序属性

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

function abc() {

alert('abc');

}

btn1.onclick = abc; //当点击的时候执行abc这个函数,等价于 btn1.onclick=function abc(){alert('abc');}

//btn1.onclick = null; //去掉绑定的事件

方法三:click的js绑定方法(推荐)

//通过“事件监听”的方式来绑定事件

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

btn2.addEventListener('click', showMsg); //鼠标单击的时候调用showMes这个函数

//addEventListener() 方法用于向指定元素添加事件句柄

function showMsg() {

alert("事件监听");

}

//btn2.removeEventListener('click', showMsg); //去除绑定

onclick事件和click事件触发事件

除了手动点击外,js也可以触发点击事件

  1. .onclick()事件

var btn2Onclick = document.getElementById("btn2").onclick();  //获取btn2onclick事件

只会触发onclick事件

  1. .click()事件

document.getElementById("btn2").click();

会先出发onclick事件,再触发click事件

onclick事件和click事件触发事件【解绑】

解绑onclick事件

btn1.onclick = null; //去掉绑定的事件

解绑click事件

btn2.removeEventListener('click', showMsg, false); //去除绑定

javascriptonclick事件与click事件

阅读 4更新于 2 月 4 日

本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议

avatar

🔥

1 声望

0 粉丝

0 条评论

得票时间

avatar

🔥

1 声望

0 粉丝

宣传栏

鼠标事件

1. onclick事件

onclick事件会在鼠标(对象)点击时发生【绑定】

<input id="btn1" type="button" onclick="函数名();" />

function test[函数名]() {

alert("Hello World!");

}

当点击id="btn1"时,就会触发onclick事件

onclick事件与click事件的不同,onclick事件会在click事件之前执行

<input id="btn2" type="button" onclick="test();" />

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

btn2.addEventListener('click', showMsg, false); //鼠标单击的时候调用showMes这个函数

function showMsg() {

alert("事件监听");

}

当点击id="btn2"时,先执行onclick事件的方法test(),再执行click事件的showMsg()方法;

onclick绑定事件

方法一:把onclick绑定在标签上
HTML元素行间事件(也可以叫HTMl事件处理程序),直接在html标签里添加事件。
缺点:html和js代码紧密耦合

<input id="btn1" type="button" onclick="test();" />

方法二:onclick的js绑定办法

//把一个函数赋值给一个事件处理程序属性

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

function abc() {

alert('abc');

}

btn1.onclick = abc; //当点击的时候执行abc这个函数,等价于 btn1.onclick=function abc(){alert('abc');}

//btn1.onclick = null; //去掉绑定的事件

方法三:click的js绑定方法(推荐)

//通过“事件监听”的方式来绑定事件

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

btn2.addEventListener('click', showMsg); //鼠标单击的时候调用showMes这个函数

//addEventListener() 方法用于向指定元素添加事件句柄

function showMsg() {

alert("事件监听");

}

//btn2.removeEventListener('click', showMsg); //去除绑定

onclick事件和click事件触发事件

除了手动点击外,js也可以触发点击事件

  1. .onclick()事件

var btn2Onclick = document.getElementById("btn2").onclick();  //获取btn2onclick事件

只会触发onclick事件

  1. .click()事件

document.getElementById("btn2").click();

会先出发onclick事件,再触发click事件

onclick事件和click事件触发事件【解绑】

解绑onclick事件

btn1.onclick = null; //去掉绑定的事件

解绑click事件

btn2.removeEventListener('click', showMsg, false); //去除绑定

以上是 【JS】JS-onclick事件与click鼠标事件 的全部内容, 来源链接: www.h5w3.com/113147.html

度小满广告!风险提示:广告信息均来自平台方,不代表平台安全性,不构成建议!
度小满
回到顶部