<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> /* event : 事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的调用。飞机-黑匣子 事件对象必须在一个事件调用的函数里面使用才有内容 事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的决定，而是取决于这个调用的时候 兼容 ie/chrome : event是一个内置全局对象 标准下 : 事件对象是通过事件函数的第一个参数传入 如果一个函数是被事件调用的那么，这个函数定义的第一个参数就是事件对象 clientX[Y] : 当一个事件发生的时候，鼠标到页面可视区的距离 */ //alert( event ); //这里没有事件 /*document.onclick = function() { alert(event); };*/ function fn1(ev) { //alert( event ); //alert( ev ); var ev = ev || event; //alert(ev); /*for ( var attr in ev ) { console.log( attr + ' = ' + ev[attr] ); }*/ alert(ev.clientX); } //fn1(); //不是事件调用的函数 document.onclick = fn1; //是事件调用的函数，所以event有内容 </script> </head> <body> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> /* 焦点 : 使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入。 我们可以通过一些方式给元素设置焦点 1.点击 2.tab 3.js 不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点 */ </script> </head> <body> <input type="text" /> <input type="text" /> <input type="text" /> <div id="div1">div</div> <input type="text" /> <a href="http://www.baidu.com">百度</a> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> window.onload = function() { var oText = document.getElementById('text1'); //onfocus : 当元素获取到焦点的时候触发 oText.onfocus = function() { if ( this.value == '请输入内容' ) { this.value = ''; } } //onblur : 当元素失去焦点的时候触发 oText.onblur = function() { if ( this.value == '' ) { this.value = '请输入内容'; } } /* obj.focus() 给指定的元素设置焦点 obj.blur() 取消指定元素的焦点 obj.select() 选择指定元素里面的文本内容 */ oText.focus(); var oBtn = document.getElementById('btn'); oBtn.onclick = function() { oText.select(); } } </script> </head> <body> <input type="text" id="text1" value="请输入内容" /> <input type="button" value="全选" id="btn" /> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width: 100px; height:100px; background: red; position: absolute;} </style> <script> window.onload = function() { //onmousemove : 当鼠标在一个元素上面移动的触发 //触发频率不是像素，而是间隔时间，在一个指定时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次 var i = 0; var oDiv = document.getElementById('div1'); document.onmousemove = function(ev) { //document.title = i++; var ev = ev || event; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; oDiv.style.left = ev.clientX + 'px'; oDiv.style.top = ev.clientY + scrollTop + 'px'; } } </script> </head> <body style="height: 2000px;"> <div id="div1"></div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> div {padding: 40px;} #div1 {background:red} #div2 {background:green} #div3 {background:blue; position: absolute; top: 300px;} </style> <script> window.onload = function() { /* 事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制 */ var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oDiv3 = document.getElementById('div3'); function fn1() { alert( this.id ); } //oDiv1.onclick = fn1; 给**加事件，给元素加事件处理函数 //事件函数绑定 oDiv1.onclick = fn1;//告诉div1，如果他接收到了一个点击事件，那么他就去执行fn1 //oDiv2.onclick = fn1; oDiv3.onclick = fn1; //我在马路边捡到一分钱，把他交个警察叔叔 /*我.on马路边捡到一分钱 = function() { 把他交个警察叔叔 }*/ } </script> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width:100px; height:200px; border: 1px solid red; display: none;} </style> <script> window.onload = function() { /* 阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true; */ var oBtn = document.getElementById('btn'); var oDiv = document.getElementById('div1'); oBtn.onclick = function(ev) { var ev = ev || event; ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡 oDiv.style.display = 'block'; } /*oBtn.onmouseover = function(ev) { var ev = ev || event; ev.cancelBubble = true; }*/ document.onclick = function() { /*setTimeout(function() { oDiv.style.display = 'none'; }, 1000);*/ oDiv.style.display = 'none'; } } </script> </head> <body> <input type="button" value="按钮" id="btn" /> <div id="div1"></div> <p>ppppp</p> <p>ppppp</p> <p>ppppp</p> <p>ppppp</p> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;} #div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;} </style> <script> window.onload = function() { var oDiv = document.getElementById('div1'); oDiv.onmouseover = function() { this.style.left = '0px'; } oDiv.onmouseout = function() { this.style.left = '-100px'; } } </script> </head> <body> <div id="div1"> <div id="div2">分享到</div> </div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> //给一个对象绑定一个事件处理函数的第一种形式 //obj.onclick = fn; function fn1() { alert(this); } function fn2() { alert(2); } //document.onclick = fn1; //document.onclick = fn2; //会覆盖前面绑定fn1 //给一个对象的同一个事件绑定多个不同的函数 //给一个元素绑定事件函数的第二种形式 /* ie：obj.attachEvent(事件名称，事件函数); 1.没有捕获 2.事件名称有on 3.事件函数执行的顺序：标准ie-》正序 非标准ie-》倒序 4.this指向window 标准：obj.addEventListener(事件名称，事件函数，是否捕获); 1.有捕获 2.事件名称没有on 3.事件执行的顺序是正序 4.this触发该事件的对象 */ /*document.attachEvent('onclick', function() { fn1.call(document); }); document.attachEvent('onclick', fn2);*/ //是否捕获 : 默认是false false:冒泡 true：捕获 /*document.addEventListener('click', fn1, false); document.addEventListener('click', fn2, false);*/ function bind(obj, evname, fn) { if (obj.addEventListener) { obj.addEventListener(evname, fn, false); } else { obj.attachEvent('on' + evname, function() { fn.call(obj); }); } } bind(document, 'click', fn1); bind(document, 'click', fn2); </script> </head> <body> </body> </html>
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
