js click 与 onclick 事件绑定,触发与解绑

js click 与 onclick 事件绑定,触发与解绑

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


方法二:onclick的js绑定办法

//把一个函数赋值给一个事件处理程序属性。(这种方式也叫做Dom0级事件处理程序)
var btn1 = document.getElementById(‘btn1’);
function abc() {
alert(‘abc’);
}
btn1.onclick = abc; //当点击的时候执行abc这个函数,等价于 btn1.οnclick=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 触发点击事件
除了手动点击外,js也可以触发点击事件

  1. .onclick()
    document.getElementById(“btn2”).onclick();
    这种只会触发onclick事件
  2. .click()
    document.getElementById(“btn2”).click();
    这种会先出发onclick事件,再触发click事件
    js 解绑点击事件的方法
    解绑onclick
    btn1.onclick = null; //去掉绑定的事件
    解绑click
    btn2.removeEventListener(‘click’, showMsg, false); //去除绑定

jquery trigger模拟 触发select的change事件

$('#province').trigger("change");

jquery trigger模拟 用户单击事件

$('#province').trigger("click");

<a>标签没有disabled解决办法:

//$("#entry").attr("disabled",true);
$("#entry").css("pointer-events","none");

这个属性能让标签disabled;某个元素添加了onclick事件,能让onclick失效。


<a>标签提交form

<a id="id" name="name" href="javascript:void(0)" class="class" onclick="document.forms[0].submit();"></a>

href=“javascript:function()” 和onclick的区别

href='javascript:function()'和onclick能起到同样的效果,
一般来说,如果要调用脚本还是在onclick事件里面写代码,而不
推荐在href='javascript:function()' 这样的写法,因为 
href 属性里面设置了js代码后,在某些浏览器下可能会引发其他
不必要的事件。造成非预期效果。
而且 onclick事件会比 href属性先执行,所以会先触发 onclick
然后触发href,所以如果不想页面跳转,可以设置 onclick里面
的js代码执行到最后返回一个false,这样 href 里面的东西就不会执行了。

div置顶层并自适应居中

.center-in-center{
  /*position: absolute;*/
  top: 50%;/*居正中*/
  left: 50%;/*居正中*/
  -webkit-transform: translate(-50%, -50%);/*居正中*/
  -moz-transform: translate(-50%, -50%);/*居正中*/
  -ms-transform: translate(-50%, -50%);/*居正中*/
  -o-transform: translate(-50%, -50%);/*居正中*/
  transform: translate(-50%, -50%);/*居正中*/
  position: fixed;/*随页面滚动移动*/
  z-index:100;/*顶层*/
}

页面图片适应div

#logo {
  background:url(/test.png) left center no-repeat;
  height:50px;
  width:10px;
  background-size: contain;//添加这行,图片背景适应div大小
}

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值