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也可以触发点击事件

.onclick()

document.getElementById(“btn2”).onclick();

这种只会触发onclick事件.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大小}