码迷,mamicode.com
首页 > Web开发 > 详细

js click 与 onclick 事件绑定与解绑

时间:2017-10-27 13:19:46      阅读:804      评论:0      收藏:0      [点我收藏+]

标签:remove   func   html元素   ntb   abc   通过   事件处理   点击   span   

 

click 与 onclick

1.onclick 事件会在对象被点击时发生。

<input id="btn1" type="button" onclick="test();" />
function test() {
    alert("我是行间事件");
}

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

 

2.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()方法;

 

js 绑定点击事件的方法

方法1:把onclick绑定在标签上

不建议把onclick直接绑定在标签上

HTML元素行间事件(也可以叫HTMl事件处理程序),直接在html标签里添加事件。

缺点:html和js代码紧密耦合

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

 

方法二:onclick的js绑定办法

//把一个函数赋值给一个事件处理程序属性。(这种方式也叫做Dom0级事件处理程序)
var btn1 = document.getElementById(‘btn1‘);
function abc() {
    alert(‘abc‘);
}
btn1.onclick = abc; //当点击的时候执行abc这个函数,等价于 btn1.onclick=function abc(){alert(‘abc‘);}
//btn1.onclick = null; //去掉绑定的事件

 

 方法三:click的js绑定办法(js的话推荐这种)

//通过“事件监听”的方式来绑定事件(也叫Dom2级事件处理程序)
var btn2 = document.getElementById(‘btn2‘);
btn2.addEventListener(‘click‘, showMsg, false); //鼠标单击的时候调用showMes这个函数  
function showMsg() {
    alert("事件监听");
}
//btn2.removeEventListener(‘click‘, showMsg, false); //去除绑定

 

js  解绑点击事件的方法

解绑onclick

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

 

解绑click

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

 

 

参考文章:http://blog.csdn.net/u014205965/article/details/45651875

js click 与 onclick 事件绑定与解绑

标签:remove   func   html元素   ntb   abc   通过   事件处理   点击   span   

原文地址:http://www.cnblogs.com/ooo0/p/7742214.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!