行内绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function click_event(){ //用户在点击span完成之后，会自动触发该方法。
alert("用户点击了按钮");
}
</script>
</head>
<body>
<span type="button" onclick="click_event()" value="点击触发弹框">hello </span>
</body>
</html>
动态绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function click_event(){ //用户在点击span，会自动触发该方法。
alert("用户点击了按钮");
}
onload=function () {
el = document.getElementsByTagName("span")[0]
el.onclick=click_event //onclick绑定click_event函数
//el.onclick=null //解除绑定
}
</script>
</head>
<body>
<span>hello </span>
</body>
</html>
事件监听 addEventListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function span_click() {
alert("用户点击了按钮");
}
onload=function () {
el = document.getElementsByTagName("span")[0]
el.addEventListener('click',span_click) //onclick去掉on,点击行为绑定span_click方法
//el.removeEventListener('click',span_click)//移除监听
}
</script>
</head>
<body>
<span>hello </span>
</body>
</html>
this
在Javascript中，有一个特殊对象叫做this，其随着运行环境的不同，其指向也是不同的！
行内绑定中，其事件处理中的this指向了全局window对象
动态绑定中，其事件处理中的this指向了当前正在操作的dom对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function change() {
alert(this.value)
}
onload=function () {
el=document.getElementsByTagName("input")[0]
el.onchange=change
}
</script>
</head>
<body>
<input type="text">
</body>
</html>
网友评论