onclick事件绑定方法总结
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="t11()">
<script type="text/javascript">
function t1(){
console.log(111);
}
</script>
<!-- onclick 鼠标点击某个对象，所有HTML都可以使用该事件。JavaScript:脚本，适用于代码比较少的情况 -->
<input type="button"value="按钮" onclick="t1()">
<input type="button"value="按钮1" onclick="javascropt:console.log('ok');">
<br>
<script type="text/javascript">
function t2(){
console.log(222);
}
</script>
<!-- onchange事件:当内容发生改变时出发:输入框、文本域、单选复选、下拉列表 -->
<input type="text" onchange="t2()">
<textarea onchange="t2();"></textarea>
<input type="radio"onchange="t2();" name=sex><input type="radio"onchange="t2();" name=sex>
<input type="checkbox" onchange="t2()" name="" id="" value="" />
<!-- onchange事件通常和select下拉列表一起使用 -->
<select onchange="t2()">
<option value="">河南省</option>
<option value="">北京市</option>
<option value="">河北省</option>
</select>
<!-- onfocus：获取焦点时触发；onblur：失去焦点时触发 -->
<script>
function t3(){
console.log("获取焦点")
}
function t4(){
console.log("失去焦点")
}
</script>
<textarea onfocus="t3()" onblur="t4()"></textarea>
<br>
<script>
function t5(){
return true;
}
</script>
<!-- onsubmit仅用于form标签，提交表单时触发，注意：onsubmit触发方法必须有 返回值true或false -->
<form action="https://www.baidu.com/s" onsubmit="return t5();">
<input type="text" name="wd">
<input type="submit" value="百度一下">
</form>
<script type="text/javascript">
/* 鼠标移到某元素之上 */
function t6(){
console.log("over")
}
function t7(){
console.log("out")
}
function t8(){
console.log("move")
}
</script>
<div style="width: 200px;height: 200px;background-color: red; "onmouseover="t6()" onmouseout="t7()"onmousemove="t8()"></div>
<script type="text/javascript">
function t9(){
console.log("onkeydown")
}
function t10(){
console.log("onkeyup")
}
</script>
<!-- onkeydown某个键盘的键被按下时触发 onkeyup被松开时触发-->
<textarea onkeydown="t9()" onkeyup="t10()"></textarea>
<!-- onload -->
<script type="text/javascript">
function t11(){
var element=document.getElementById("test");
console.log(element+"ssssssssssss")
}
</script>
<input type="text" id="test">
<script type="text/javascript">
var element=document.getElementById("test");
console.log(element)
</script>
<script type="text/javascript">
function test(){
console.log("test")
}
</script>
<!-- on+对应事件，标签属性 -->
<button type="button" onclick="test()">按钮1</button>
<input type="button" id="bnt1" value="按钮2" />
<script type="text/javascript">
var element =document.getElementById("bnt1")
element.onclick=function(){
console.log("test1");
}
</script>
<input type="button" id="bnt2" value="按钮3" />
<script type="text/javascript">
var element =document.getElementById("bnt2")
element.addEventListener("click",function(){
console.log("test2");
});
</script>
</body>
</html>
版权声明：本文为m0_56506584原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。