js中绑定事件可以通过以下三个方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<button onlclick="sayHello">确定</button> <!--ondbclick 鼠标点击两次-->
<!-- 如果希望点击按钮时会执行对应的操作 -->
<!-- 那么需要通过JavaSceipt为按钮绑定事件回调函数 -->
<!-- 绑定事件回调函数大致有三种方式: -->
<!--1. 通过标签的onXXX属性来指定需要执行的函数-->
<!--<script type="text/javascript">
function sayHello(){
alert("大家好!");
}
</script>
-->
<!-- 2.通过元素的onXXX属性来绑定需要执行的事件回调函数 -->
<!--<button id="ok">确定</button>
<script type="text/javascript">
var btn = document.getElementById("ok");
function sayHello(){
alert("大家好!")
}
btn.onclick = sayHello;
</script>-->
<!-- 3.通过元素的addEventListener方法来绑定事件回调函数 -->
<button id="ok">确定</button>
<script type="text/javascript">
var btn = document.getElementById("ok");
function sayHello(){
alert("大家好!")
}
function sayGoodbye(){
alert("再见!")
}
btn.addEventListener("click", sayHello);
btn.addEventListener("click", sayGoodbye);
btn.addEventListener("click", function(){
btn.removeEventListener("click", sayGoodbye)
});
</script>
</body>
</html>
JQ绑定事件的方法
// 拿到所有的a标签,全部绑定事件,并且自动解决浏览器兼容问题
$("#fruits>li>a").on("click", removerItem);
// 解除绑定事件
// $("#fruits>li>a").off()
// 拿到按钮标签
$("#ok").on("click", addItem)
注意:jqery绑定事件的时候$(this)代表当前的标签,通过$(this)就可以实现给多个标签绑定相同事件,达到可以操作当前点击的标签
如果不使用jQuery,原生js需要使用this.getArrribute('ga')可以获得当前点击的标签的ga属性的值
绑定复选框事件
给select绑定事件的方法:
$("#select").change(function(){
alert('sdfas')
})
1、要使用jquery库,务必要引用 jquery-1.7.2.min.js 文件
2、option 触发 click事件,首先要给 select 加 onchange 事件,因为option 不能直接触发click事件
3、if 判断option选项值时,务必要 使用 $("option:selected",this),后面用索引值index()或val()根据自己的喜好吧
|