<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background: chartreuse;
}
</style>
</head>
<body>
<div id="test"> div框</div>
<form>
<input type="text" />
<input type="submit" value="提交"/>
</form>
<script type="text/javascript">
window.onload=function(){
var oDIV=document.getElementById("test");
oDIV.onclick=function(e){
// alert(this.innerHTML);
console.log(e);
}
/* oDIV.onmouseover=function(){
alert(this.innerHTML);
}*/
var ofrom= document.getElementsByTagName("form")[0];
var input= document.getElementsByTagName("input");
ofrom.onsubmit = function(){
console.log("submit");
return false;
}
input[0].onfocus=function(){
console.log("onfocus");
}
input[0].onblur=function(){
console.log("onblur");
}
input[0].onchange=function(){
console.log("onchange");
}
input[0].oninput=function(){
console.log("oninput");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/* document.onkeypress=function(){
console.log("keypress");
}*/
/* document.onkeydown=function(){
console.log("onkeydown");
}*/
document.onkeydown=function(e){
var evt= e||event;
//console.log(evt.altKey,evt.ctrlKey,evt.shiftKey);
console.log(evt.keyCode);
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 400px;
height: 400px;
border: 1px solid #c9e2b3;
}
</style>
</head>
<body>
<div></div>
<input type="text"/>
<input type="submit" value="fabu"/>
<script type="text/javascript">
var oDIV=document.getElementsByTagName("div")[0];
var aINPUT=document.getElementsByTagName("input");
/* aINPUT[1].onclick=commentTxt;*/
function commentTxt(){
oDIV.innerHTML+=aINPUT[0].value;
}
aINPUT[1].onkeydown=function(e){
var evt= e||event;
//console.log(evt.altKey,evt.ctrlKey,evt.shiftKey);
console.log(evt.keyCode);
if (evt.ctrlKey && evt.keyCode==13){
commentTxt();
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#outer{
width: 200px;
height: 200px;
background: red;
}
#inner {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
<script type="text/javascript">
var outer = document.getElementById("outer");
var inner=document.getElementById("inner");
outer.onclick=function(){
console.log("outer");
}
inner.onclick=function(e){
var evt= e || event;
console.log("inner");
// 阻止冒泡 不让起点击inner div 时 ，打印inner和outer
// evt.cancelBubble=true;
evt.stopPropagation();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
li{
margin: 10px;
background: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
var aul=document.getElementsByTagName("ul")[0];
var ali=document.getElementsByTagName("li");
/* for(var i=0;i<ali.length;i++){
ali[i].onclick=function(){
console.log(this.innerHTML);
}
}*/
// 时间委托
aul.onclick=function( e ){
var evt= e || event;
var _target=evt.target ||evt.srcElement;
if (_target.nodeName.toUpperCase()=="LI"){
console.log(_target.innerHTML);
}
}
//在 ul 标签后追加 5 li标签
for(var i=0;i< 5;i++){
var oli= document.createElement("li");
oli.innerHTML=i;
aul.appendChild(oli);
}
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
<a href="">test</a>
<form>
<input type="text"/>
<input type="submit" value="sumint"/>
</form>
<script type="text/javascript">
var olink=document.getElementsByTagName("a")[0];
var oform=document.getElementsByTagName("form")[0];
var oinput=document.getElementsByTagName("input")[0];
//阻止跳转
olink.onclick=function(e){
var evt= e ||event;
console.log("aaa");
evt.returnValue=false;
}
//阻止提交
oform.onsubmit=function(){
console.log("submit");
return false;
}
//阻止输入文本框
oinput.onkeydown=function(){
console.log("input");
return false;
}
//阻止鼠标右键
document.oncontextmenu=function(){
console.log("rigth");
return false;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#outer{
width: 200px;
height: 200px;
background: red;
}
#inner {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
<script type="text/javascript">
var outer = document.getElementById("outer");
var inner=document.getElementById("inner");
// 和下面的比较是：会覆盖掉一个点击事件 outer.onclick=null 如果移除当前事件。可以赋值null
/* outer.onclick=foo;
outer.onclick=foo1;
*/
// 注意：可以加上两个点击事件，不冲突
outer.addEventListener("click",foo,false);
outer.addEventListener("click",foo1,false);
// 如果移除
outer.removeEventListener("click",foo);
outer.removeEventListener("click",foo1);
function foo(){
console.log("outer1");
}
function foo1(){
console.log("inner");
}
</script>
</body>
</html>
浙公网安备 33010602011771号