<!DOCTYPE html>
<html>
<head>
<title>01_define.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
console.log('js绑定事件及event参数');
</script>
</head>
<body>
<ul>
<li>aaaaaaa</li>
<li>bbbbbbb</li>
<li>ccccccc</li>
<li>ddddddd</li>
</ul>
This is my HTML page. <br>
<input type="button" value="点击" id="ipt1"/>
<script type="text/javascript">
//可以通过以下方式来绑定事件，就可以完成事件和html的解耦和操作， <input type="button" value="点击" id="ipt1" onclick="xx()"/>这种就没有实现解耦和，事件内嵌到html中了
//在开发中通常使用这种方式绑定事件
//这个事件处理函数中默认有一个event参数，用来获取相应的事件信息
var ipt1 = window.document.getElementById("ipt1");
ipt1.onclick = function(event){
//特别注意：对于IE而言，不会自动传递event这个参数进去，IE需要通过window.event来获取事件，但是FF又不支持window.event,所以通常用以下方式来解决
event = event || window.event;
console.log(event.type); //click
//this就是这个按钮对象。
console.log(this.value);
}
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
